Skip to Content
Technical Articles

Use Tasks in Visual Studio Code to start a cds service, an approuter and launch a browser in one go

Introduction

cds run and cds watch are both commands from @sap/cds-dk that will not only serve the OData service, but also the contents of the app folder. In case an approuter is required (e.g. to make use of JWT based authentication), it has to be launched separately.

I use Visual Studio Code to develop CAP projects. I usually start the CDS service by invoking cds run and then manually open a new terminal window, change the directory using cd app and then execute npm run start.

I was looking for an easier way to start serving CAP projects locally when I need the approuter, in fact I wanted to find a solution to start everything in one go.

I’m sure there are various approaches to this, but in this blog I show you how I was able to achieve this using Visual Studio Code tasks. This solution is cross-platform and doesn’t require any additional npm or other dependencies.

Demo

Instructions

Setting up Tasks

If it doesn’t exist already, add a tasks.json file underneath your projects .vscode folder.

This example assumes the following CAP project structure:

  • package.json (root cds project)
  • srv
  • app
    • package.json (approuter)

You can use my sample below and customize it to your needs.

In my case, I use this task mainly for demo purposes and that’s why I use the title “Run CAP with SSO”. In the package.json in the root of the CAP project (which represents the CDS project) I have setup the default auth.strategy to ‘mock’. That way I can control the choice of JWT (SSO) versus mock based on the npm script. For example, the ‘start’ script from this root package has the following command assigned to it:

NODE_ENV=production cds run

Example .vscode/tasks.json

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Start cds",
      "type": "npm",
      "script": "start",
      "group": "test",
      "presentation": {
        "reveal": "always",
        "clear": true,
        "panel": "dedicated",
        "group": "cap"
      }
    },
    {
      "label": "Start approuter",
      "type": "npm",
      "script": "start",
      "path": "dummy", // https://github.com/microsoft/vscode/issues/120913
      "group": "test",
      "options": {
        "cwd": "${workspaceFolder}/app"
      },
      "presentation": {
        "reveal": "always",
        "clear": true,
        "panel": "dedicated",
        "group": "cap"
      }
    },
    {
      "label": "Open Browser",
      "type": "shell",
      "linux": {
        "command": "x-www-browser"
      },
      "windows": {
        "command": "start"
      },
      "osx": {
        "command": "open"
      },
      "args": ["http://localhost:5000"],
      "presentation": {
        "reveal": "silent",
        "clear": true,
        "panel": "dedicated",
        "group": "cap"
      },
      "problemMatcher": []
    },
    {
      "label": "Run CAP with SSO",
      "dependsOn": ["Start cds", "Start approuter", "Open Browser"],
      "group": "test"
    }
  ]
}

In my example above, there is one task to launch the cds service, one to launch the approuter, one to launch the browser with the host and port of the approuter and one task to start them all together using the dependsOn setting.

Using Tasks

Tasks can be launched from the Command Palette, by searching/selecting ‘Tasks: Run Task’ and then selecting the task. I do recommend the Task Explorer extension to include auto detected Tasks (e.g. npm scripts) and custom defined tasks (tasks.json) in the user interface of Visual Studio Code.

Task%20Explorer%20Panel

Task Explorer Panel

In the example above, the presentation of the terminals is setup in such a way that each task will keep a dedicated terminal panel around. This means that after running the “Run CAP with SSO” task, it’s possible to stop the cds service (CTRL+C) and then relaunch it individually by starting the “Start cds” task. This will then reuse the previous terminal panel.

Wrap Up

I hope one day cds run and cds watch will be approuter-aware. Until then, I belief using the Tasks feature of Visual Studio Code is a good alternative. Executing all of these actions in parallel doesn’t save a large amount of time, but it makes it less cumbersome and I do benefit from it as it is a repetitive task while developing CAP applications which you want to test with the approuter.

/
Task%20Explorer%20Panel
Be the first to leave a comment
You must be Logged on to comment or reply to a post.