How do I run a server and a React App at the same time? - npm

Question

In a previous much more complicated project I built along side others in a class we were able to run npm start for the react app, and nodemon for the server at the same time without issue. I am now trying to build a simple single page web application with create-react-app and realize that I cannot run my server and my React App on the same port. I get a message that say "Something is already running on port 3000." Not sure how this was accomplished previously.
Do they even need to be running on the same port for them to communicate?
If yes or no, what is best practice for this?
Not sure what code to show so I have included my package.json and the code for my server.js so far. Any help or tips appreciated!
const express = require('express')
const app = express()
const cors = require("cors")
app.use(cors)
app.use(express.json())
app.listen(3000, () => {
console.log("Server is running")
})
{
"name": "project",
"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",
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"pg": "^8.8.0",
"pg-hstore": "^2.3.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"sequelize": "^6.27.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
},
"main": "./server/server.js"
}
So far I've tried to use concurrently, and npm-run-all but that seemed to break both the react app and the server.
Unfortunately the application that was previously built is broken repair (at least with my current skill set) excepting the npm start command. The major difference between the old project and my new one is that the old one has a different package.json for the server and the react app. Between the two packages I have all the same dependencies on my current project. Other than that the only difference I can find is that instead of the "main": "./server/server.js" in my single package.json, the react app has the following in it's react package.json:
"proxy": "http://127.0.0.1:4000"
Not sure if this comes into play at all because the react app from the old project still starts on port 3000. I have tried running my current project with the "proxy" code, but it doesn't have any affect.

Answer 1

When you run your server and client (React App) on the same machine or computer (meaning they are available through localhost), they should be running on different ports.
When "proxy": "http://127.0.0.1:4000" is found in the React App's package.json, it means that your client (React App) tries to call the server on port 4000.
You can read more about the "proxy" field in https://create-react-app.dev/docs/proxying-api-requests-in-development/.
By default, React App runs on port 3000. Therefore, I would suggest to change the port number in your server.js to 4000 for example.

Answer 2

If you want to make parallel command. i would recommend Lerna
which is very helpful for monorepo. ex: with single comannd we can download npm module for all project, Similarly can start all project with single cmd and same way build. flow this to get some idea lerna working sample
This loop has more info for the common node modules
As my opinion best option would be to use two port for serving client app and server, in dev environment.