Node.js Server Overwritten Entire Dom With React.js

What I am trying to do: I am trying to practice MERN structure, so I wanted to set up a node.js server and react front-end first. However, what happened is that when the server get

Solution 1:

For development, given you are using create-react-app for your React application, you can use a development proxy to run both Express and React on separate ports. Any fetch() requests will be redirected to the specified proxy path/port in package.json. This will allow you take advantage of development tools for each platform.

1. Change the Express server port to anything other than 3000. For example app.listen(3001, () => console.log('Listening on port 3001')); This is so create-react-app can run on 3000 and Express can run on 3001.
2. Added the following line to the React application's package.json to enable a proxy, "proxy": "http://localhost:3001". A fetch request to /api/test will be redirect to http://localhost:3001/api/test.

For production, given you would want both applications to run on the same port:

1. Set up static resource loading for the server using static() method.
2. Added logic to server to redirect all requests that do not match you "API" paths, to load the index.html of the production built npm run build React application using sendFile(). This will allow to use routing within the React application.

Here is what that could look like at a basic level, with the create-react-app build folder generated from npm run build command is placed into path /public/build:

app.use(express.static(path.join(__dirname, 'public', 'build')));

// API route
app.get('/api/test', (req, res) => {
  res.send({ express: 'I MADE IT' });
});

// catch-all route
app.use('*', function (request, response) {
  response.sendFile(path.join(__dirname, 'public', 'build', 'index.html'));
});

React fetch():

// ...const response = await fetch('/api/test'); // this matches the path specified on server, before the catch all routeconst body = await response.json();
// ...

Check out this answer as it was a similar issue.

Update: - Steps to create simple Express + React development environment:

1. Create Express application using express-generator. Run command npx express-generator react-express
2. Navigate into created project. Run command cd react-express.
3. Run command npm install. Then delete directory public.
4. Create React application using create-react-app. Run command npx create-react-app public.
5. Install concurrently. Run command npm install concurrently --save-dev.
6. Edit app.js at the base of project created by express-generator. Add the following lines starting at line 25. This is to expose and endpoint at /api/test and provide a "catch-all" route to load index.html generated by npm run build.

```

app.get('/api/test', (req, res) => {
  res.send({ express: 'I MADE IT' });
});

app.use('*', function (request, response) {
  response.sendFile(path.join(__dirname, 'public', 'build', 'index.html'));
});

```

7. Edit /bin/www line 15 to change port from 3000 to 3001. var port = normalizePort(process.env.PORT || '3001');
8. Edit package.json created by create-react-app at /build/package.json. Add the following line "proxy": "http://localhost:3001".
9. At the base package.json located at the root of the project, created by express-generator, add the following line to srcipts: "dev": "concurrently \"node ./bin/www\" \"cd public && npm start\""
10. Run command npm run dev from the base of the project. This will load both the server (Express) and client (React) and will proxy calls, in this example /api/test on port 3000 will be directed to the server port running at 3001.

Hopefully that helps!