Run React-Frontend and Nodejs-Backend with one command

Before frontend frameworks came out, we just needed to run the backend and open localhost with the browser.

However, now we need to run the frontend and the backend. I think they are not too much work but, I sometimes run more than 4 programs and open many iTerm's tabs. Then get an error since I tried to use the same port which is totally my mistake, but I sometimes want to shout WTF??????

steps

1. Install concurrently
2. Add proxy to frontend package.json
3. Modify package.json script

step1 install concurrently

I like this npm package because easy to use lol.

Basically, I use this to run a couple of things together.

For example, my npm run dev is including tslint, build and run webpack-server

$ npm install --save-dev concurrently

https://www.npmjs.com/package/concurrently

step2 Add proxy

In this case, nodejs(backend) is using port 8080.

"proxy": "http://localhost:8080"

step3 Modify package.json

This case is using npm start to start frontend and backend.

 "scripts": {
 "client": “cd client && npm start",
 "server": “cd server && npm start",
 "dev": “concurrently \"npm run server\" \"npm run client\""
 },

Run

$ npm run dev

Comments

[Hafiz Saifullah]

I am using express server for back-end and react for front-end. my instructor, in video use script as follow in package.json
"dev": "npm run dev-client & nodemon index.js"
when he run on terminal the following command
npm run dev
both terminals run with this command, but when i try to use following pattern, only the front end run...

[0xkoji]

"dev": "npm run dev-client & nodemon index.js"

It should be "dev": "npm run dev-client && nodemon index.js".

[Hafiz Saifullah]

It also was not working but for now Issue has been resolved by installing concurrently using
npm i concurrently --save
and changing dev script by
"dev": "concurrently \"npm run dev-client\" \"nodemon index.js\""

Thanx a lot for your kind response, that is a lot for me.
Thank you @koji

[0xkoji]

Nice!

[Kampouse]

"dev" :"concurrently 'npm run backend' 'npm run frontend' "
single quote much better ;)