'How can I start my node server and react app at the same time?

I created an API using express and I want to use it in my front-end server, the issue is that in order for my api to work I have to constantly run it on a server. However I can't do that simultaneously running my react application. So my question is how can I start my react server and api at the same time?

P.S. I tried out concurrently but I'm confused on how to get it working, heres some sample code from my package.json

{
    "name": "app",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
    "@material-ui/core": "^4.1.1",
    "@material-ui/icons": "^4.2.0",
    "axios": "^0.19.0",
    "concurrently": "^4.1.0",
    "express": "^4.17.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
     "scripts": {
     "start": "node src/connection",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "react": "react-scripts start",
     "dev": "concurrently \"npm start\" \"npm react\""
     },
     "proxy": "http://localhost:3000",
    "eslintConfig": {
    "extends": "react-app"
    },
    "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": []
 }
}
node.jsreactjsconcurrently


Solution 1:[1]

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"
  1. Make sure you provided the correct path for client and server
  2. Run 'npm run dev'
  3. Smile

Solution 2:[2]

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

Solution 3:[3]

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""}

Solution 4:[4]

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)

Solution 5:[5]

  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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Aamer
Solution 2
Solution 3
Solution 4 Ishara Kularatna
Solution 5 JustAG33K

Related Questions