Create React App not reloading with Express in development - node.js

Question

I created a basic react app with Create React App. I removed all default files and added this into index file.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
constructor() {
super();
this.state = {};
}
async componentDidMount() {
const response = await fetch('/express_backend');
const json = await response.json();
this.setState({ data: json.express });
}
render(){
return (
<div>{this.state.data}</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
This app works. I can add some letters between divs and it reloads when saving. But when I add simple Express server the reloading stops. I also add "proxy": "http://localhost:5000/" into package.json inside CRA to connect server and client
Here is the server
const express = require('express');
const app = express();
const port = 5000;
app.listen(port, () => console.log(`Listening on port ${port}`));
// create a GET route
app.get('/express_backend', (req, res) => {
res.send({ express: 'YOUR EXPRESS BACKEND IS CONNECTED TO REACT' });
});
I restarted both Create react app and server in console but now when I add smth between divs in the component nothing is reloading. I guess webpack dev server starts working improperly.
How can I make reloading in CRA work and make request to express each time when I change smth in component?

Answer 1

When running create-react-app with express, you'll need to run your server.js express app in a separate node process than the react-js-app. Also, you'll need to specify the proxy in your package.json.
Utilize these commands in separate terminals:
node server.js
and in separate terminal:
npm start
Kudos to this tutorial: https://dev.to/loujaybee/using-create-react-app-with-express