Automate your Development Environment in VS Code Terminal

I am a firm believer of making the entry to barrier as low as possible for starting development environments. Even so much, that in the past I created something named Brewr which had the sole purpose of allowing development environments to be pulled and started from an organisation repository. (Now I think of it, it might be something I will pick up again in the future!).

Current Problem

Anyway, coming back to lowering this barrier to entry. Currently, I am working on a project that requires the following scripts:

• Backend
• Frontend
• AI Model
• AI Model Processor
• Tunnel
• Mobile App

As you can imagine, any developer that has to start up these scripts is hesitant to get started. So if we can automate this with one button, they would be less reluctant to do so. For this we have some options, we could use docker-compose and wrap them all in a container, we could use a script with Windows Terminal but that is Windows Only. So while I am working on my Mac, I was thinking on how we could use VS Code Terminal and automate it in there.

Solution

While researching this, I came across the Task option in VS Code that allows Automating Launching Terminals.

To make this file as simply as possible, just create a scripts/ directory where you add the files that start-up the respective program. Then combine them all together by creating a task in the ./.vscode/tasks.json file. For example, we can start our frontend like so:

{
  "label": "Frontend",
  "type": "shell",
  "command": "./scripts/mac/start-frontend.sh",
},

Next, we often want to "combine programs" into a logical group, that make it easier to show what belongs together (e.g. a frontend and backend).

{
  "label": "Frontend",
  "type": "shell",
  "command": "./scripts/mac/start-frontend.sh",
  "presentation": {
    "group": "Site"
  }
},

Combining all of this together, I created the following ./.vscode/tasks.json that starts up the programs described earlier:

tasks.json

{
  "version": "2.0.0",
  "presentation": {
    "echo": false,
    "reveal": "always",
    "focus": false,
    "panel": "dedicated",
    "showReuseMessage": true
  },
  "tasks": [
    {
      "label": "Start Dev Environment",
      "dependsOn": [
        "Frontend",
        "Backend",
        "Model",
        "Result Processor",
        "Tunnels",
        "Mobile App"
      ],
      "runOptions": {
        "runOn": "default"
      }
    },
    {
      "label": "Frontend",
      "type": "shell",
      "command": "./scripts/mac/start-frontend.sh",
      "presentation": {
        "group": "Site"
      }
    },
    {
      "label": "Backend",
      "type": "shell",
      "command": "./scripts/mac/start-backend.sh",
      "presentation": {
        "group": "Site"
      }
    },
    {
      "label": "Model",
      "type": "shell",
      "command": "./models/models/img-matting/deploy/development/run.sh",
      "presentation": {
        "group": "AI"
      }
    },
    {
      "label": "Result Processor",
      "type": "shell",
      "command": "./scripts/mac/start-model-processor.sh",
      "presentation": {
        "group": "AI"
      }
    },
    {
      "label": "Tunnels",
      "type": "shell",
      "command": "./scripts/mac/start-tunnels.sh",
      "presentation": {
        "group": "Tunnels"
      }
    },
    {
      "label": "Mobile App",
      "type": "shell",
      "command": "./scripts/mac/start-mobile.sh",
      "presentation": {
        "group": "Mobile App"
      }
    }
  ]
}

Once added, we can simply run CTRL + SHIFT + P and select Run Task: Start Dev Environment which will launch the task that we defined.