How to run a fullstack JavaScript project with a single command

It can often be annoying to open multiple terminal windows just to serve your full-stack JavaScript application locally.

That can be even worse if your backend has some micro-service architecture.

Bellow you will find a couple of alternatives for how this can be simplified on different platforms.

NOTE: All above exaples assume the following folder structure:

/project-root
    └───/backend
        └───[...]
        └───package.json
    └───/frontend
        └───[...]
        └───package.json
    └───package.json

Method 1: Bash command

This simple command works on Linux, macOS and Windows Subsystem for Linux.

It handles killing all processes for you when you hit CTRL+C and requries no extra dependencies! You can find more about it here.

bash -c 'npm run start:dev --prefix ./backend & npm run dev --prefix frontend & wait'

Method 2: Using Concurrently

When the above is not an option (eg. you are on Windows), Concurrently is another way we can solve the same problem.

In addition to managing all the processes for you, Concurrently also offers some cool additional features such as output prefixing and highlighting.

Terminal usage

npm install -g concurrently

concurrently --kill-others --names "BACKEND,FRONTEND" -c "bgBlue.bold,bgMagenta.bold" \
    "npm run start:dev --prefix ./backend" "npm run dev --prefix ./frontend"

Package.json usage

You can also commit the concurrently command on a package.json file:

{
  [...]
  "scripts": {
    "start:all": "concurrently --kill-others --names \"BACKEND,FRONTEND\" -c \"bgBlue.bold,bgMagenta.bold\" \"npm run start:dev --prefix ./backend\" \"npm run dev --prefix ./frontend\""
  }
  [...]
}

And run with a short command:

npm run start:all