Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Build a REST API With Express Completing and Testing the API Next Steps

Posted by carinaortiz
carinaortiz
2,358 Points

I only get blank screen below header

I only get blank screen below header when trying in with the frontend files.

Can anybody tell me what I'm doing wrong or help me? Joel Kraft?

Reuben Varzea
Reuben Varzea
23,182 Points
Reuben Varzea
Reuben Varzea
23,182 Points

Always helpful to include some of your code for folks to help troubleshoot whatever issue you might be having.

Joel Kraft
Joel Kraft
Treehouse Guest Teacher
Joel Kraft
Joel Kraft
Treehouse Guest Teacher

Do you have the express API app running on localhost:3000? Do you have errors in the browser console or the terminal where the API is running? What do the errors say?

2 Answers

Zack Lee
PLUS
Zack Lee
Courses Plus Student 17,662 Points
Zack Lee
Zack Lee
Courses Plus Student 17,662 Points

This took me a minute to figure out as well. First i started up the mongo daemon in one process with:

$ mongod

then from the project root of the api we just made i ran:

$ nodemon app.js

this starts the api server on port 3000

then in a 3rd process i ran:

$ nodemon

from the root directory of the example front-end that was provided. this starts the server that runs the front-end on 3001. This is where you direct your browser.

I had this project in a totally separate directory from the restAPI directory i used for this course, so the 2 in no way need to be nested in the same directory.

if done in this order (i found they needed to be started in this order for connection to work) you should see the sample questions we posted with Postman since they were posted to the database. You'll find the answers are there too.

Jesse Thompson
Jesse Thompson
10,684 Points
Jesse Thompson
Jesse Thompson
10,684 Points

edit: seems he addresses CORS in the video. I didnt think this would relate as this is just from a different port not a different domain completely.

another edit: his solution didnt work for me either. Try using this

// Add headers app.use(function (req, res, next) {

// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3001');

// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);

// Pass to next layer of middleware
next();

});

google search "access-control-allow-origin chrome" if youre using chrome. I assume youre using chrome (What else would you be using?).

Thats the actual problem I checked in the console log on client side and it said something about access-control-allow-origin. Some ajax issue that doesnt allow two different ports to speak. Download the plugin for chrome. Theres probably a way you can do it manually in settings though.