Can I run two ongoing npm commands in 1 terminal

Question

I have these 2 commands in my npm scripts

"scripts": {
"webpack": "webpack --config webpack.config.js --watch",
"server": "nodemon server.js",
}

As you can see, one runs webpack every time I save a file and one just runs the server with nodemon so I don't have to type "npm start" or something of the sorts every time I save a file.

Now this works fine but I need 2 terminals always open to run it and it gets a little crowded on my screen.

And I can't have one command read like this:

"start": "npm run webpack && npm run server"

becase the webpack command is ongoing and will never reach the second command.

Is there a way to have these two commands in 1 terminal, is this even advisable?

Answer 1

You could run one process in the background with & (one ampersand, not two) but that would require you to manage it manually, which would be rather tedious. For details see What does ampersand mean at the end of a shell script line?.

For that use-case someone built concurrently, which makes it simple to run processes in parallel and keep track of their output.

npm install --save-dev concurrently

And your start script becomes:

"start": "concurrently 'npm run webpack' 'npm run server'"

If you want to make the output a little prettier you can give the processes names with -n and colours with -c, for example:

"start": "concurrently -n 'webpack,server' -c 'bgBlue.bold,bgGreen.bold' 'npm run webpack' 'npm run server'"