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?

Fieldstone

It's more complicated than it's worth. Why not just use tmux or a similar multiplexer and run them in separate panes? If you're on macos and using iterm2, you can split the window. – Dalston

try to add webpack command to "prestart" section and simple run node start – Cooperate

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'"

Saturant

Thank you! concurrently works like a charm, you just saved me the hassle of constantly switching between terminals. – Fieldstone

Answer 2

Its easy actually, use & instead of && if you don't want to wait for the first one to finish. By adding & to the end of a command, you tell to execute in the background.

Simple example

npm run webpack & npm run server

Advanced example: I run 2 watchers (1 is a vue app, the second is a scss/js theme folder) in 1 window in 2 different folders actually. So a combination of double && and single &

(cd ~/some-path && yarn encore dev --watch) & (cd ~/some-other-path/ && yarn run dev)

The output of both watchers is mixed but is no problem actually. Only readability will decrease.

One downside is that when you hit ctrl-c to stop the processes like you used to do, it only closes the currently running non-background task. The first is running in background because it was followed by &. So if you want to stop both processes, just close the terminal window and both will be finished.

Or hit ctrl-c to stop the open process followed by following command to:

kill the last background process:

kill %1

OR

kill the last command

kill $!

Socket