Start client and server in one command using Vue-cli / Webpack

Question

• I am deploying a Vue client using Vue-cli 3, which uses Webpack
  (I can start the client by calling "yarn dev --open" )
• I am also writing a server with an API for the client
  (I can start the server by calling "node server/server.js" )

Is there a way to start both the client and the server with one command?
I was thinking that I should add some code to vue.config.js to start the server before the client is being compiled.

Preferably this would all work in a hot-reload way.

---

So far I tried a shell script as Alex78191 suggested:

#!/usr/bin/env bash

node server/server.js &
yarn dev --open

This works, but when I try to stop the servers using ctrl-C, only the yarn-process stops, but the node server keeps on running. Is there a way in bash to stop all started processes (background and foreground) with the ctrl-C command?

Answer 1

I was able to get this working with the following bash script:

#!/usr/bin/env bash

node server/server.js &
pid=$!

yarn dev --open

trap "kill ${pid}; exit 1" INT

This script is a little bit more complex than you might expect to make sure that all child processes stop when this script stops (using ctrl-C). For more information on stopping child processes I found some help here: how-can-bash-script-do-the-equivalent-of-ctrl-c-to-a-background-task