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