microsoft-teamsteams-toolkit
How can I add an new debuggable backend to existing teams app using teams toolkit in VSCode?
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.jsonandtasks.jsonin 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
Solution
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.
- Distinguish between two maximum values in a column with Power Query
- Power Query Conditional JOIN - JOIN with WHERE clause
- Calculate combinations for a range of text values in excel
- How to update a column's values in Power BI M Language
- What's the difference between DAX and Power Query (or M)?
- Sorting issue when consolidating monthly data into a year to date file. Using query, sorting by day, time, and letter
- Power Query `List.Generate` runs too slow
- Custom Colum based on specific dates in powerquery
- How do I properly use table.group in a PowerQuery query to dynamically summarize different rows and columns?
- Excel Power Query syntax issue transform multiple columns of records
- How to capitalize only first letter of a sentence
- Power Query Import For Power BI with group by on SelectRows
- Get data from config table cell when loading data source with power query
- Translate Excel Formula into Power Query
- Counting matching pairs of letters in lists of bigrams in Power Query M
- Bigrams of a string in Power Query M
- Power Query code to refer to another query (and how buffering works)
- M code for the equivalent of of Left (string, len(string)-11)
- How to add a missing column to the Transform Sample File
- How to add or insert ' (single quotes) for every string in a list in which strings are separated by commas in Power Query
- Power BI M code Split column from Lowercase to Uppercase won't include diacritics (accents)
- M Code(Power Query) to Remove Empty columns that runs fast
- How to find the value with date closest to another date
- Error when build AOSP 14 - internal error: undefined variable CTS_TEST_SUITES_DEFAULT
- Call a table using a dynamic identifier
- Problem getting the value from a cell using M in excel
- How to rename columns based on the data within them in Power Query M?
- Power Query return a field name based on parameter
- Power Query: after combining 2 tables got something strange
- Token Literal Expected Error in Power Query M Code using try and List.MatchesAny