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

Did you see my answer (below)? – Chris Kavanagh May 26 '19 at 20:29 — Chris Kavanagh, May 26 '19 at 20:29

score 8 · Answer 1 · answered Feb 15 '19 at 20:32

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

score 0 · Answer 2 · answered Oct 04 '21 at 15:43

0

Solution is Here, first of all install concurrently(npm).

"scripts": {
"client-install": "npm install --prefix client",
"start": "nodemon server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"cd server && npm server"\ \"npm run client"\"

Than in your CLI: npm run dev
It's work! SkraJ5

answered Oct 04 '21 at 15:43

Jay Patel

218
2
8

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 04 '21 at 15:49
I have the same configurations. How can we use this to debug the front and backend concurrently? What would be the launch setting configuration to debug both together? – Junaid Nov 25 '21 at 08:20

Concurrently npm with React Js

2 Answers2