{Debug} Teams Toolkit v5 VS Code Tasks

Teams Toolkit v5 VS Code Tasks

A Teams Toolkit generated project has pre-defined a set of VS Code tasks in its .vscode/tasks.json. These tasks are for debugging and have corresponding arguments as inputs. This page shows the details about how these tasks are defined and how to customize with your own args.

Note: these tasks are generated by Teams Toolkit (>= 5.0.0). To use those tasks generated by Teams Toolkit (>= 4.1.0), see {Debug} Teams Toolkit VS Code Tasks page.

Overall Contract

Aligning with the official VS Code schema, the tasks.json contains tasks top-level properties, which defines all the tasks and execution sequence used by Teams Toolkit. Following shows the summary of those pre-defined tasks:

Task Label                      (Type:Command)	Description
Start Teams App Locally	The entry task of debugging, to be referenced by launch.json.
Validate prerequisites (teamsfx:debug-check-prerequisites)	Check prerequisites required by debugging.
Start local tunnel (teamsfx:debug-start-local-tunnel)	Start local tunneling for bot project.
Provision (teamsfx:provision)	Create Teams app related resources required by debugging.
Deploy (teamsfx:deploy)	Build project.
Start application (shell:npm run ...)	Launch all local services.

Note: Depend on your project type, your tasks.json may contain a subset of above tasks.

For customization, all teamsfx: tasks contain args as inputs. See each section of task definition about the args schema.

Task Definition

This sections shows the details of each task.

Start Teams App Locally

This task is the entry point of all other tasks. It represents the full flow to launch Teams app locally. If you'd like to skip any step(s), just comment it out, e.g.,

{
    "label": "Start Teams App Locally",
    "dependsOn": [
        //// comment out any step(s) you'd like to skip
        // "Validate prerequisites",
        "Start local tunnel",
        "Provision",
        "Deploy",
        "Start application"
    ],
    "dependsOrder": "sequence"
}

Validate prerequisites

This task is to validate prerequisites that will be used in following debugging steps. If you'd like to skip checking any prerequisite(s), just comment it out.

Arguments	type	required	description
prerequisites	array	required	The enabled prerequisite checkers. Checkers: nodejs, m365Account, devCert, portOccupancy
portOccupancy	array	required	The ports to check if they are in use.

prerequisites	description
nodejs	Validate if Node.js is installed.
m365Account	Sign-in prompt for Microsoft 365 account, then validate if the account enables the sideloading permission.
portOccupancy	Validate available ports to ensure those debugging ones are not occupied.

Sample

{
    "label": "Validate prerequisites",
    "type": "teamsfx",
    "command": "debug-check-prerequisites",
    "args": {
        "prerequisites": [
            //// comment out any checker(s) you'd like to skip
            // "nodejs",
            "m365Account",
            "portOccupancy"
        ],
        "portOccupancy": [
            3978,
            //// add or update your own port(s) to be validated
            // 9239,
            2233
        ]
    }
},

Node.js

To discover the specific versions of Node.js that are supported for a newly created Teams Toolkit project, you can refer to the 'engines.node' field within its package.json file.

Port Occupancy

For newly created project, there may be following ports to be validated:

• 53000: the default port for local tab service
• 3978: the default port for local bot service
• 9239: the default debugger port for local bot service
• 7071: the default port for local api/backend service
• 9229: the default debugger port for local api/backend service
• 4321: the default port for local SPFx service

Start local tunnel

This task is to start local tunnel service to make your local bot message endpoint public. There are two types of tunnel services that can be used: dev tunnel and ngrok. By default, dev tunnel will be used.

Dev Tunnel

If you choose to use the dev tunnel service, the following are the required arguments:

Arguments	Type	Required	Description
type	string	required	The type of tunnel service to use. This argument must be set to dev-tunnel.
env	string	optional	The environment name. Teams Toolkit will write the environment variables defined in output to .env.<env> file.
ports	array	required	An array of port configurations, each specifying the local port number, protocol, and access control settings.

The ports argument must be an array of objects, with each object specifying the configuration for a particular port. Each object must have the following fields:

Port	Type	Required	Description
portNumber	number	required	The local port number of the tunnel.
protocol	string	required	The protocol of the tunnel.
access	string	optional	The access control setting for the tunnel. This value can be set to private or public. If not specified, the default value is private.
writeToEnvironmentFile	object	optional	The key of tunnel endpoint and tunnel domain environment variables that will be writen to .env file.

The writeToEnvironmentFileobject may have two fields:

WriteToEnvironmentFile	Type	Required	Description
endpoint	string	optional	The key of tunnel endpoint environment variable.
domain	string	optional	The key of tunnel domain environment variable.

