Package Json run multiple commands (React and nodejs)

June 6, 2024

This is my scripts

  "scripts": {
    "init-client": "cd ./client && npm start",
    "init-server": "cd ./server && npm run dev",
    "start": "npm run init-server && npm run init-client"
  },

I want to start the client and the server
but when I run the start command just the server running

Plus Do I can run each command in a separate terminal tab?

>Solution :

The issue you’re facing is due to the way the && operator works in shell scripts. When you use &&, it runs the command on the right only after the command on the left has completed successfully. In your case, the server starts and keeps running, so the client command never gets a chance to start.

For Unix-based systems (like macOS), you can modify your scripts section in package.json as follows:

"scripts": {
  "init-client": "cd ./client && npm start",
  "init-server": "cd ./server && npm run dev",
  "start": "npm run init-server & npm run init-client"
}

For Windows, you would need to use the start command:

"scripts": {
  "init-client": "cd ./client && npm start",
  "init-server": "cd ./server && npm run dev",
  "start": "start npm run init-server && start npm run init-client"
}

Alternatively, you can use the concurrently package that will work on all systems.

First, install concurrently as a dev dependency:

npm install --save-dev concurrently

And then modify your scripts as:

"scripts": {
  "init-client": "cd ./client && npm start",
  "init-server": "cd ./server && npm run dev",
  "start": "concurrently \"npm run init-server\" \"npm run init-client\""
}