How can I add an new debuggable backend to existing teams app using teams toolkit in VSCode?

Question

I generated a new teams app that has a front end and bot features.

Now I would add a backend to manage server logic.

I would not do that in the bot app.

So I used teams toolkit to add new feature:

Logically I have choosen azure functions, because I would be able to deploy all my app components using the toolkit tools.

Now in my project directory I have the the sub-app:

My questions are :

How can I include this backend app to the launch.json and tasks.json in order to make it debuggable as the bot and the front end ?

    //launch.json
    {
        "version": "0.2.0",
        "configurations": [
            {
                "name": "Launch Remote (Edge)",
                "type": "pwa-msedge",
                "request": "launch",
                "url": "https://teams.microsoft.com/l/app/${teamsAppId}?installAppPackage=true&webjoin=true&${account-hint}",
                "presentation": {
                    "group": "remote",
                    "order": 2
                }
            },
            {
                "name": "Launch Remote (Chrome)",
                "type": "pwa-chrome",
                "request": "launch",
                "url": "https://teams.microsoft.com/l/app/${teamsAppId}?installAppPackage=true&webjoin=true&${account-hint}",
                "presentation": {
                    "group": "remote",
                    "order": 1
                }
            },
            {
                "name": "Attach to Frontend (Edge)",
                "type": "pwa-msedge",
                "request": "launch",
                "url": "https://teams.microsoft.com/l/app/${localTeamsAppId}?installAppPackage=true&webjoin=true&${account-hint}",
                "cascadeTerminateToConfigurations": [
                    "Attach to Backend",
                    "Attach to Bot"
                ],
                "presentation": {
                    "group": "all",
                    "hidden": true
                }
            },
            {
                "name": "Attach to Frontend (Chrome)",
                "type": "pwa-chrome",
                "request": "launch",
                "url": "https://teams.microsoft.com/l/app/${localTeamsAppId}?installAppPackage=true&webjoin=true&${account-hint}",
                "cascadeTerminateToConfigurations": [
                    "Attach to Backend",
                    "Attach to Bot"
                ],
                "presentation": {
                    "group": "all",
                    "hidden": true
                }
            },
            {
                "name": "Attach to Bot",
                "type": "pwa-node",
                "request": "attach",
                "port": 9239,
                "restart": true,
                "presentation": {
                    "group": "all",
                    "hidden": true
                }
            },
        ],
        "compounds": [
            {
                "name": "Debug (Edge)",
                "configurations": [
                    "Attach to Frontend (Edge)",
                    "Attach to Bot",
                ],
                "preLaunchTask": "Pre Debug Check & Start All",
                "presentation": {
                    "group": "all",
                    "order": 2
                },
                "stopAll": true
            },
            {
                "name": "Debug (Chrome)",
                "configurations": [
                    "Attach to Frontend (Chrome)",
                    "Attach to Bot",
                ],
                "preLaunchTask": "Pre Debug Check & Start All",
                "presentation": {
                    "group": "all",
                    "order": 1
                },
                "stopAll": true
            }
        ]
    }

How to make it deployable also directly from the toolkit deployment tools

Could you please refer this ?https://devblogs.microsoft.com/microsoft365dev/debugging-microsoft-teams-app-locally-with-teams-toolkit/ — Prasad-MSFT, Jun 02 '22 at 04:58
Nice article about how to use local debug, but it does not help me to add a backend and make it debuggable — infodev, Jun 02 '22 at 05:43

score 1 · Accepted Answer · answered Jun 06 '22 at 02:24

When Azure Functions is added to the project, .vscode/launch.json and .vscode/tasks.json should be updated automatically to support debug Azure Functions. Your case is strange. Anyway, you can use following .vscode/launch.json and .vscode/tasks.json to debug your app.

