What's the best way to execute multiple npm scripts simultaneously?

Other Questions NPM
1

I’m working on a Node.js project and I need to run two scripts at the same time when I start developing. Here’s what I have in my package.json:

"scripts": {
  "watch-server": "nodemon --exec babel-node server.js",
  "dev-client": "webpack serve --mode development"
}

I tried to combine them like this:

"dev": "npm run watch-server && npm run dev-client"

But this approach runs them sequentially instead of simultaneously. How can I run both scripts concurrently while still seeing the output from each command? I’m okay with task runners, but I prefer using Gulp over Grunt since I already use it in another project.

2

I’ve been in a similar situation, and after trying various approaches, I found that using the ‘concurrently’ package worked best for me. It’s straightforward to set up and gives you clear, organized output from multiple scripts.

Here’s what I did:

First, I installed concurrently as a dev dependency:

npm install --save-dev concurrently

Then, I updated my package.json scripts:

“scripts”: {
“watch-server”: “nodemon --exec babel-node server.js”,
“dev-client”: “webpack serve --mode development”,
“dev”: “concurrently "npm run watch-server" "npm run dev-client"”
}

Now, when I run ‘npm run dev’, both scripts start simultaneously, and I can see the output from each clearly labeled. It’s been a game-changer for my workflow, especially when debugging issues across the server and client.

One tip: you can customize the output prefixes if you want, which can be helpful for longer-running projects with multiple scripts.

3

Hey there! i’ve had luck using the ‘npm-run-all’ package for this. super easy to setup:\n\nnpm i -D npm-run-all\n\nthen in ur package.json:\n\n"dev": “npm-run-all --parallel watch-server dev-client”\n\nrun ‘npm run dev’ and ur good to go! works great for me, hope it helps u too!

4

I’ve found a neat solution using the ‘npm-run-all’ package. It’s quite versatile and works well across different operating systems. Here’s what you can do:

First, install npm-run-all as a dev dependency:

npm install --save-dev npm-run-all

Then, update your package.json scripts like this:

“scripts”: {
“watch-server”: “nodemon --exec babel-node server.js”,
“dev-client”: “webpack serve --mode development”,
“dev”: “npm-run-all --parallel watch-server dev-client”
}

Now, when you run ‘npm run dev’, both scripts will execute simultaneously. The output is well-organized, making it easy to track what’s happening with each process. It’s been a real time-saver in my projects, especially when juggling multiple scripts.