CODEWITHSUNDEEP
npmconcurrently
test team
test team

Reputation: 767

Concurrently npm with React Js

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

Upvotes: 2

Views: 16242

Answers (2)

Jay Patel
Jay Patel

Reputation: 306

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

Upvotes: 0

Chris Kavanagh
Chris Kavanagh

Reputation: 449

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

Upvotes: 8

Related Questions