// .vscode/launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Remote (Edge)",
            "type": "pwa-msedge",
            "request": "launch",
            "url": "https://teams.microsoft.com/l/app/${teamsAppId}?installAppPackage=true&webjoin=true&${account-hint}",
            "presentation": {
                "group": "remote",
                "order": 1
            }
        },
        {
            "name": "Launch Remote (Chrome)",
            "type": "pwa-chrome",
            "request": "launch",
            "url": "https://teams.microsoft.com/l/app/${teamsAppId}?installAppPackage=true&webjoin=true&${account-hint}",
            "presentation": {
                "group": "remote",
                "order": 2
            }
        },
        {
            "name": "Attach to Frontend (Edge)",
            "type": "pwa-msedge",
            "request": "launch",
            "url": "https://teams.microsoft.com/l/app/${localTeamsAppId}?installAppPackage=true&webjoin=true&${account-hint}",
            "cascadeTerminateToConfigurations": [
                "Attach to Backend",
                "Attach to Bot"
            ],
            "presentation": {
                "group": "all",
                "hidden": true
            }
        },
        {
            "name": "Attach to Frontend (Chrome)",
            "type": "pwa-chrome",
            "request": "launch",
            "url": "https://teams.microsoft.com/l/app/${localTeamsAppId}?installAppPackage=true&webjoin=true&${account-hint}",
            "cascadeTerminateToConfigurations": [
                "Attach to Backend",
                "Attach to Bot"
            ],
            "presentation": {
                "group": "all",
                "hidden": true
            }
        },
        {
            "name": "Attach to Bot",
            "type": "pwa-node",
            "request": "attach",
            "port": 9239,
            "restart": true,
            "presentation": {
                "group": "all",
                "hidden": true
            }
        },
        {
            "name": "Attach to Backend",
            "type": "pwa-node",
            "request": "attach",
            "port": 9229,
            "restart": true,
            "presentation": {
                "group": "all",
                "hidden": true
            },
            "internalConsoleOptions": "neverOpen"
        }
    ],
    "compounds": [
        {
            "name": "Debug (Edge)",
            "configurations": [
                "Attach to Frontend (Edge)",
                "Attach to Bot",
                "Attach to Backend"
            ],
            "preLaunchTask": "Pre Debug Check & Start All",
            "presentation": {
                "group": "all",
                "order": 1
            },
            "stopAll": true
        },
        {
            "name": "Debug (Chrome)",
            "configurations": [
                "Attach to Frontend (Chrome)",
                "Attach to Bot",
                "Attach to Backend"
            ],
            "preLaunchTask": "Pre Debug Check & Start All",
            "presentation": {
                "group": "all",
                "order": 2
            },
            "stopAll": true
        }
    ]
}

// .vscode/tasks.json
{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Pre Debug Check & Start All",
            "dependsOn": [
                "validate local prerequisites",
                "start ngrok",
                "prepare local environment",
                "Start All"
            ],
            "dependsOrder": "sequence"
        },
        {
            "label": "validate local prerequisites",
            "type": "shell",
            "command": "exit ${command:fx-extension.validate-local-prerequisites}",
            "presentation": {
                "reveal": "never"
            }
        },
        {
            "label": "start ngrok",
            "dependsOn": "teamsfx: ngrok start"
        },
        {
            "label": "prepare local environment",
            "type": "shell",
            "command": "exit ${command:fx-extension.pre-debug-check}",
            "presentation": {
                "reveal": "never"
            }
        },
        {
            "label": "Start All",
            "dependsOn": [
                "Start Frontend",
                "Start Backend",
                "Start Bot"
            ]
        },
        {
            "label": "Start Frontend",
            "type": "shell",
            "command": "npm run dev:teamsfx",
            "isBackground": true,
            "problemMatcher": "$teamsfx-frontend-watch",
            "options": {
                "cwd": "${workspaceFolder}/tabs"
            }
        },
        {
            "label": "Start Backend",
            "type": "shell",
            "command": "npm run dev:teamsfx",
            "isBackground": true,
            "problemMatcher": "$teamsfx-backend-watch",
            "options": {
                "cwd": "${workspaceFolder}/api",
                "env": {
                    "PATH": "${command:fx-extension.get-func-path}${env:PATH}"
                }
            },
            "presentation": {
                "reveal": "silent"
            }
        },
        {
            "label": "Start Bot",
            "type": "shell",
            "command": "npm run dev:teamsfx",
            "isBackground": true,
            "problemMatcher": {
                "pattern": [
                    {
                        "regexp": "^.*$",
                        "file": 0,
                        "location": 1,
                        "message": 2
                    }
                ],
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": "[nodemon] starting",
                    "endsPattern": "restify listening to|Bot/ME service listening at|[nodemon] app crashed"
                }
            },
            "options": {
                "cwd": "${workspaceFolder}/bot"
            },
            "presentation": {
                "reveal": "silent"
            }
        }
    ]
}

For deployment, run "Provision in the cloud" first, and then run "Deploy to the cloud" command.

How can I add an new debuggable backend to existing teams app using teams toolkit in VSCode?

1 Answers1