JavaScript Development: Run Concurrently

With the npm package concurrently you can run more than one command inside the same terminal. This comes handy when you simultaneously develop your front end and your back end in one project.

Let’s see an example with a Node.js back end and a React front end. Here is the folder structure:

server/
 .gitignore
 index.js
 package.json
 ...etc
 client/
      public/
      src/
      ... <- all the other React code

First, install concurrently.

Then add new scripts to package.json:

 "scripts": {
    "start": "node index.js",
    "server": "nodemon index.js",
    "client": "npm run start --prefix client",
    "dev": "concurrently -k \"npm run server\" \"npm run client\""
  },

The npm flag --prefix allows you to run the script from the client directory. The flag -k for concurrently tells the program to kill other processes. It’s useful when you still have running processes lying around, for example, when your previous session didn’t shut down.

If you use yarn as your package manager, you have to tell it the directory path for the client side code with --cwd.

 "scripts": {
    "start": "node index.js",
    "server": "nodemon index.js",
    "client": "yarn --cwd ./client run start",
    "dev": "concurrently -k \"yarn run server\" \"yarn run client\""
  },

Now your dev command runs both Node and React.