Run multiple NPM commands simultaneously using “concurrently” ⏱

Photo by sara rahmani on Unsplash

Run multiple commands concurrently. Like npm run server & npm run client but better.

WHY? 🤔

I have a project that should start server then start UI, so script in package.json would look like this

"scripts": {
    "start": "npm run start:server && npm run start:ui",
    "start:server": "cd server && npm start",
    "start:ui": "react-scripts start",
},

At first, I thought it would be fine because after I ran a npm startI can see react app right away BUT ACTUALLY it failed to start the server and continued starting react app 😅

So then I thought (again) ok let’s go fix the server code, and this is what I got after run npm start again

▶ yarn start
yarn run v1.22.10
$ yarn run start:ycs-proxy && yarn start
$ cd ycs-proxy && npm start && cd../
> ycs-proxy@0.1.0 start
> node index.js
... stuck here 👈

It stuck in the server side and won’t start the ui one. 🥲

Time to find the SOLUTION! 🔨

So I went on google and try find

“Is there any way to run these command like simultaneously?”

Then I found this Concurrently and they said

I like task automation with npm but the usual way to run multiple commands concurrently is npm run watch-js & npm run watch-css. That's fine but it's hard to keep on track of different outputs. Also if one process fails, others still keep running and you won't even notice the difference.

Another option would be to just run all commands in separate terminals. I got tired of opening terminals and made concurrently.

ref: https://github.com/kimmobrunfeldt/concurrently#why

That’s what I am looking for! 🚀

Let give it a try!

Install

First to install concurrently, we can run this command below and DONE!

▶ npm install concurrently --save

Modify our scripts

I am going to change the “start” command to be

"scripts": {
    "start": "concurrently \"npm run start:server\" \"npm run start:ui\"",
    ...
},

NOTE: Remember to surround separate commands with quotes:

concurrently "command1 arg" "command2 arg"

Otherwise concurrently would try to run 4 separate commands: command1, arg, command2, arg.

ref: https://github.com/kimmobrunfeldt/concurrently#usage

Advanced MODE ON!

Also the “NPM run commands” can be shortened like

"scripts": {
   "start": "concurrently \"npm:start:server\" \"npm:start:ui\"",
    ...
},

And many more options you can find on their document!

Now, we can run our npm start with smooth flow 😉

You might ask this 👇

Can I use this with yarn?

So you might ask that can it be used with yarn? like this.

Does this work with the npm-replacements yarn or pnpm?

Yes! In all examples above, you may replace “npm” with “yarn” or “pnpm”.

ref: https://github.com/kimmobrunfeldt/concurrently#faq

And the also the result I show at first is running on yarn.

And that’s all! Enjoy your concurrently ones! 😉