CODEWITHSUNDEEP
node.jsreactjsexpressmern
gangrelg
gangrelg

Reputation: 113

Node.js (MERN) Serving static files and API's

Im currently building a simple app using the MERN stack to learn. What Ive done so far:

  1. -User Registration and Login (API)
  2. -TODO List (API and Frontend with static files)

Ok, Everything works good and as expected, except for one thing.

I attempt to use my API's for any request, but at the same time I want my whole app to work rendering in a web browser (TODO list). So, the process I've followed is:

  1. -Start node instance
  2. -npm run build (To build react project files)

I did a research on how to use React build in node project and I did the following:

app.use(express.static('myproject/build'));
app.get('/*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'myproject', 'index.html'));
});

Good! So when I go to http://localhost:4000, it renders my index file and it actually works with my Login API, but I have some API's that are only available for consuming data and not rendering UI.

So, my problem is that when running the app, if I go to: http://localhost:4000/api/users/getdata I get an error saying: Error: ENOENT: no such file or directory pointing the index.html

Ok, if I uncomment the code I posted before, then of course my app is not rendering UI, but my routes from API's work normally.

I know this might be setup/configuration process, but Im trying my best to understand this. If somebody could assist me with this problem please.

The hierarchy im working goes as follows:

Upvotes: 0

Views: 867

Answers (1)

gangrelg
gangrelg

Reputation: 113

I did what @MaxAlex suggested. Changed the code from:

app.get('/*')

to

app.get('/')

Upvotes: 1

Related Questions