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
- Install concurrently
- Add proxy to frontend package.json
- 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
Top comments (5)
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...
It should be
"dev": "npm run dev-client && nodemon index.js".It also was not working but for now Issue has been resolved by installing concurrently using
npm i concurrently --saveand 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
Nice!
"dev" :"concurrently 'npm run backend' 'npm run frontend' "
single quote much better ;)