7

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": []
 }
}
Jun Yu
  • 375
  • 1
  • 5
  • 21
martha1352
  • 71
  • 1
  • 1
  • 2
  • 2
    Possible duplicate of [How can I run multiple npm scripts in parallel?](https://stackoverflow.com/questions/30950032/how-can-i-run-multiple-npm-scripts-in-parallel) – Will Jenkins Jun 23 '19 at 13:05

5 Answers5

5

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
Aamer
  • 121
  • 2
  • 4
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

Dhvani
  • 21
  • 4
1

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

Sri Krishna Chowdary
  • 61
  • 1
  • 2
0

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)

Ishara Kularatna
  • 152
  • 2
  • 16
0

  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

JustAG33K
  • 1,403
  • 3
  • 13
  • 28