VSCode Task to run various node commands

Question

I have a monorepo where I wish to create a script for starting up a specific project locally.

The project is completely Node.js based.

For me to set up this project locally for development, I need to run the following commands in this order:

1. Start up the docker images

   • cd docker/dockerForTests
     
   • docker-compose up -d

2. Start up the Web Auth server

   • cd src/project/webAuthentication
     
   • setenvs projectAuthentication && npm start

3. Start up the API

   • cd src/project/api
   • setenvs projectAPI && npm start

4. Start up the web client

   • cd src/project/web
   • setenvs projectWeb && npm start

I usually start each section up in a new terminal window, within VSCode, for ease of use.

To automate this process, I found out about VSCode Tasks.

Although it appears they are designed for 'building' or 'watching' tasks, I thought that I could modify the behavior to run the above commands for me.

Here was my attempt:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "runner": "terminal",
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Start Docker",
            "dependsOrder": "sequence",
            "type": "shell",
            "command": "cd docker/dockerForTests && docker-compose up -d",
        },
        {
            "label": "Start Web Auth",
            "dependsOrder": "sequence",
            "type": "process",
            "command": "cd src/project/webAuthentication && setenvs projectAuthentiction && npm start"
        },
        {
            "label": "Start Up Local Development Environment",
            "presentation": {
                "echo": true,
                "reveal": "always",
                "focus": true,
                "panel": "new",
                "showReuseMessage": false,
                "clear": true
            },
            "dependsOn": [
                "Start Docker",
                "Start Web Auth"
            ],
            "problemMatcher": []
        }
    ]
}

The first command works fine, but I wanted it to be like the integrated terminal, where it hangs for input once the command has finished running.

Secondly, the second task does not work as it's not a Node command.

I would like it to work like the regular, bash input.

How can I automate my above workflow? Is it even possible?

Crone

Is running server, api and web in containers could be ok for you, or do you only want to use vscode feature ? – Bunnell

@Bunnell I'm not sure what you mean as containers. Basically, I just wanted to have the same as I'm doing manually. I.E. A new terminal window for each 'item', within VSCode – Crone

Answer 1

At least for points 2, 3 and 4 concurrently works fine, and it should work fine for point 1 as well. With following scripts in scripts section of package.json in your root directory you should be able to launch your dev env with just one command

"start-docker": "cd docker/dockerForTests && docker-compose up -d",
"start-auth": "cd src/project/webAuthentication && setenvs projectAuthentication && npm start",
"start-api": "cd src/project/api && setenvs projectAPI && npm start",
"start-client": "cd src/project/web && setenvs projectWeb && npm start",
"start-dev": "concurrently \"npm run start-docker\" \"npm run start-auth\" \"npm run start-api\" \"npm run start-client\""

This doesn't use VSCode task, but would simplify your life anyway.

Pyretic

Yes, I would say "it requires you to open a single terminal and let you running the 4 commands you need all in the same terminal" – Pyretic

That's a little unfortunate, as I was looking for something that would run each point separately, in a unique terminal – Crone

What "separately" means? Four running processes in the same terminal have to somehow share the only terminal for their output. – Pyretic

That's the thing, I need them to run in 4 separate terminals. Each command needs to have it's own terminal window. – Crone

Answer 2

You should be able to add the necessary scripts to the root package.json's scripts section. Once you do that, you should see them as VS Code tasks, thanks to VS Code's automatic task detection.

See https://code.visualstudio.com/docs/editor/tasks#_task-autodetection for details.

Eduardo