Teams Toolkit VSCode

launch.json

{
    "version": "0.2.0",
    "configurations": [
      {
            "name": "Attach to Frontend in Teams (Edge)",
            "type": "msedge",
            "request": "launch",
            "url": "https://teams.microsoft.com/l/app/${{local:TEAMS_APP_ID}}?installAppPackage=true&webjoin=true&${account-hint}",
            "presentation": {
                "group": "all",
                "hidden": true
            },
            "internalConsoleOptions": "neverOpen"
        }
    ],
    "compounds": [
        {
            "name": "Debug in Teams (Edge)",
            "configurations": [
                "Attach to Frontend in Teams (Edge)"
            ],
            "preLaunchTask": "Start Teams App Locally",
            "stopAll": true
        }
    ]
}

settings.json

{
    "debug.onTaskErrors": "abort",
    "json.schemas": [
        {
            "fileMatch": [
                "/aad.*.json"
            ],
            "schema": {}
        }
    ]
}

tasks.json

// This file is automatically generated by Teams Toolkit.
// The teamsfx tasks defined in this file require Teams Toolkit version >= 5.0.0.
// See https://aka.ms/teamsfx-tasks for details on how to customize each task.
{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Start Teams App Locally",
            "dependsOn": [
                "Validate prerequisites",
                "Start local tunnel",
                "Provision",
                "Deploy",
                "Start application"
            ],
            "dependsOrder": "sequence"
        },
        {
            // Check all required prerequisites.
            // See https://aka.ms/teamsfx-tasks/check-prerequisites to know the details and how to customize the args.
            "label": "Validate prerequisites",
            "type": "teamsfx",
            "command": "debug-check-prerequisites",
            "args": {
                "prerequisites": [
                    "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 debug ones are not occupied.
                ],
                "portOccupancy": [
                    1234 // tab service port
                ]
            }
        },
        {
            // Start the local tunnel service to forward public URL to local port and inspect traffic.
            // See https://aka.ms/teamsfx-tasks/local-tunnel for the detailed args definitions.
            "label": "Start local tunnel",
            "type": "teamsfx",
            "command": "debug-start-local-tunnel",
            "args": {
                "type": "dev-tunnel",
                "ports": [
                    {
                        "portNumber": 1234,
                        "protocol": "http",
                        "access": "public",
                        "writeToEnvironmentFile": {
                            "endpoint": "APP_ENDPOINT", // output tunnel endpoint as BOT_ENDPOINT
                            "domain": "APP_DOMAIN" // output tunnel domain as BOT_DOMAIN
                        }
                    }
                ],
                "env": "local"
            },
            "isBackground": true,
            "problemMatcher": "$teamsfx-local-tunnel-watch"
        },
        {
            // Create the debug resources.
            // See https://aka.ms/teamsfx-tasks/provision to know the details and how to customize the args.
            "label": "Provision",
            "type": "teamsfx",
            "command": "provision",
            "args": {
                "env": "local"
            }
        },
        {
            // Build project.
            // See https://aka.ms/teamsfx-tasks/deploy to know the details and how to customize the args.
            "label": "Deploy",
            "type": "teamsfx",
            "command": "deploy",
            "args": {
                "env": "local"
            }
        },
        {
            "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|compiled|failed"
                }
            }
        }
    ]
}

teamsapp,.yml

# yaml-language-server: $schema=https://aka.ms/teams-toolkit/1.0.0/yaml.schema.json
# Visit https://aka.ms/teamsfx-v5.0-guide for details on this file
# Visit https://aka.ms/teamsfx-actions for details on actions
version: 1.0.0

environmentFolderPath: ./env

teamsapp.local.yml

# yaml-language-server: $schema=https://aka.ms/teams-toolkit/1.0.0/yaml.schema.json
# Visit https://aka.ms/teamsfx-v5.0-guide for details on this file
# Visit https://aka.ms/teamsfx-actions for details on actions
version: 1.0.0

environmentFolderPath: ./env