How to run more than one command as part of a npm script
Tags: node, javascript
Published: 2019-08-21 22:53:11

---
title: How to run more than one command as part of a npm script
published: true
canonical_url: https://www.coreycleary.me/how-to-run-more-than-one-command-as-part-of-a-npm-script/
tags: node,javascript
---

<em><strong>Originally published at <a href="https://www.coreycleary.me/how-to-run-more-than-one-command-as-part-of-a-npm-script/">coreycleary.me</a></strong>. This is a cross-post from my content blog. I publish new content every week or two, and you can <a href="https://www.coreycleary.me/about/">sign up to my newsletter</a> if you'd like to receive my articles directly to your inbox! I also regularly send cheatsheets and other freebies.</em>

A common scenario: as part of your `npm start` script, you need to have more than one command run (like `webpack --config webpack.server.js` and `webpack --config webpack.client.js`).

Up until now you might have only run one command per script - often `npm start` just does something like `node server.js`.

So is there actually a way to run <em>more</em> than one command?

Rather than needing to have multiple scripts run, in multiple terminal/shell tabs, and having to remember the order in which to run them, it can be much easier.

We'll look at two ways of running more than one command as part of a npm script: sequentially and concurrently.

(and these will work for `yarn` as well)

<h3>Sequentially</h3>
If you have commands that need to run in order, then using a double ampersand - `&&` - in between those commands will make it so that the preceding command must finish before the next can start.

For simple demo purposes, imagine you have an `index.js` file that just logs `starting` and you want to log `complete!` after it's finished. In your `package.json` file, it would look like this:
```bash
"scripts": {
  "start": "node index.js && echo 'complete!'"
}
```
And the output would look like:
```bash
> node index.js && echo 'complete!'

starting!
complete!
```

<h3>Concurrently</h3>
Now, if you need to run multiple commands at the same time - it doesn't matter what order they run in - the simplest way to achieve that would be to use a <strong>single</strong> ampersand between your commands.

But that presents a number of issues, the biggest being that we don't get good process handling.

For example, imagine the second command/process to run dies. The background process will keep running which potentially raises some problems:
<ul>
	<li>the background process will keep occupying resources</li>
	<li>it will still write to `stdout` and clutter the shell prompt</li>
	<li>if you try to run the script again, another background process will be created -> they will interfere with each other or cause the script to fail entirely (i.e.- port conflict)</li>
	<li>you’d have to kill the background processes manually to fix this</li>
	<li>or, a background process could die and you might not notice bc the exit message got buried somewhere in the logs</li>
</ul>

There is a npm package which solves this though: <a href="https://github.com/kimmobrunfeldt/concurrently" rel="noopener" target="_blank">concurrently</a>.

`concurrently` allows for better process handling. It will clean up the processes automatically if they die. And it will give you more organized console output.

Let's look at an example:
```bash
"start": "concurrently --names 'SERVER,CLIENT' --prefix-colors 'yellow,blue' --kill-others 'json-server data.json' 'react-scripts start'"
```

`--kill-others` will kill the other processes running if one process dies. And `--prefix-colors` will allow us to more easily view the console logs - `json-server data.json` logs will show in yellow and `react-scripts start` will show in blue. We've also named them so we can tell by name which process is which.

`concurrently` comes with a lot more configuration options (you can run other npm scripts besides `npm start` too) so be sure to check out the documentation.

<h3>Wrapping up</h3>
But most importantly we now can better handle our processes. And we now know how to run more than one command/process as part of `npm start` (or any npm/yarn script for that matter, we're not just limited to `start`). As JavaScript/Node apps get more complex and have more complex start-up processes, it's <strong>extremely</strong> helpful to be able to have better control over these processes and not have to open up a bunch of shells.

Now you just have to use one command!

And if you found this post helpful, <a href="https://www.coreycleary.me/about/">here's that link again</a> to subscribe to my newsletter!