Concurrently npm with React Js

Question

I have a project which is created using Node express and React Js. The server(Node) package.json as follows. It uses concurrently to start both server and client as once using npm run dev. The server uses port 5000 and the client uses port 3000 And the Folder structure as follows.

/
|
|-mysample
   |
   |-client
   |   |-.env
   |   |-package.json
   |   |-src
   |-server.js
   |-package.json

package.json(mysample)

{
  "name": "mysample",
  "version": "1.0.0",
  "description": "My Sample",
  "main": "server.js",
  "scripts": {
    "client-install": "npm install --prefix client",
    "start": "nodemon server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },
  "author": "test",
  "license": "ISC",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.18.3",
    "concurrently": "^4.0.1",
    "express": "^4.16.4",
    "mongoose": "^5.3.8",
  },
  "devDependencies": {
    "nodemon": "^1.18.9"
  }
}

How can I use concurrently npm package to start two react js projects which uses port 3000 for admin and 8000 for client.

   /
    |-ebook_admin
       |
       |-client
       |   |-.env
       |   |-package.json
       |   |-src
       |   |-public
       |   |
       |-package.json
       |-src
       |-public
       |-.env

Chris Kavanagh Chris Kavanagh · Accepted Answer · 2019-02-15T20:32:15

If I understand your question correctly, you can take a look at one of my projects here https://github.com/chriskavanagh/mern-shopping-list/blob/master/package.json to see how as long as you've set up a proxy here https://github.com/chriskavanagh/mern-shopping-list/blob/master/client/package.json changing the port to 8000.

This is the backend package.json

"scripts": { "client-install": "npm install --prefix client", "start": "node server.js", "server": "nodemon server.js", "client": "npm start --prefix client", "dev": "concurrently \"npm run server\" \"npm run client\"", "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client", "test": "echo \"Error: no test specified\" && exit 1" },

and

"proxy": "http://localhost:8000", in your client package.json

Concurrently npm with React Js

1 Answers