How to run Front End and Backend together in React.js and Express.js with 'concurrently' package

Run Front End and Backend Concurrently

If you are looking for a way to run Front End and Backend together with React.js and Express.js, you may simply follow these steps:

Step 1:

Install 'concurrently'

npm install concurrently --save

Step 2:

Find the script start in package.json file

By default the script looks like this

"start": "react-scripts start",

First add concurrently to that script like this with backslashes and quote marks

"start": "concurrently \"react-scripts start\" ",

Look, now if you run npm start it will call concurrently first which will run the 'react-scripts start' command and if you want to add more command you have to add the scripts (commands) like the above format with backslashes and quote marks for each scripts, let's do it in the next step

Step 3:

Add more scripts to concurrently. Now, if we have a backend folder with backend codes, first we need to move onto the backend directory (cd backend) (use necessary command to move onto your relevant folder), then at the same time we will call nodemon which will run our server.js file (nodemon server), let's do it

"start": "concurrently \"react-scripts start\" \"cd backend && nodemon server\"",

That's it. Now you can use a single command and run front end and backend concurrently from your main/root project folder.

npm start

Comments

[jstewart8053]

Sorry if this is a bad question, but what if you are running in production? Do you do npm build on the front end and backend, if they are in two seperate repos? I'm working on a project where the front end and back end have there own repo but are under the same folder. I'm unsure of where to do npm run build at.

[Viney Rawat]

This is for development only don't use it in production

[Nuno111]

Thanks for this Mamun, works great for my dev environment!

I'm wondering throught, why aren't we installing this package as a dev dependency only?

Since we are not using this for production and mainly to run the application in dev environment only.

Cheers!

[Furkan KAYA]

Will this "npm start" work on a server? I mean, is it only for developing or will this let the project's front end and back end run on the same host?

[Mamun Abdullah]

I've implemented this on the development mode (it can be run on the same host using different ports), and on an active server after the successful deployment of the production/build codes it should run automatically.

Thank you for your comment.