React front end with Node express back end. Terminal crashes every time I make a change - node.js

Question

I am building my first application using a React Front end and a node.js backend with express. I followed this guide https://levelup.gitconnected.com/how-to-render-react-app-using-express-server-in-node-js-a428ec4dfe2b to set up the bones of the app. To be honest I am not quite sure what code to include so I will include everything I think is necessary. The issue is every time I make a change, the terminal crashes and I am forced to restart the process.
In previous tutorials I set up the server on a different port then ran nodemon to update every time changes were made. I have watched 10+ hours of videos and have read countless articles on how to use node/express but I cant seem to get past the initial setup without something going completely wrong and having to try and find a new tutorial. I am newer to Node and very new to express so any constructive knowledge is appreciated. Thank you!
index.js
const express = require("express");
const app = express(); // create express app
// add middleware
const path = require("path");
// as the build folder will be created inside react-app folder, we are creating a path for the build folder located outside the server folder. must go first!!
app.use(express.static(path.join(__dirname, "..", "build")));
app.use(express.static("public"));
// start express server on port 5000
app.listen(5000, () => {
console.log("server started on port 5000");
});
package.json
{
"name": "react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^1.3.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
"express": "^4.18.2",
"mongodb": "^5.0.1",
"mongoose": "^6.9.1",
"morgan": "^1.10.0",
"nodemon": "^2.0.20"
},
"scripts": {
"start-client": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"start": "yarn run build && (cd server && yarn start)"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
app.js. example code comment down is from the explanation on how to insert data using express.
import React from "react";
import axios from "axios";
import "./styles.css";
import DayContainer from './views/dayContainer/dayContainer'
import Header from './views/Header/header';
import Form from "./views/Form/form";
export default class App extends React.Component {
state = {
users: [],
};
componentDidMount() {
axios.get("/users.json").then((response) => {
this.setState({ users: response.data });
});
}
render() {
const { users } = this.state;
return (
<div className="App">
<Header/>
<div className='module-container'>
<DayContainer/>
<Form/>
</div>
{/* example code */}
<div>
<ul className="users">
{users.map((user) => (
<li className="user">
<p>
<strong>Name:</strong> {user.name}
</p>
<p>
<strong>Email:</strong> {user.email}
</p>
<p>
<strong>City:</strong> {user.address.city}
</p>
</li>
))}
</ul>
</div>
</div>
);
}
}
I have used multiple different tutorials using different methods of setting up express. I think this issue might stem from the fact that both the server and front end are using the same port but I could be wrong.
EDIT: adding server.json
{
"name": "express-static-serve",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "nodemon index.js"
},
"license": "MIT",
"dependencies": {
"express": "^4.18.2",
"nodemon": "^2.0.20"
}
}
Error :
Terminal exits with error code 2
Evey time I change something then refresh the app. I need to press ctrl + c to exit the process and then I get error code 2 and the terminal closes

Answer 1

That's a pretty convoluted way to set up react, and probably not what will want when you go to production. The best way is to have the react app use a proxy to redirect it to the main server. Here's how to do it: https://create-react-app.dev/docs/proxying-api-requests-in-development/
Basically you just add a "proxy" property to the react app's package.json and point to the URL of the node server. If that doesn't work you can configure the proxy manually (https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually).
I've never understood why the developers of react made it so complicated as having to run two separate servers just to develop an app, when in production, it's only one server. But I've found it is one of the pain points for newcomers into the react world. Hopefully the instructions there will be of more help.
If you do this, you don't need two app.static entries in your server's index.js.