loading...

Run React-Frontend and Nodejs-Backend with one command

kojikanao profile image Koji (he/him) ・1 min read

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

Posted on by:

kojikanao profile

Koji (he/him)

@kojikanao

Looking for opportunities! Software Engineer in NYC/Research Resident@NYU-ITP18-19 Mostly I work with reactjs and sometimes python. code to do something weird/useless/helpful Japanese

Discussion

markdown guide
 

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...

 

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

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 --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