When writeToEnvironmentFile is included, the specified environment variables will be written to the .env file. If this field is omitted, no environment variables will be written to the file.

Dev Tunnel Samples

1. The default one used by TeamsFx templates. If you want to manually migrate your local tunnel task from a v4 project, you can use the following code to replace the old task.

{
    "label": "Start local tunnel",
    "type": "teamsfx",
    "command": "debug-start-local-tunnel",
    "args": {
        "type": "dev-tunnel",
        "ports": [
            {
                "portNumber": 3978,
                "protocol": "http",
                "access": "public",
                "writeToEnvironmentFile": {
                    "endpoint": "BOT_ENDPOINT",
                    "domain": "BOT_DOMAIN"
                }
            }
        ],
        "env": "local"
    },
    "isBackground": true,
    "problemMatcher": "$teamsfx-local-tunnel-watch"
},

2. Change port. To use another port for local bot service (e.g., 3922), you can change the one in portNumber. Note that you also need to change the port in bot code (index.js or index.ts).

{
    "label": "Start local tunnel",
    "type": "teamsfx",
    "command": "debug-start-local-tunnel",
    "args": {
        "type": "dev-tunnel",
        "ports": [
            {
                "portNumber": 3922,
                "protocol": "http",
                "access": "public",
                "writeToEnvironmentFile": {
                    "endpoint": "BOT_ENDPOINT",
                    "domain": "BOT_DOMAIN"
                }
            }
        ],
        "env": "local"
    },
    "isBackground": true,
    "problemMatcher": "$teamsfx-local-tunnel-watch"
},

3. Totally get rid of Teams Toolkit tunnel service. If your dev environment does not support dev tunnel and ngrok or you'd like to use your own tunnel solution, you can skip/remove this tunnel task and just let Teams Toolkit know your messaging endpoint (set your messaging endpoint in botFramework/create action in teamsapp.local.yml).

Ngrok

If you opt for the ngrok service, you will need to provide the following arguments:

Arguments	Type	Required	Description
type	string	required	The type of tunnel service to use. This argument must be set to ngrok.
ngrokArgs	string or string[]	required	The ngrok command line arguments to start the tunnel. Full references can be found in ngrok document.
env	string	optional	The environment name. Teams Toolkit will write the environment variables defined in output to .env.<env> file.
writeToEnvironmentFile	object	optional	The key of tunnel endpoint and tunnel domain environment variables that will be writen to .env file.
ngrokPath	string	optional	The ngrok binary path. If undefined, use Teams Toolkit ngrok, otherwise use provided path. E.g.,"ngrokPath": "ngrok" // use ngrok from env:PATH "C:/some-path/ngrok" // use ngrok from absolute path "./bot/my-ngrok/ngrok" // use ngrok from relative path
tunnelInspection	string	optional	Teams Toolkit tries to get tunnel public URL from ngrok log first, then the first PublicURL via default inspection "http://127.0.0.1:4040/api/tunnels". If you specify your own ngrokArgs with different log format or inspection, set this arg to provide your own inspection location.

WriteToEnvironmentFile	Description
endpoint	The key of tunnel endpoint environment variable.
domain	The key of tunnel domain environment variable.

Ngrok Samples

1. This task is used to replace the default dev tunnel task that is included with TeamsFx templates. Teams Toolkit installs its own ngrok binary and start tunnel with command ngrok http 3978 --log=stdout --log-format=logfmt.

{
    "label": "Start local tunnel",
    "type": "teamsfx",
    "command": "debug-start-local-tunnel",
    "args": {
        "ngrokArgs": "http 3978 --log=stdout --log-format=logfmt",
        "env": "local",
        "output": {
            // output to .env.local
            "endpoint": "BOT_ENDPOINT", // output tunnel endpoint as BOT_ENDPOINT
            "domain": "BOT_DOMAIN" // output tunnel domain as BOT_DOMAIN
        }
    },
    "isBackground": true,
    "problemMatcher": "$teamsfx-local-tunnel-watch"
},

2. Change port. To use another port for local bot service (e.g., 3922), you can change the one in ngrokArgs. Note that you also need to change the port in bot code (index.js or index.ts).

{
    "label": "Start local tunnel",
    "type": "teamsfx",
    "command": "debug-start-local-tunnel",
    "args": {
        // change port here
        "ngrokArgs": "http 3922 --log=stdout --log-format=logfmt",
        "env": "local",
        "output": {
            // output to .env.local
            "endpoint": "BOT_ENDPOINT", // output tunnel endpoint as BOT_ENDPOINT
            "domain": "BOT_DOMAIN" // output tunnel domain as BOT_DOMAIN
        }
    },
    "isBackground": true,
    "problemMatcher": "$teamsfx-local-tunnel-watch"
},

