Boss Machine - Getting Front End to Show up

Get Help Express.js
#1

Hi there, I’m a little confused about how to get started with the Boss Machine project. link

I’ve set up the server.js file to run correctly (even double checked against solution code to be sure). However, when I load http://localhost:4001/ in my browser, I don’t see the front end. I just get an error on my screen that says “Cannot GET /”

I also get these two errors in the console:

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”). injectGlobalHook.js:808:49
Content Security Policy: The page’s settings blocked the loading of a resource at http://localhost:4001/favicon.ico (“default-src”). FaviconLoader.jsm:191:19

I could go on writing the back end code and passing tests but… I’d like to figure out how the front end code gets properly mounted.

Any help is appreciated. Thanks!

1 Like
#2

Hello,

Here’s the code I ended up writing in server.js myself so I could see the project’s front-end in action:

app.use('/public', express.static('public'));
app.get('/', (req, res, next) => { 
  res.sendFile('index.html', { root: __dirname });
});

It wasn’t part of the project steps and wasn’t covered anywhere that I saw, so I’m just giving the code directly instead of hints. I wouldn’t do this in production - I just wanted a quick way to serve the front-end files without having to move a bunch of things around or set up other tools.

2 Likes
#3

Thank you so much! This is super helpful. I had a feeling there should be something indicating a get request that would serve the index.html file but I didn’t know how to make it happen. I wonder why this isn’t mentioned anywhere on the project.

By the way, why would you not do this in production?

1 Like
#4

You’re welcome

I suppose I should’ve said I wouldn’t necessarily do this in production. Maybe with something small like this it would be fine, but I’d have to do more research. My initial thoughts are that there would normally be more separation of the front-end and back-end, and the files wouldn’t be so intertwined like this. The front-end files could be served quicker to the user with the help of a CDN, for example.

I’ve used this same (or similar) block of code in some of the other back-end projects where Codecademy provides an already completed front-end. Alternatively, there are other ways to view it in development. You could use the Live Server VSCode extension and launch index.html from that and it should work too (as long as your server to handle the APIs is running, of course). If you check out the file browser/index.js, you’ll see how they are making all the calls to the back-end. The port is hard-coded so it doesn’t matter that Live Server launches the front-end on a different port. That demonstrates the separation a bit more too.

1 Like