express app is not sending index.html file to client

Question

So my express app has a small Node server setup so it can serve up the index.html file when the home route '/' is hit. This is a requirement of using the App Services from Azure, there has to be this server.js file to tell the server how to serve up the client, and i had a previous implementation of this working, however i wanted to change my file structure. previously i had, the client React app in a folder client and the server.js in a folder server along with all of the conrtollers and routes. i've since moved the server API to its own application as there are other apps that depend on it. and i moved the client up one directory into the main directory. Everything was working fine till the other day when all of the sudden when you hit the home route / it will not serve up the index.html file. if you hit any other route it works, if you even hit a button linking back to the homepage, it works, but it wont serve up the app from the / and i cannot for the life of me figure out why, on my development server there are no errors in the console. and im most definitely targeting the correct directory and place for the index. but its like the server isnt reading the route to serve up.


if (process.env.NODE_ENV === 'production') {
  console.log('running');

  app.use(express.static(path.resolve(path.join(__dirname, 'build'))));
  // no matter what route is hit, send the index.html file
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(path.join(__dirname, 'build', 'index.html')));
  });
} else {
  app.get('/', (req, res) => {
    res.send('API is running...');
  });
}

So here im saying if the NODE_ENV is in production make the build folder static, and then whatever route is hit. (Note: i also tried this app.get with other route formats such as /* or / all have the same issues. however in my previous iteration when the client and server where deployed in the same location, /* is what i used.) The .env varialbes are setup correctly, as when the server is ran, itll console log running.. but even if i put a console log inside of the app.get() its like its never hit unless i access the route from something else first.

for example, if i place a console log inside of app.get that states hit whenever the route is hit, hitting / directly does nothing, but if i go to /login itll serve up the correct html on the client and console log hit in the terminal...

Mohit Ganorkar · Accepted Answer · 2022-11-07 09:56:58Z

If you are having server files inside the client react app, then we are basically accessing file which are not inside our server file. So, we can serve static files using the following code:

const  express = require("express");
const  app = express(); // create express app
const  path = require('path');
app.use(express.static(path.join(__dirname, "..", "build")));
app.use(express.static("build"));
app.listen(5000, () => {
    console.log("server started on port 5000");
});

Now in your packages.json of the client react app change the name of start tag under scripts tag to start-client. Then add this following tag to the scripts tag:

"start":"npm run build && (cd server && npm start)",

Basically, this will build the react app and start the server. It should look like this : enter image description here

Also in the packages.json of your server add the following tag under script tag

"start":"node server.js"

So when you run the following command npm start it should look like this : enter image description here

enter image description here

Collectives™ on Stack Overflow

express app is not sending index.html file to client

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related