Run NPM watch scripts for double-directory projects

Question

I'm building a project with Nuxt and Strapi and I was wondering if it's possible to develop them using a single watch script instead of opening two terminal sessions and then running the scripts sepperatly.

My current folder structure is like this:

- Main project
package.json <- Main script location?
- - Frontend
- - - Package.json <- Nuxt dev
- - Backend
- - - Package.json <- Strapi develop

I've tried the following in the main script:

  "scripts": {
    "start": "cd ./Frontend && yarn dev && cd ../Backend && yarn start"
  }

But, as expected, the yarn (nuxt) dev is being consistent in watching files and doesn't execute the script further.

Is there maybe an option for VSCode specifically that automates this? A VSCode task of some kind?

Answer 1

Answered my own question in the last sentence.

I've achieved it using VSCode tasks. F1 -> Configure task -> any

After that, just replace the "tasks" array with an object like this:

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Client Watch",
      "command": "yarn",
      "args": ["dev"],
      "options": {
        "cwd": "${workspaceFolder}/Frontend"
      }
    },
    {
      "label": "Server Watch",
      "command": "yarn",
      "args": ["develop"],
      "options": {
        "cwd": "${workspaceFolder}/Backend"
      }
    },
    {
      "label": "Watch",
      "dependsOn": ["Client Watch", "Server Watch"]
    }
  ]
}