3. Use your own ngrok command or config. If you'd like to use your own ngork command (e.g., ngrok start) or config (e.g., any-ngrok.yml) for advances usages. Note that if you change the log format or set your own inspect path, you need to provide tunnelInspection as well.

{
    "label": "Start local tunnel",
    "type": "teamsfx",
    "command": "debug-start-local-tunnel",
    "args": {
        // change the command here
        "ngrokArgs": "start --config any-ngrok.yml",
        // to let Teams Toolkit know your ngrok endpoint
        "tunnelInspection": "http://127.0.0.1:4040/api/tunnels",
        "env": "local",
        "output": {
            // output to .env.local
            "endpoint": "BOT_ENDPOINT", // output tunnel endpoint as BOT_ENDPOINT
            "domain": "BOT_DOMAIN" // output tunnel domain as BOT_DOMAIN
        }
    },
    "isBackground": true,
    "problemMatcher": "$teamsfx-local-tunnel-watch"
},

4. Use your own ngrok binary. If Teams Toolkit has issue on installing ngrok or you'd like to use your own ngrok binary, set ngrokPath.

{
    "label": "Start local tunnel",
    "type": "teamsfx",
    "command": "debug-start-local-tunnel",
    "args": {
        "ngrokArgs": "http 3978 --log=stdout --log-format=logfmt",
        // set ngrok path
        "ngrokPath": "/path/to/your/ngrok",
        "env": "local",
        "output": {
            // output to .env.local
            "endpoint": "BOT_ENDPOINT", // output tunnel endpoint as BOT_ENDPOINT
            "domain": "BOT_DOMAIN" // output tunnel domain as BOT_DOMAIN
        }
    },
    "isBackground": true,
    "problemMatcher": "$teamsfx-local-tunnel-watch"
},

Alternative	Description
Cloud VM	Develop your project on cloud VM (e.g., Azure VMs or Azure DevTest Labs). You can choose either to still use ngrok on your cloud VM, or to directly expose your bot service via VM's public hostname and port.
localtunnel	An alternative tunnel solution. You can install and run localtunnel instead of ngrok.

provision:
  - uses: botFramework/create # Create or update the bot registration on dev.botframework.com
    with:
      botId: ${{BOT_ID}}
      name: bot
      messagingEndpoint: your-messaging-endpoint
      description: ""
      channels:
        - name: msteams

{
    "label": "Start Teams App Locally",
    "dependsOn": [
        "Validate prerequisites",
        // Remove/comment out tunnel task
        // "Start local tunnel",
        "Provision",
        "Deploy",
        "Start application"
    ],
    "dependsOrder": "sequence"
}

Provision

This task executes lifecycle provision to prepare Teams app related resources required for debugging. It references teamsapp.local.yml, so the steps and actions can be customized in teamsapp.local.yml.

Arguments	Type	Required	Description
env	string	required	Environment name.

Sample

{
    "label": "Provision",
    "type": "teamsfx",
    "command": "provision",
    "args": {
        "env": "local"
    }
}

Deploy

This task executes lifecycle deploy to build project. It references teamsapp.local.yml, so the steps and actions can be customized in teamsapp.local.yml.

Arguments	Type	Required	Description
env	string	required	Environment name.

Sample

{
    "label": "Build project",
    "type": "teamsfx",
    "command": "deploy",
    "args": {
        "env": "local"
    }
}

Start application

These tasks are standard VS Code shell tasks to execute npm commands on project, following the official schema defined by VS Code. For example,

• command defines the shell command to be executed
• isBackground: true means the task keeps running in the background
• problemMatcher is used to capture the begin/end or any problem from the task output

Sample

{
    "label": "Start application",
    "dependsOn": [
        "Start frontend"
    ]
},
{
    "label": "Start frontend",
    "type": "shell",
    "command": "npm run dev:teamsfx",
    "isBackground": true,
    "options": {
        "cwd": "${workspaceFolder}"
    },
    "problemMatcher": {
        "pattern": {
            "regexp": "^.*$",
            "file": 0,
            "location": 1,
            "message": 2
        },
        "background": {
            "activeOnStart": true,
            "beginsPattern": ".*",
            "endsPattern": "Compiled|Failed"
        }
    }
}

Launch Teams Web Client

This Task is to launch your application in Teams Web Client for remote development environment (e.g. Codespaces).

Arguments	Type	Required	Description
env	string	required	Environment name.
manifestPath	string	required	The file path to the Teams manifest template file.

Sample

{
  "label": "Launch Teams for Codespaces",
  "type": "teamsfx",
  "command": "launch-web-client",
  "args": {
    "env": "local",
    "manifestPath": "${workspaceFolder}/appPackage/manifest.json"
  }
}