[Solved]-How can I start my node server and react app at the same time?-Reactjs

npm-run-all package will help you to accomplish this task.

There is an option that can set in Create React App's package.json that proxies non text/html requests through to an alternative back end. You can use this feature to proxy to applications running elsewhere, using this you will be able to run a server within the React project itself.

Add below line to package.json file : "proxy": "http://localhost:3001",

Modify the scripts section as below :

    "scripts": {
    "start": "react-scripts start",
    "server": "node-env-run server --exec nodemon",
    "dev": "run-p server start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

Finally your package.json file will be looked like this.

{
          "name": "frontend_backend",
          "version": "0.1.0",
          "private": true,
          "dependencies": {
            "@testing-library/jest-dom": "^5.11.8",
            "@testing-library/react": "^11.2.2",
            "@testing-library/user-event": "^12.6.0",
            "nodemon": "^2.0.6",
            "npm-run-all": "^4.1.5",
            "react": "^17.0.1",
            "react-dom": "^17.0.1",
            "react-scripts": "4.0.1",
            "web-vitals": "^0.2.4"
          },
          "proxy": "http://localhost:3001",
          "scripts": {
            "start": "react-scripts start",
            "server": "node-env-run server --exec nodemon",
            "dev": "run-p server 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"
            ]
          }
        } 

Now, use npm run dev to run the application. (You may change 'dev' to anything that you want e.g : "app": "run-p server start", then use npm run app command to run the application)

1. Install npm concurrently package in the backend

2. Add below script inside backend's package.json

   "start": "node server.js",
   "server": "nodemon server.js",
   "frontend": "cd ./frontend && npm run dev",
   "dev": "concurrently \"npm run server\" \"npm run frontend\""
   

3. Make sure you provided the correct path for the client and server

   Add "proxy": "localhost:5000" as a proxy to package.json file of your react app. assuming your nodejs app is running on port 5000.

4. Run 'npm run dev' from the backend root folder

One Possible solution to run simuntaneously is

1. First you need to change proxy to 5000

   "proxy": "http://localhost:5000",

2. make sure the folder structure is Something like this

3. use concurrently in the backend( outside) package.json :

"scripts": {

"start": "node backend/server.js",

"client": "npm start --prefix frontend",

"dev": "concurrently "npm run start" "npm run client""}

Install package npm-run-all, which helps you to execute multiple scripts. You can refer the below link:

https://www.npmjs.com/package/npm-run-all

After installing this package, In your package.json, add the script like this:

"scripts": {    
  "start-js": "react-scripts start",
  "backend-start": "NODE_ENV=production node node_api/server.js",
  "start": "concurrently \"npm-run-all -p backend-start start-js\"",
  "build": "npm-run-all build-css && react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

Here, when you run the command "npm start", it first run the "backend-start" script which starts your backend server and then it starts react.

Just change the path in "backend-start" script. replace "node_api/server.js" with your path node startup file

In 5 steps:

1. Install npm i --s concurrently package
2. Add below script inside Node/server/backend's package.json

    "client": "npm start --prefix client",
    "clientinstall": "npm install --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client" 

3. Make sure you provided the correct path for client and server
4. Run 'npm run dev'
5. Smile