How to resolve 'cannot GET' error on react routes when using ExpressJS to serve react build?

Question

I have the following folder structure for a React client and ExpressJS server setup. I'm trying to serve the react build files from the Express server. I also have defined some route handlers for API from the express server

server                    /* NodeJS server folder
  -node_modules
  -app.js
  -package.json
client                    /* React client folder  
  -build
  -node_modules
  -src
     -components
     -App.js
     -index.js
  -package.json

My express (app.js) has the following code

app.use(express.static(path.join(__dirname, '../client/build')));
app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, '../client/build', 'index.html'));
});
...
...
app.get('/data', (req, res) => {
    res.json(data);
});

Here I'm able to see the home page of my React application but all the routes throws Cannot GET /reactroute. I'm also able to access the /data as defined by app.get handler

Referring some other answers I changed my code in the express server as

app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, '../client/build', 'index.html'));
});
...
...
app.get('/data', (req, res) => {
    res.json(data);
});

At this time I'm able to access the routes from the react but the /data is not giving the JSON (API) instead it is acting like an another route. What changes need to be done to get both react routes from the build folder and the route handlers defined in the express.

You have to place get /data before get *. If you place get * first, it also includes /data. — Mani
– Mani, Commented Nov 12, 2021 at 7:49
@Mani I think your solution works here thanks. If you can post it as an answer by reasoning it will be helpful for other — Lalas M
– Lalas M, Commented Nov 12, 2021 at 8:07
@LucaPizzini thanks for your response. I do not have much in the app.js as I'm doing some learning and testing .. — Lalas M
– Lalas M, Commented Nov 12, 2021 at 8:08

Mani · Accepted Answer · 2021-11-12 08:12:06Z

1

You have to place get /data before get *. Like this:

app.get('/data', (req, res) => {
    res.json(data);
});
...
...
app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, '../client/build', 'index.html'));
});

If you place get * first, it also includes /data. Where * considers all routes which are not mentioned before it.

answered Nov 12, 2021 at 8:12

Mani

2902 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to resolve 'cannot GET' error on react routes when using ExpressJS to serve react build?

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