Boss machine not running on web browser

https://www.codecademy.com/paths/web-development/tracks/javascript-back-end-development/modules/express-cumulative-project/informationals/bapi-p4-boss-machine

hi there,
Recently, I have had a problem: I have implemented all necessary codes for server.js boilerplate . However, when I run command npm run start, but it did not show up on the web browser which it is supposed for this project. Instead, I got this message.


and this is my code.

const express = require(‘express’);

const app = express();

const bodyParser= require(‘body-parser’);

const cors= require(‘cors’);

module.exports = app;

/* Do not change the following line! It is required for testing and allowing

  • the frontend application to interact as planned with the api server

*/

const PORT = process.env.PORT || 4001;

// Add middleware for handling CORS requests from index.html

app.use(cors());

// Add middware for parsing request bodies here:

app.use(bodyParser.json());

// Mount your existing apiRouter below at the ‘/api’ path.

const apiRouter = require(’./server/api’);

app.use(’/api’, apiRouter);

// This conditional is here for testing purposes:

if (!module.parent) {

// Add your code to start the server listening at PORT below:

app.listen(PORT, () =>{

console.log(Server listening on ${PORT});

});

}

I got stuck at this point. I want to see and interact with the project, but since I could not open it. I am really need all your helps.
thanks for reading and helping me out.

I’m currently working on the project too. I believe we have to build the necessary functionality to route the request to their proper API calls. For example if a user calls the minions endpoint, then it should return a list of all the minions stored in the database.

I am having an issue with the project and wanted to know if anyone had any pointers. When trying to import modules it keeps saying Syntax Error.

Edit: Just required the module instead :slight_smile:

1 Like

I met the same problem and I fixed it by:

  1. add this in server.js:
    app.use(express.static('public'));
    also in the api.js and other related router files,
    such as: apiRouter.use(express.static('public'));

  2. change the hierarchy of ‘/public’:
    put index.html (originally in the root directory) into ‘public’ directory, and the original files in public into a ‘public’ inside the ‘public’.
    like this:
    image

I don’t know why the original code doesn’t work… but by changing this way it does render the index.html. So I think it maybe helpful for you. :slight_smile:

1 Like

Another question: Is the solution code working well?
When I run ‘npm install’, it can not install successfully. Does anyone meet the same problem and figure out how to fix it?

Yah, i even try the solution code, however it did not work as well.

updated:
thanks to 3783501937. I could see the project on the browser. However, I just got another problem.

Again, I really need help. :slight_smile:

The easiest way I found to get things running without making any breaking changes to the front end is to just open index.html in your project directory. In your browser, just go to File -> Open, navigate to your project root directory and open index.html.

The solution code doesn’t have a route for ‘/’, so localhost:4000/ doesn’t load the app - in that sense the solution code doesn’t work. However, once index.html is open the app functioned for me as expected. But it is very confusing that the tutorial just assumes this, but doesn’t explain it. Including an extra step to route localhost:4000 to index.html, or stating explicitly that opening index.html is the way we’re expected to interact with the app for the entire tutorial, would avoid a lot of confusion.

Also note that none of your data will show up until you have the GET ‘/’ route properly setup for all 3 models - I found this really confusing at first since my minions API routes were all returning data when I checked them directly, but nothing was updating when I visited index.html

Once your initial GET ‘/’ routes are working for /minions, /ideas and /meetings, the data will appear - but if one of these routes isn’t setup, everything will be broken.

As you said, we just simply open index.html in the root directory, and then working on the project. will we be able to see anything change on the browser(index.html) whenever we change our code (server.js, api.js, …). honestly, what you are saying that I have thought about it at first, but I feel like it is not gonna work out and waste a lot of time.

Yep, you will see the results change in the browser, eventually - I’ve finished this project and got all my tests to pass. But the tricky thing is that none of the data will show up until you have the GET ‘/’ route properly setup for all 3 models.

I agree its a waste of time - a couple sentences explaining these caveats would make a big difference - hope a moderator takes note.

1 Like

I am be able to see everything on the browser, but I can not edit or change anything appears on the browser. Do you know why?