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