+After you're ready to deploy your code, you can use [Teams Toolkit](../toolkit/provision.md#provision-using-teams-toolkit-in-visual-studio-code) or the [Teams Developer Portal](https://dev.teams.microsoft.com/apps) to provision and upload your app's zip file.

+> [!VIDEO https://www.microsoft.com/en-us/videoplayer/embed/RE4NzEs]

+description: In this article you'll, learn how to extend a Teams personal tab app across Microsoft 365 by updating personal tab to run in both outlook and office.

+Alternately, you can use a basic single sign-on *hello world* app already enabled Microsoft 365 in the following quickstart section and then skip to [Sideload your app in Teams](#sideload-your-app-in-teams) .

+1. On the side bar, select **More Apps**. Your sideloaded app title appears among your installed apps.

+1. Select the **Apps** icon on the side bar. Your sideloaded app title appears among your installed apps.

+Currently, a subset of Teams application types and capabilities is supported in Outlook and Office clients. This support expands over time.

+Upon first run of local debug to Office or Outlook, you'll be prompted to sign in to your Microsoft 365 tenant account and install a self-signed test certificate. You'll also be prompted to manually install Teams. Select **Install in Teams** to open a browser window and manually install your app. Then select **Continue** to proceed to debug your app in Office/Outlook.

+| Sample Launch Page (Microsoft 365) | Demonstrates SSO authentication and TeamsJS SDK capabilities as available in different hosts. Works in Teams, Outlook, Office. | [View](https://github.com/OfficeDev/microsoft-teams-library-js/tree/main/apps/sample-app) |

+With the latest releases of [Microsoft Teams JavaScript client SDK](../tabs/how-to/using-teams-client-sdk.md) (version 2.0.0 and later), [Teams App manifest](../resources/schem), you can build and update Teams apps to run in other high-usage Microsoft 365 products and publish them to the Microsoft commercial marketplace ([the Microsoft commercial marketplace](https://appsource.microsoft.com/)).

+| [**Tabs**](../tabs/what-are-tabs.md) (personal scope) |`staticTabs` | Web, Desktop, Mobile | Web (Targeted Release), Desktop (Beta Channel) | Web (Targeted Release), Desktop (Beta Channel)| Channel and group scope not yet supported for Microsoft 365. See [notes](../tabs/how-to/using-teams-client-sdk.md#microsoft-365-support-running-teams-apps-in-office-and-outlook).

+## Microsoft commercial marketplace submission

+Join the growing number of production Teams apps in the [Microsoft commercial marketplace](https://appsource.microsoft.com/) (Microsoft AppSource) store with expanded support for Outlook and Office preview (Targeted Release) audiences. The app [submission process for Teams apps enabled for Outlook and Office](../concepts/deploy-and-publish/appsource/publish.md) is the same as for traditional Teams apps. The only difference is you'll use Teams app manifest [version 1.13](../tabs/how-to/using-teams-client-sdk.md) in your app package, which introduces support for Teams apps that run across Microsoft 365.

+description: In this module, learn about search command invoke locations and how to create a search command for messaging extensions.

+ When a search command is invoked from the compose message area, the user sends the results to the conversation. When it's invoked from the command box, the user interacts with the resulting card, or copies it for use elsewhere.

+ :::image type="content" source="../../../assets/images/tdp/bot-page.png" alt-text="Screenshot shows the options to configure a bot for an app in Teams Developer Portal.":::

+1. Select **Add a command** in the **Command** section to include the commands, which decide the behavior of message extension.

+ :::image type="content" source="../../../assets/images/tdp/add-a-command.PNG" alt-text="Screenshot shows how to add a command in Teams Developer Portal to define the behavior of the message extension.":::

+ :::image type="content" source="../../../assets/images/tdp/add-a-command-parameter.PNG" alt-text="Screenshot shows how to add a parameter to define your command in Teams Developer Portal for a message extension.":::

+ :::image type="content" source="../../../assets/images/tdp/add-domain.PNG" alt-text="Screenshot shows how to add a valid domain to your messaging extension for link unfurling.":::

+ :::image type="content" source="../../../assets/images/tdp/edit-parameters.PNG" alt-text="Screenshots shows how to edit parameters for your message extension.":::

+| `parameter.name` | This property describes the name of the parameter. The `parameter.name` is sent to your service in the user request. | Yes | 1.0 |

+| `parameters.value` | Initial value for the parameter. Currently the value isn't supported | No | 1.5 |

+ Title: Universal actions for search based message extensions

+description: In this article, learn about Universal Actions and automatic refresh for adaptive cards in search based message extensions.

+ms.localizationpriority: medium

+# Universal Actions for search based message extensions

+Adaptive Cards in search based message extensions now support Universal Actions. To enable Universal Actions for search based message extensions, the app must conform to the [schema for Universal Actions for Adaptive Cards](../../../task-modules-and-cards/cards/Universal-actions-for-adaptive-cards/Work-with-Universal-Actions-for-Adaptive-Cards.md#schema-for-universal-actions-for-adaptive-cards) along with the following requirements:

+1. The app must have a conversation bot defined in the app manifest.

+1. If you already have a conversational bot, you must use the same bot that is used in your message extension.

+1. If the card is sent in a group, the app must specify `team` or `groupchat` scope on their bot in the manifest.

+Example of a JSON schema with `team` and `groupchat` values:

+```json

+{

+ "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.11/MicrosoftTeams.schema.json",

+ "manifestVersion": "1.11",

+ "version": "1.0.0",

+ "id": "%MICROSOFT-APP-ID%",

+ "packageName": "com.example.myapp",

+ "bots": [

+ {

+ "botId": "%MICROSOFT-APP-ID-REGISTERED-WITH-BOT-FRAMEWORK%",

+ "scopes": [

+ "team",

+ "personal",

+ "groupchat"

+ ]

+ }

+ ],

+ "composeExtensions": [

+ {

+ "canUpdateConfiguration": true,

+ "botId": "%MICROSOFT-APP-ID-REGISTERED-WITH-BOT-FRAMEWORK%", // Use the same bot as what is specified in the bots section above

+ }

+ ]

+}

+```

+## Automatic refresh for Adaptive Cards in search based message extensions

+Enable automatic refresh for Adaptive Cards in search based message extensions to ensure users always see the latest information. To enable, define `userIds` array either in `29:<ID>` or `8:orgid:<AAD ID>` format in the `refresh` property. For more information, see [work with Universal Actions for Adaptive Cards](../../../task-modules-and-cards/cards/Universal-actions-for-adaptive-cards/Work-with-Universal-Actions-for-Adaptive-Cards.md#user-ids-in-refresh).

+Example of `userIds` array in the `refresh` property:

+```json

+ {

+ "type": "AdaptiveCard",

+ "refresh": {

+ "userIds": [

+ "8:orgid:<AADID>",

+ "29:<id>"

+ ],

+ "action": {

+ "type": "Action.Execute",

+ "data": {}

+ }

+ },

+ "body": [

+ {

+ "type": "TextBlock",

+ "text": "Hello World!",

+ "wrap": true

+ }

+ ],

+ "actions": [

+ {

+ "type": "Action.Execute",

+ "data": {},

+ "title": "Hello"

+ }

+ ]

+ }

+```

+> [!NOTE]

+> Automatic refresh is enabled for all users in the group chat or channel with *less than or equal to* 60 users. For conversations (group chat or channel) with more than 60 users, users can use the refresh button in the message options menu to get the latest result.

+Example of `Action.Execute` in the `refresh` property:

+```json

+ {

+ "type": "AdaptiveCard",

+ "refresh": {

+ "action": {

+ "type": "Action.Execute",

+ "data": {}

+ }

+ },

+ "body": [

+ {

+ "type": "TextBlock",

+ "text": "Hello World!",

+ "wrap": true

+ }

+ ],

+ "actions": [

+ {

+ "type": "Action.Execute",

+ "data": {},

+ "title": "Hello"

+ }

+ ]

+ }

+```

+## Just-in-time install

+Just-in-time (JIT) allows you to install a card or message extension for multiple users in a group chat or channel. In order to support Universal Actions in search based message extensions, your bot is added to the conversation where the card (with `Action.Execute`) is sent by the user.

+When a user selects a card and sends it in a group chat or channel, a **JIT** installation prompt appears. After the user selects the **send** option, the app is added for all the users in the chat or channel in the background.

+> [!NOTE]

+> For apps that donΓÇÖt have `Action.Execute` and `refresh` schema defined, the install prompt isn't shown to the users.

+Example of a dynamic ME and JIT install user flow:

+ :::image type="content" source="../../../assets/videos/dynamic-me-jit-flow.gif" alt-text="GIF shows the user flow for a dynamic message extension and JIT install.":::

+## See also

+* [Message extensions](../../what-are-messaging-extensions.md)

+* [Universal Actions for Adaptive Cards](../../../task-modules-and-cards/cards/Universal-actions-for-adaptive-cards/Overview.md)

+* [Universal Actions for search based messaging extensions](how-to/search-commands/universal-actions-for-search-based-message-extensions.md)

+ To handle incremental consent for tab app, see [incremental and dynamic user consent](/azure/active-directory/develop/v2-permissions-and-consent).

+5. After the app user has granted more permissions, retry the OBO flow to get access to these other APIs.

+| NA | `app.Context.app.host.name`|

+* [Universal Actions for search based messaging extensions](../../../messaging-extensions/how-to/search-commands/universal-actions-for-search-based-message-extensions.md)

+6. Now you can run provision command on `dev` and `staging` environment to update the app name in remote environments. To run provision command with Teams Toolkit, see [provision](provision.md#provision-using-teams-toolkit-in-visual-studio-code).

+zone_pivot_groups: teams-app-platform

+The Teams app manifest describes how your app integrates into the Microsoft Teams product.

+## Customize Teams app manifest for Visual Studio Code

+* [Sync local changes to Developer Portal](#sync-local-changes-to-developer-portal)

+## Sync local changes to Developer Portal

+After previewing the manifest file, you can sync your local changes to Developer Portal by the following ways:

+> For more information on Developer Portal, see [Developer Portal for Teams](../concepts/build-and-test/teams-developer-portal.md).

+## Edit Teams app manifest using Visual Studio

+Teams Toolkit in Visual Studio loads manifest from `manifest.template.json` with configurations from `state.{env}.json` and `config.{env}.json` while provisioning and preparing app dependencies. You can also create Microsoft Teams app in [Developer Portal](https://dev.teams.microsoft.com/apps) with the manifest.

+After scaffolding, in the manifest template file under `templates/appPackage` folder,

+`manifest.template.json` is shared between local and remote environment.

+In the manifest template, select **Project** > **Teams Toolkit** > **Open Manifest File**.

+### Customize app manifest in Teams Toolkit

+There are two types of placeholders in `manifest.template.json`:

+* `{{state.xx}}` is pre-defined placeholder, whose value is resolved by Teams Toolkit, defined in `state.{env}.json`. It's recommended to not modify the values in `state.{env}.json`.

+* `{{config.manifest.xx}}` is customized placeholder, whose value is resolved from `config.{env}.json`.

+You can add a customized parameter by:

+* Adding a placeholder in `manifest.template.json` with pattern: `{{config.manifest.xx}}`.

+* Adding a config value in `config.{env}.json`.

+ ```

+ {

+ "manifest": {

+ "KEY": "VALUE"

+ }

+ }

+ ```

+### Preview app manifest in Teams Toolkit

+You can preview values in app manifest in two ways:

+* When you hover over the placeholder in `manifest.template.json`, then you can see the values for **dev** and **local** environment.

+ :::image type="content" source="../assets/images/Tools-and-SDK-revamp/edit-manifest-for-visual-studio/vs-hover-placeholder1.png" alt-text="Hover over placeholder" lightbox="../assets/images/Tools-and-SDK-revamp/edit-manifest-for-visual-studio/vs-hover-placeholder1.png":::

+* You can also hover over the key besides each placeholder in `manifest.template.json`, and you can see the same values for **dev** and **local** environment.

+ :::image type="content" source="../assets/images/Tools-and-SDK-revamp/edit-manifest-for-visual-studio/vs-hover-key-placeholder.png" alt-text="Hover over key beside placeholder" lightbox="../assets/images/Tools-and-SDK-revamp/edit-manifest-for-visual-studio/vs-hover-key-placeholder.png":::

+ > [!NOTE]

+ > If the environment has not been provisioned, or the Teams app dependencies have not been prepared, it indicates that the values for placeholder have not been generated. Please follow the guidance inside hover to generate corresponding values.

+### Preview manifest file

+To preview the manifest file, you can sideload for local or deploy for Azure. You can preview the manifest file by performing the following step:

+* Select **Project** > **Teams Toolkit** and trigger **Prepare Teams App Dependencies** or **Provision in the Cloud** that generates configuration for local or remote Teams app.

+ :::image type="content" source="../assets/images/Tools-and-SDK-revamp/edit-manifest-for-visual-studio/vs-preview-manifest1.png" alt-text="Preview manifest file" lightbox="../assets/images/Tools-and-SDK-revamp/edit-manifest-for-visual-studio/vs-preview-manifest1.png":::

+There are two other ways to upload zip app package before you can preview manifest file:

+1. From the list of menu select **Project** > **Teams Toolkit** > **Zip App Package**, and select **For Local** or **For Azure**.

+ :::image type="content" source="../assets/images/Tools-and-SDK-revamp/edit-manifest-for-visual-studio/vs-zip1.png" alt-text="Zip app package" lightbox="../assets/images/Tools-and-SDK-revamp/edit-manifest-for-visual-studio/vs-zip1.png":::

+1. You can also upload zip app package from Solution Explorer, if you right-click on **MyTeamsApp1** and then select **Teams Toolkit** > **Zip App Package** > **For Local** or **For Azure**.

+ > [!NOTE]

+ > In this scenario the project name is **MyTeamsApp1**.

+ :::image type="content" source="../assets/images/Tools-and-SDK-revamp/edit-manifest-for-visual-studio/vs-solution-explorer1.png" alt-text="List of Teams Toolkit menus from solution explorer" lightbox="../assets/images/Tools-and-SDK-revamp/edit-manifest-for-visual-studio/vs-solution-explorer1.png":::

+Teams Toolkit generates the zip app package, and to preview manifest file content you can follow the step below:

+* Right-click on **manifest.template.json** under **appPackage** folder, select **Preview Manifest File** > **For Local** or **For Azure**.

+ :::image type="content" source="../assets/images/Tools-and-SDK-revamp/edit-manifest-for-visual-studio/vs-preview1.png" alt-text="Preview context menu" lightbox="../assets/images/Tools-and-SDK-revamp/edit-manifest-for-visual-studio/vs-preview1.png":::

+This displays the preview of the manifest file in Visual Studio.

+### Sync local changes to Developer Portal

+After you've previewed the manifest file in Visual Studio, you can now sync the local changes to the Developer Portal. Select **Project** > **Teams Toolkit** > **Update Manifest in Teams Developer Portal**, or context menu from Solution Explorer. You can now preview the manifest file in Developer Portal as a result of syncing the local changes.

+> [!NOTE]

+> The changes are updated to Teams Developer Portal. If you have some manual updates in Developer Portal, that can be overwritten. In the **Warning** dialog box you can select **Overwrite and update** or **Cancel**.

+* [Provision cloud resources using Visual Studio](provision-cloud-resources.md)

+* [Deploy Teams app to the cloud using Visual Studio](deploy-teams-app.md)

+# Add capabilities to Teams apps

+Adding capabilities with Teams Toolkit helps you to include additional features to your existing Microsoft Teams app. The advantage of adding more capabilities is that you can add more functions to your app by automatically adding source codes using Teams Toolkit. You can also choose different capabilities based on project you've created in your Teams app. The following table lists the Teams app capabilities:

+* [Prerequisites for creating your Teams app](tools-prerequisites.md)

+# Prepare to build apps using Teams Toolkit

+zone_pivot_groups: teams-app-platform

+In this section, you can learn how to create new Teams project using Visual Studio Code and Visual Studio.

+## Create a new Teams project for Visual Studio Code

+## Create new Teams app in Visual Studio

+Teams Toolkit provides Microsoft Teams app templates in Visual Studio to create Teams app. You can search and select Teams app template that you require when you create a new project. You can have Teams app templates for creating:

+* Tab app

+* Command bot

+* Notification bot

+* Message Extension app

+## Prerequisites

+| &nbsp; | Install | For using... |

+| | | |

+| &nbsp; | **Required** | &nbsp; |

+| &nbsp; | Visual Studio version 17.3 | You can install the enterprise edition of Visual Studio, and install the "ASP.NET "workload and Microsoft Teams Development Tools. |

+| &nbsp; | Teams Toolkit | A Visual Studio extension that creates a project scaffolding for your app. Use latest version. |

+| &nbsp; | [Microsoft Teams](https://www.microsoft.com/microsoft-teams/download-app) | Microsoft Teams to collaborate with everyone you work with through apps for chat, meetings, call - all in one place. |

+ | &nbsp; | [Prepare your Microsoft 365 tenant](../concepts/build-and-test/prepare-your-o365-tenant.md) | Access to Teams account with the appropriate permissions to install an app. |

+## Create a new Teams app

+The steps to create a new Teams app is similar for all types of app except notification bot. The following steps help you to create a new tab app:

+1. Open Visual Studio.

+1. Create new project by using one of the following two options.

+ :::image type="content" source="../assets/images/Tools-and-SDK-revamp/Create-new-app-VS/vs-create-new-project1_1.png" alt-text="Create new project with code from get started":::

+ * Select **Create a new project** under **Get started** helps you to choose the project template with code scaffolding.

+ * Select **Continue without Code** to create project without code scaffolding and select **File** > **New** > **Project** in Visual Studio.

+ :::image type="content" source="../assets/images/Tools-and-SDK-revamp/Create-new-app-VS/vs-create-new-project2_1.png" alt-text="Create new project from file menu":::

+ The **Create a new project** window appears.

+1. Enter teams in the search box and from the list, select **Microsoft Teams App** and then select **Next**.

+ :::image type="content" source="../assets/images/Tools-and-SDK-revamp/Create-new-app-VS/visual-studio.png" alt-text="Search and choose microsoft teams app":::

+ The **Configure your new project** window appears.

+ :::image type="content" source="../assets/images/Tools-and-SDK-revamp/Create-new-app-VS/vs-ms-teams-app-project-name_1.png" alt-text="Name your application":::

+ 1. Enter a suitable name for your project.

+ > [!NOTE]

+ > The project name you are entering is automatically filled in the **Solution name** also. If you want, you can change the solution name with no affect on project name.

+ 1. Select the folder path where you want to create the project workspace.

+ 1. Enter a different solution name, if you want.

+ 1. Check the option to save the project and solution in the same folder, if you want. For this tutorial, you don't need this option.

+ 1. Select **Create**.

+ The **Create a new Teams Application** window appears.

+1. In this tutorial, **Tab** is selected to create new teams application and select **Create**.

+ :::image type="content" source="../assets/images/Tools-and-SDK-revamp/Create-new-app-VS/vs-ms-teams-app-type_3.png" alt-text="Select the teams app type":::

+ > [!NOTE]

+ > You can select required type of Teams app for your project.

+ The **Getting Started** with **Welcome to Teams Toolkit** window appears.

+ :::image type="content" source="../assets/images/Tools-and-SDK-revamp/Create-new-app-VS/vs-getting-started-page.png" alt-text="Select the Getting Started teams toolkit":::

+### Directory Structure

+Teams Toolkit provides all components for building an app. After creating the project, you can view the project folders and files under Explorer.

+* **Directory structure for basic Teams app**

+ :::image type="content" source="../assets/images/Tools-and-SDK-revamp/Create-new-app-VS/vs-create-new-project-solution-explorer_1.png" alt-text="Select the tab Solution Explorer teams toolkit":::

+* **Directory structure for scenario based Teams app**

+ :::image type="content" source="../assets/images/Tools-and-SDK-revamp/Create-new-app-VS/vs-create-new-project-solution-explorer.png" alt-text="Select the Solution Explorer teams toolkit":::

+## Teams app templates in Teams Toolkit for Visual Studio

+You can see Teams app templates already populated in Teams Toolkit for various Teams app type. The following table lists all the templates available:

+|Teams app template |Description |

+|||

+|Notification Bot |Notification Bot app can send notification to your Teams client, there are multiple ways to trigger the notification. For example, trigger the notification by HTTP request, or by time. You can also select triggered notification based on your business scenario. |

+|Command Bot |Users can type a command to interact with the bot using the Command Bot app. |

+|Tab |Tab app shows a webpage inside Teams, and it enables single sign-on using Teams account. |

+|Message Extension |Message Extension app implements simple features like create adaptive card, search Nugget packages, unfurling links for "dev.botframework.com" domain. |

+> [!NOTE]

+> After the project is created, Teams Toolkit automatically opens **Get started** window. You can now see the instructions in **Get started** window and check out the different features in Teams Toolkit.

+* [Provision cloud resources using Visual Studio](provision-cloud-resources.md)

+* [Deploy Teams app to the cloud using Visual Studio](deploy-teams-app.md)

+zone_pivot_groups: teams-app-platform

+# Debug your Teams app locally

+Teams Toolkit helps you to debug and preview your Microsoft Teams app locally. During the debug process, Teams Toolkit automatically starts app services, launches debuggers, and side-loads the Teams app. You can preview your Teams app in Teams web client locally after debugging.

+## Debug your Teams app locally for Visual Studio Code

+Teams Toolkit helps you to debug and preview your Teams app locally. During the debug process, Teams Toolkit automatically starts app services, launches debuggers, and side-loads the Teams app. You can preview your Teams app in Teams web client locally after debugging.

+## Debug your Microsoft Teams app locally for Visual Studio Code

+Teams Toolkit in Visual Studio Code gives you the features to automate debugging of your Teams app locally. Visual Studio allows you to debug tab, bot, and message extension. You need to set up Teams Toolkit before you debug your app.

+## Debug your Microsoft Teams app locally using Visual Studio

+Teams Toolkit helps you to debug and preview your Microsoft Teams app locally. Visual Studio allows you to debug tab, bot, and message extension. You can debug your app locally in Visual Studio using Teams Toolkit by performing:

+### Set up ngrok (Only for Bot and Message Extension app)

+Use a command prompt to run this command:

+```

+ngrok http 5130

+```

+### Set up your Teams Toolkit

+Perform the following steps using the Teams Toolkit to debug your app after you create a project:

+1. Right-click on your **project**.

+1. Select **Teams Toolkit** > **Prepare Teams App Dependencies**.

+ :::image type="content" source="../assets/images/debug-teams-app/vs-localdebug-teamsappdependencies.png" alt-text="Teams app dependencies for local debug" lightbox="../assets/images/debug-teams-app/vs-localdebug-teamsappdependencies.png":::

+ > [!NOTE]

+ > In this scenario the project name is MyTeamsApp1

+ Your Microsoft 365 account needs to have the side loading permission before you sign in. Ensure your Teams app can be uploaded to the tenant, otherwise your Teams app can fail to run in Teams Client.

+1. Sign in to your **Microsoft 365 Account**, then select **Continue**

+ :::image type="content" source="../assets/images/debug-teams-app/vs-localdebug-signin-m365.png" alt-text="Sign in to Microsoft 365 account":::

+ > [!Note]

+ > Learn more about sideloading permission by visiting <https://aka.ms/teamsfx-sideloading-option>.

+1. Select **Debug** > **Start Debugging**, or directly select **F5**.

+ :::image type="content" source="../assets/images/debug-teams-app/vs-localdebug-Startdebug.png" alt-text="Start Debugging":::

+ Visual Studio launches the Teams app inside Microsoft Teams client in your browser.

+ > [!Note]

+ > Learn more by visiting <https://aka.ms/teamsfx-vs-debug>.

+1. After Microsoft Teams is loaded, select **Add** to install your app in Teams.

+ :::image type="content" source="../assets/images/debug-teams-app/vs-localdebug-add-loadapp.png" alt-text="Select add to load app":::

+ > [!TIP]

+ > You can also use hot reload function of Visual Studio during debug. Learn more by visiting <https://aka.ms/teamsfx-vs-hotreload>.

+ > [!NOTE]

+ > Ensure to post HTTP request to '<http://localhost:5130/api/notification>' to trigger notification, when you're debugging Notification Bot app. If you've selected HTTP trigger when creating the project, you can use any API tools such as curl (Windows Command Prompt), Postman, and so on.

+ > [!TIP]

+ > If you make any changes to Teams app manifest file (/templates/appPackage/manifest.template.json), ensure that you perform the Prepare Teams App Dependencies command. Before you try to run the Teams app again locally.

+* [Provision cloud resources using Visual Studio](provision-cloud-resources.md)

+* [Deploy Teams app to the cloud using Visual Studio](deploy-teams-app.md)

+* [Edit Teams app manifest using Visual Studio](VS-TeamsFx-preview-and-customize-app-manifest.md)

+zone_pivot_groups: teams-app-platform

+# Debug your Teams app

+Teams Toolkit helps you to debug and preview your Microsoft Teams app. Debug is the process of checking, detecting, and correcting issues or bugs to ensure the program runs successfully in Teams.

+## Debug your Teams app for Visual Studio Code

+Teams Toolkit in Microsoft Visual Studio Code automates the debug process. You can detect errors and fix them as well as preview the teams app. You can also customize debug settings to create your tab or bot.

+Teams Toolkit helps you to debug and preview your Teams app. Debug is the process of checking, detecting, and correcting issues or bugs to ensure the program runs successfully in Teams.

+## Debug your Microsoft Teams app for Visual Studio Code

+Teams Toolkit in Visual Studio Code automates the debug process. You can detect errors and fix them as well as preview the teams app. You can also customize debug settings to create your tab or bot.

+## Debug your Microsoft Teams app using Visual Studio

+Teams Toolkit automates app startup services, initiates debug, and side loads Teams app. After debug, you can preview the Teams app in Teams web client. You can also customize debug settings to use your bot endpoints, or environment variables to load your configured app. Visual Studio allows you to debug tab, bot, and message extension. During the debug process, Teams Toolkit supports the following debug features:

+* Prepare Teams app dependencies

+* Start debugging

+* Toggle breakpoints

+* Hot reload

+* Stop debugging

+## Prerequisites

+| &nbsp; | Install | For using... |

+| | | |

+| &nbsp; | **Required** | &nbsp; |

+| &nbsp; | Visual Studio 2022 version 17.3 | You can install the enterprise edition of Visual Studio, and install the "ASP.NET "workload and Microsoft Teams Development Tools. |

+| &nbsp; | Teams Toolkit | A Visual Studio extension that creates a project scaffolding for your app. Use latest version. |

+| &nbsp; | [Microsoft Teams](https://www.microsoft.com/microsoft-teams/download-app) | Microsoft Teams to collaborate with everyone you work with through apps for chat, meetings, call - all in one place. |

+| &nbsp; | [Prepare your Microsoft 365 tenant](../concepts/build-and-test/prepare-your-o365-tenant.md) | Access to Teams account with the appropriate permissions to install an app. |

+| &nbsp; | [Microsoft 365 developer account](/../concepts/build-and-test/prepare-your-o365-tenant) | Access to Teams account with the appropriate permissions to install an app. |

+| &nbsp; | Azure Tools and [Microsoft Azure CLI](/cli/azure/install-azure-cli) | Azure tools to access stored data or to deploy a cloud-based backend for your Teams app in Azure. |

+|&nbsp; | **Optional** | &nbsp; |

+|&nbsp; |[Ngrok](https://ngrok.com/) | Ngrok is used to forward external messages from Azure Bot Framework to your local machine.|

+## Key features of Teams Toolkit

+You can see the following key features of Teams Toolkit, that automate the local debugging process of your Teams app:

+### Prepare Teams app dependencies

+Teams Toolkit prepares local debug dependencies and registers your Teams app in the tenant in your account. For Bot and Message Extension apps, Teams Toolkit will register and configure bot.

+### Start debugging

+You can perform debugging with a single operation, press **F5** to start debugging. Teams Toolkit builds code, starts services, and the launches app in your browser.

+### Toggle breakpoints

+You can toggle breakpoints in the source codes of tabs, bots, message extensions, and Azure functions. The breakpoints execute when you interact with the Teams app in your web browser.

+The following image shows the toggle breakpoints:

+### Hot reload

+Select **Hot Reload** to apply your changes in your Teams app when you want to update and save the source codes simultaneously during debugging.

+Select the option **Hot Reload on File Save** from the drop-down to enable auto hot reload.

+

+ > [!Tip]

+ > To learn more about Hot Reload function of Visual Studio during debug you can visit <https://aka.ms/teamsfx-vs-hotreload>.

+### Stop debugging

+Select **Stop Debugging** when the local debug is complete.

+## Customize debug settings

+You can customize debug setting for your Teams app to use your bot endpoints and add environment variables:

+### Use your bot endpoint

+You can set siteEndpoint configuration in **.fx/configs/config.local.json** to your endpoint.

+```

+"bot": {

+ "siteEndpoint": "https://baidu.com"

+}

+```

+### Add environment variables

+You can add **environmentVariables** to **launchSettings.json** file.

+### Launch Teams app as a web app

+You can launch Teams app as a web app instead of running in Teams client.

+1. Select **Properties** > **launchSettings.json** in Solution Explorer panel under your project.

+1. Remove the **'launchUrl'** from the file.

+ :::image type="content" source="../assets/images/debug-teams-app/vs-localdebug-launch-teamsapp-webapp.png" alt-text="Launch teams as a web app by removing launchurl" lightbox="../assets/images/debug-teams-app/vs-localdebug-launch-teamsapp-webapp.png":::

+1. Right-click on **Solution** and select **Properties**.

+ :::image type="content" source="../assets/images/debug-teams-app/vs-localdebug-solution-properties.png" alt-text="Right click solution and select properties" lightbox="../assets/images/debug-teams-app/vs-localdebug-solution-properties.png":::

+1. Select **Configuration Properties** > **Configuration** in the dialog box.

+1. Clear the **Deploy** checkbox.

+1. Select **OK**.

+ :::image type="content" source="../assets/images/debug-teams-app/vs-localdebug-disable-deploy.png" alt-text="Uncheck deploy in configuration properties" lightbox="../assets/images/debug-teams-app/vs-localdebug-disable-deploy.png":::

+* [Provision cloud resources using Visual Studio](provision-cloud-resources.md)

+* [Deploy Teams app to the cloud using Visual Studio](deploy-teams-app.md)

+* [Edit Teams app manifest using Visual Studio](VS-TeamsFx-preview-and-customize-app-manifest.md)

+zone_pivot_groups: teams-app-platform

+Teams Toolkit helps you to deploy or upload the frontend and backend code in your application to your provisioned cloud resources in Azure.

+## Deploy Teams app to the cloud using Visual Studio Code

+You can deploy the following to the cloud:

+## Deploy Teams app to the cloud using Visual Studio

+The following apps can be deployed in Visual Studio:

+* The tab app, such as frontend applications are deployed to Azure storage, configured for static web hosting.

+* The notification bot app with Azure function triggers can be deployed to Azure functions.

+* The bot app or message extension can be deployed to Azure app services.

+After deploying, you can preview the app in Teams client or the web browser before you can start using.

+## Deploy Teams app using Teams Toolkit

+1. Open Visual Studio.

+1. Select **Create a new project** or open an existing project from the list.

+1. Right-click on your project **MyTeamsApp1** > **Teams Toolkit** > **Deploy to the cloud**.

+ :::image type="content" source="../assets/images/deploy-teams-app-cloud-vs/vs-deploy-cloud.png" alt-text="deploy to cloud":::

+ > [!NOTE]

+ > In this scenario the project name is MyTeamsApp1.

+1. Select **Deploy** in the confirmation dialog.

+ :::image type="content" source="../assets/images/deploy-teams-app-cloud-vs/vs-deploy-confirmation.png" alt-text="Deploy to cloud confirmation dialog":::

+ After the deploy process is completed, you can see a pop-up with the confirmation that it has been successfully deployed. You can also check the status in the output window.

+ :::image type="content" source="../assets/images/deploy-teams-app-cloud-vs/VS-deploy-popup.png" alt-text="deploy to cloud popup":::

+### Preview your app

+To preview your app, you first need to create a Zip app package and sideload into the Teams client.

+1. Select **Project** > **Teams Toolkit** > **Zip App Package**.

+1. Select option **For Local** or **For Azure** to generate Teams app package.

+ :::image type="content" source="../assets/images/deploy-teams-app-cloud-vs/vs-deploy-ZipApp-package1.png" alt-text="Generate teams app package":::

+**To preview your app in Teams client**

+1. Select **Project** > **Teams Toolkit** > **Preview in Teams**.

+ :::image type="content" source="../assets/images/deploy-teams-app-cloud-vs/vs-deploy-preview-teams2.png" alt-text="Preview Teams app in teams client":::

+ Now your app is sideloaded into Teams.

+ :::image type="content" source="../assets/images/deploy-teams-app-cloud-vs/sideload-teams.png" alt-text="Sideload Teams app in teams client":::

+The other way to preview your app:

+1. Right-click on your project **MyTeamsApp1** under **Solution Explorer**.

+1. Select **Teams Toolkit** > **Preview in Teams** to launch the Teams app in web browser.

+ :::image type="content" source="../assets/images/deploy-teams-app-cloud-vs/vs-deploy-preview-teams.png" alt-text="Preview teams app in web browser":::

+ > [!NOTE]

+ > The same menu options are available in Project menu.

+ Now your app is sideloaded into Teams.

+ :::image type="content" source="../assets/images/deploy-teams-app-cloud-vs/sideload-teams.png" alt-text="Sideload Teams app in teams client":::

+* [Create new Teams app in Visual Studio](create-new-teams-app-for-Visual-Studio.md)

+* [Provision cloud resources using Visual Studio](provision-cloud-resources.md)

+* [Edit Teams app manifest using Visual Studio](VS-TeamsFx-preview-and-customize-app-manifest.md)

+* [Debug your Teams app locally using Visual Studio](debug-teams-app-visual-studio.md)

+zone_pivot_groups: teams-app-platform

+In this document you can understand different UI elements along with description and basic usage in Teams Toolkit for both Visual Studio Code and Visual Studio.

+## Teams Toolkit for Visual Studio Code basic UI elements

+## Explore Teams Toolkit for Visual Studio

+After you install Teams Toolkit, you can view Teams Toolkit options in two different methods:

+# [Project](#tab/prj)

+You can access Teams Toolkit under **Project**.

+1. Select **Project** > **Teams Toolkit**.

+1. You can now access different Teams Toolkit options.

+ :::image type="content" source="../assets/images/teams-toolkit-overview/teams-toolkit-operations-menu_1.png" alt-text="Teams toolkit operations menu":::

+# [Solution Explorer](#tab/solutionexplorer)

+ You can access Teams Toolkit under **Solution Explorer**.

+1. Select **View** > **Solution Explorer** to view Solution Explorer panel.

+1. Right-click on your **Project**.

+1. Select **Teams Toolkit** to access different Teams Toolkit options.

+ :::image type="content" source="../assets/images/teams-toolkit-overview/teams-toolkit-operations-menu1_1.png" alt-text="Teams toolkit operations from Project":::

+ > [!NOTE]

+ > In this scenario the project name is **MyTeamsApp1**.

+After you have created your Teams Project, you can perform the following functions on Teams Toolkit for Visual Studio:

+|Function |Description |

+|||

+|Prepare Teams App Dependencies |Before you do a local debug perform this step, it helps you to set up the local debug dependencies and register Teams app in Teams platform. You need a Microsoft 365 account. For more information, see [Debug your Teams app locally using Visual Studio](debug-teams-app-visual-studio.md) |

+|Open Manifest File |To open Teams manifest file, you can hover over the parameters to preview the values. For more information, see [Edit Teams app manifest using Visual Studio](VS-TeamsFx-preview-and-customize-app-manifest.md) |

+|Update Manifest in Teams Developer Portal |When you update the manifest file, only then you can redeploy the manifest file to Azure without deploying the whole project again. Use this command to update your changes to remote. For more information, see [Edit Teams app manifest using Visual Studio](VS-TeamsFx-preview-and-customize-app-manifest.md) |

+|Provision to the Cloud |This option helps you to create Azure resources that host your Teams app. For more information, see [Provision cloud resources using Visual Studio](provision-cloud-resources.md) |

+|Deploy to the Cloud |This option helps you to copy your code to the Azure resources created when you did ΓÇ£Provision to the CloudΓÇ¥. For more information, see [Deploy Teams app to the cloud using Visual Studio](deploy-teams-app.md) |

+|Preview in Teams |This option launches the Teams web client and lets you preview Teams app in their browser. |

+|Zip App Package |This option generates a Teams app package in the `Build` folder under the project. You can upload the package to Teams client and run the Teams app. |

+* [Create new Teams app in Visual Studio](create-new-teams-app-for-Visual-Studio.md)

+* [Provision cloud resources using Visual Studio](provision-cloud-resources.md)

+* [Deploy Teams app to the cloud using Visual Studio](deploy-teams-app.md)

+# FAQ for Teams Toolkit

+zone_pivot_groups: teams-app-platform

+Teams Toolkit is an extension in both Visual Studio and Visual Studio Code. In this document you can learn, how to install Teams Toolkit.

+## Install Teams Toolkit for Visual Studio Code

+Before you start with installation, you need to have Visual Studio Code and Teams client installed.

+## Install Teams Toolkit for Visual Studio

+Before you start with installation, you need to install Visual Studio Installer.

+You can download the latest Visual Studio Installer from the [Visual Studio download page](https://visualstudio.microsoft.com/vs/preview/).

+## Steps to install Teams Toolkit

+After you open the Visual Studio Installer, in the pop-up Workloads window:

+1. Select the **ASP.NET and web development** workload.

+1. Select the **Microsoft Teams development tools** in **Installation details** panel.

+1. Select **Install**.

+ :::image type="content" source="../assets/images/teams-toolkit-overview/visual-studio-install_1.png" alt-text="Visual studio-installation":::

+1. Select **Launch** to open Visual Studio.

+ :::image type="content" source="../assets/images/teams-toolkit-overview/visual-studio-launch_1.png" alt-text="Launch visual studio":::

+ > [!IMPORTANT]

+ > You're recommended to download Visual Studio 2022 version 17.3.3, since Teams Toolkit for Visual Studio is GA in this version. This article is written for Visual Studio 2022 version 17.3.3. Teams Toolkit version 17.3.* or higher.

+* [Create new Teams app in Visual Studio](create-new-teams-app-for-Visual-Studio.md)

+* [Provision cloud resources using Visual Studio](provision-cloud-resources.md)

+* [Deploy Teams app to the cloud using Visual Studio](deploy-teams-app.md)

+ :::image type="content" source="../assets/images/Tools-and-SDK-revamp/Provision-cloud-resources-in-TTK-VS/teams-toolkit-vs-provision-select-subscription1.png" alt-text="Select resource group":::

+zone_pivot_groups: teams-app-platform

+## Provision using Teams Toolkit in Visual Studio Code

+## Provision using Teams Toolkit in Visual Studio

+The following steps help you to provision cloud resources using Visual Studio:

+### Sign in to your Microsoft 365 account

+1. Open Visual Studio 2022.

+1. Open the Microsoft Teams app project.

+1. Select **Project** > **Teams Toolkit** > **Prepare Teams App Dependencies**.

+ :::image type="content" source="../assets/images/Tools-and-SDK-revamp/Provision-cloud-resources-in-TTK-VS/teams-toolkit-vs-prepare-app-dependencies1.png" alt-text="Prepare teams app dependencies":::

+1. Select **Sign in** to sign in to your Azure account.

+ :::image type="content" source="../assets/images/Tools-and-SDK-revamp/Provision-cloud-resources-in-TTK-VS/teams-toolkit-vs-prepare1.png" alt-text="Sign in to Microsoft 365":::

+ > [!NOTE]

+ > If you are already logged in, your username displays, or you can select the same to switch your account.

+1. Your default web browser opens to let you [sign in](https://developer.microsoft.com/en-us/microsoft-365/dev-program) to the account.

+1. Select **Continue** after you've signed into your account.

+ :::image type="content" source="../assets/images/Tools-and-SDK-revamp/Provision-cloud-resources-in-TTK-VS/teams-toolkit-vs-signin-M365.png" alt-text="Confirm by selecting continue":::

+### Sign in to your Azure account

+1. Open Visual Studio 2022.

+1. Open the Teams App project.

+1. Select **Project** > **Teams Toolkit** > **Provision in the cloud**.

+ :::image type="content" source="../assets/images/Tools-and-SDK-revamp/Provision-cloud-resources-in-TTK-VS/teams-toolkit-vs-provision-in-cloud2.png" alt-text="Sign in to Azure account":::

+1. Select **Sign in...** to sign in to your Azure account.

+ :::image type="content" source="../assets/images/Tools-and-SDK-revamp/Provision-cloud-resources-in-TTK-VS/teams-toolkit-vs-provision-start.png" alt-text="Sign in to your Azure account":::

+ > [!NOTE]

+ > If you're already logged in, your username is displayed, or you have an option to switch account.

+ After sign in to your Azure account using your credentials, the browser closes automatically.

+### To provision cloud resources

+After you open your project in Visual Studio:

+1. Select **Project** > **Teams Toolkit** > **Provision in the cloud**.

+ :::image type="content" source="../assets/images/Tools-and-SDK-revamp/Provision-cloud-resources-in-TTK-VS/teams-toolkit-vs-provision-in-cloud2.png" alt-text="Provision in cloud":::

+ The **Provision** window appears.

+1. Enter the following details to provision your resources.

+ :::image type="content" source="../assets/images/Tools-and-SDK-revamp/Provision-cloud-resources-in-TTK-VS/teams-toolkit-vs-provision-select-subscription1.png" alt-text="Select resource group":::

+ 1. Select your **Subscription name** from the dropdown list.

+ 1. Select your **Resource group** from the dropdown list.

+ 1. Select your **Region** from the dropdown list.

+ > [!NOTE]

+ > You can create new Resource group by selecting **New**.

+ 1. Select **Provision**.

+1. The dialog appears mentioning that charges may be added as per Azure usage. Select **Provision**.

+ :::image type="content" source="../assets/images/Tools-and-SDK-revamp/Provision-cloud-resources-in-TTK-VS/teams-toolkit-vs-provision-warning.png" alt-text="Provision warning":::

+ The provisioning process creates resources in Azure cloud. You can monitor the progress by observing the Teams Toolkit output window.

+1. You're prompted after provisioning is complete. Select **View Provisioned Resources** to view all the resources that were provisioned.

+ :::image type="content" source="../assets/images/Tools-and-SDK-revamp/Provision-cloud-resources-in-TTK-VS/teams-toolkit-vs-provision-provision-success.png" alt-text="View provisioned resources":::

+## Create resources

+When you trigger provision command in Teams Toolkit or TeamsFx CLI, you can create the following resources:

+* Microsoft Azure Active Directory (Azure AD) application under your Microsoft 365 tenant.

+* Teams app registration under your Microsoft 365 tenant's Teams platform.

+* Azure resources under your selected Azure subscription.

+When you create a new project, you also need to create Azure resources. The Azure Resource Manager (ARM) templates defines all the Azure resources and helps you to create required Azure resources during provision.

+The following list shows the resource creation for different types of app and Azure resources:

+<br>

+<details>

+<summary><b>Resource creation for Teams Tab application</b></summary>

+| Resource | Purpose | Description |

+| | | |

+| App service plan | Hosts your web app of tab. | Not applicable |

+| App service | Hosts your Blazor tab app and simple auth server that helps gain access to other services. | Adds user assigned identity to access other Azure resources. |

+| Manage identity | Authenticate Azure service-to-service requests. | Shares across different capabilities and resources. |

+</details>

+<br>

+<details>

+<summary><b>Resource creation for Teams message extension application</b></summary>

+| Resource | Purpose | Description |

+| | | |

+| Azure bot | Registers your app as a bot with the bot framework. | Connects bot to Teams. |

+| App Service plan | Hosts your web bot app. | Not applicable |

+| App Service | Hosts your bot app. | Adds user assigned identity to access other Azure resources. |

+| Manage identity | Authenticate Azure service-to-service requests. | Shares across different capabilities and resources. |

+</details>

+<br>

+<details>

+<summary><b>Resource creation for Teams command bot application</b></summary>

+| Resource | Purpose | Description |

+| | | |

+| Azure bot | Registers your app as a bot with the bot framework. | Connects bot to Teams. |

+| App service plan | Hosts your web bot app. | Not applicable |

+| App service | Hosts your bot app. | Adds user assigned identity to access other Azure resources. |

+| Manage identity | Authenticate Azure service-to-service requests. | Shares across different capabilities and resources. |

+</details>

+<br>

+<details>

+<summary><b>Resource creation for Teams notification bot with HTTP trigger (Web API server) application</b></summary>

+| Resource | Purpose | Description |

+| | | |

+| Azure bot | Registers your app as a bot with the bot framework. | Connects bot to Teams. |

+| App service plan | Hosts your web bot app. | Not applicable |

+| App service | Host your bot app. | Adds user assigned identity to access other Azure resources. |

+| Managed Identity | Authenticate Azure service-to-service requests. | Shares across different capabilities and resources. |

+</details>

+<br>

+<details>

+<summary><b>Resource creation for Teams notification bot with HTTP trigger (Azure function) application</b></summary>

+| Resource | Purpose | Description |

+| | | |

+| Azure bot | Registers your app as a bot with the bot framework. | Connects bot to Teams. |

+| Manage identity | Authenticates Azure service-to-service requests. | Shared across different capabilities and resources. |

+| Storage account | Helps to create function app. | Not applicable |

+| App service plan | Hosts the function bot App. | Not applicable |

+| Function app | Hosts your bot app. | -Adds user assigned identity to access other Azure resources.<br>-Adds Cross-origin resource sharing (CORS) rule to allow requests from your tab app.<br>-Adds authentication setting that only allows requests from your Teams app.<br>-Adds app settings required by TeamsFx SDK. |

+</details>

+<br>

+<details>

+<summary><b>Resource creation for Teams notification bot with timer trigger (Azure function) application</b></summary>

+| Resource | Purpose | Description |

+| | | |

+| Azure bot | Registers your app as a bot with the bot framework. | Connects bot to Teams. |

+| Manage identity | Authenticate Azure service-to-service requests. | Shares across different capabilities and resources. |

+| Storage account | Helps to create function app. | Not applicable. |

+| App service plan | Hosts the function bot app. | Not applicable |

+| Function app | Hosts your bot app. | -Adds user assigned identity to access other Azure resources.<br>-Adds Cross-origin resource sharing (CORS) rule to allow requests from your tab app.<br>-Adds authentication setting that only allows requests from your Teams app.<br>-Adds app settings required by TeamsFx SDK. |

+</details>

+<br>

+<details>

+<summary><b>Resource creation for Teams notification bot with HTTP trigger + timer trigger (Azure function) application</b></summary>

+| Resource | Purpose | Description |

+| | | |

+| Azure bot | Registers your app as a bot with the bot framework. | Connects bot to Teams. |

+| Manage identity | Authenticate Azure service-to-service requests. | Shares across different capabilities and resources. |

+| Storage account | Helps to create function app. | Not applicable |

+| App service plan | Hosts the function bot app. | Not applicable |

+| Function App | Hosts your bot app. | -Adds user assigned identity to access other Azure resources.<br>-Adds Cross-origin resource sharing (CORS) rule to allow requests from your tab app.<br>-Adds authentication setting that only allows requests from your Teams app.<br>-Adds app settings required by TeamsFx SDK. |

+</details>

+<br>

+### Manage your resources

+You can sign in to [Azure portal](https://portal.azure.com/) and manage all resources created by Teams Toolkit.

+* You can select resource group from the existing list or the new resource group that you've created.

+* You can see the details of the resource group you've selected in the overview section of the table of content.

+## Customize resource provision

+Teams Toolkit enables you to use an infrastructure for the code approach to define the Azure resources that you want to provision. You can change the configuration in Teams Toolkit as per your requirement.

+Teams Toolkit uses ARM template to define Azure resources. The ARM template is a set of bicep files that defines the infrastructure and configuration for your project. You can customize Azure resources by modifying the ARM template. For more information, see [bicep document](/azure/azure-resource-manager/bicep).

+Provision with ARM involves changing the following sets of files, parameters and templates:

+* ARM parameter files (`azure.parameters.{your_env_name}.json`) located in `.fx/configs` folder, for passing parameters to templates.

+* ARM template files located in `templates/azure` folder contains following files:

+| File | Function | Allow customization |

+| | | |

+| main.bicep | Provide entry point for Azure resource. provision | Yes |

+| provision.bicep | Create and configure Azure resources. | Yes |

+| config.bicep | Add TeamsFx required configurations to Azure resources. | Yes |

+| provision/xxx.bicep | Create and configure each Azure resource consumed by `provision.bicep`. | Yes |

+| teamsfx/xxx.bicep | Add TeamsFx required configurations to each Azure resource consumed by `config.bicep`.| No |

+> [!NOTE]

+> After you add resources or capabilities to your project, `teamsfx/xxx.bicep` is regenerated. To modify the bicep files, you can use Git to track your changes to `teamsfx/xxx.bicep` files. This doesn't make you lose any changes while adding resources or capabilities to your project.

+The ARM template files use placeholders for parameters. The purpose of the placeholders is to ensure that new resources can be created in the new environment. The actual values are resolved from `.fx/states/state.{env}.json` file.

+### Azure AD application related parameters

+| Parameter name | Default value place holder | Meaning of the place holder | How to customize |

+| | | | |

+| Microsoft 365 ClientId | {{state.fx-resource-aad-app-for-teams.clientId}} | Your app's Azure AD app client ID created during provision. | [Use an existing Azure AD app for your Teams app](#use-an-existing-azure-ad-app-for-your-teams-app) |

+| Microsoft 365 ClientSecret | {{state.fx-resource-aad-app-for-teams.clientSecret}} | Your app's Azure AD app client secret created during provision. | [Use an existing Azure AD app for your Teams app](#use-an-existing-azure-ad-app-for-your-teams-app) |

+| Microsoft 365 TenantId | {{state.fx-resource-aad-app-for-teams.tenantId}} | Tenant ID of your app's Azure AD app. | [Use an existing Azure AD app for your Teams app](#use-an-existing-azure-ad-app-for-your-teams-app) |

+| Microsoft 365 OAuthAuthorityHost | {{state.fx-resource-aad-app-for-teams.oauthHost}} | OAuth authority host of your app's Azure AD app. | [Use an existing Azure AD app for your Teams app](#use-an-existing-azure-ad-app-for-your-teams-app) |

+| botAadAppClientId | {{state.fx-resource-bot.botId}} | Bot's Azure AD app client ID created during provision. | [Use an existing Azure AD app for your bot](#use-an-existing-azure-ad-app-for-your-bot) |

+| botAadAppClientSecret | {{state.fx-resource-bot.botPassword}} | Bot's Azure AD app client secret created during provision. | [Use an existing Azure AD app for your bot](#use-an-existing-azure-ad-app-for-your-bot) |

+### Reference environment variables in parameter files

+When the value is secret, then you don't need to hardcode them in parameter file. The parameter files support referencing the values from environment variables. You can use this syntax `{{$env.YOUR_ENV_VARIABLE_NAME}}` in the parameter values for Teams Toolkit to resolve from current environment variable.

+The following example reads the value of `mySelfHostedDbConnectionString` parameter from environment variable `DB_CONNECTION_STRING`:

+```json

+...

+ "mySelfHostedDbConnectionString": "{{$env.DB_CONNECTION_STRING}}"

+...

+```

+### Customize ARM template files

+If the predefined templates don't meet your application requirement, you can customize the ARM templates under `templates/azure` folder. For example, you can customize the ARM template to create some extra Azure resources for your app. You need to have basic knowledge of bicep language, which is used to author ARM template.

+To ensure the TeamsFx tool functions properly, customize ARM template, that satisfies the following requirement:

+* Ensure that the folder structure and file name remain unchanged. The tool may append new content to the existing files when you add more resources or capabilities to your project.

+* Ensure that the name of auto-generated parameters and its property names remain unhanged. The auto-generated parameters may be used when you add more resources or capabilities to your project.

+* Ensure that the output of auto-generated ARM template is unchanged as well. You can add more outputs to ARM template. The output is `.fx/states/state.{env}.json` and can be used in other features such as deploy and validate manifest file.

+### Customize Teams app

+You can customize your bot or the Teams app by adding configuration snippets to use an Azure AD app created by you. You can perform in the following ways:

+#### Use an existing Azure AD app for your bot

+You can add the following configuration snippet `.fx/configs/config.{env}.json` to use an Azure AD app created by you for your Teams app. To create an Azure AD app, follow the link <https://aka.ms/teamsfx-existing-aad-doc>.

+```json

+"auth": {

+ "clientId": "<your Azure AD app client id>",

+ "clientSecret": "{{$env.ENV_NAME_THAT_STORES_YOUR_SECRET}}",

+ "objectId": "<your Azure AD app object id>",

+ "accessAsUserScopeId": "<id of the access_as_user scope>"

+}

+```

+After adding the snippet, add your client secret to the related environment variable so that Teams Toolkit can resolve the actual client secret during provision.

+> [!NOTE]

+> Ensure not to share the same Azure AD app in multiple environments. If you don't have permission to update the Azure AD app, you get a warning with instructions to manually update the Azure AD app. Follow these instructions to update your Azure AD app after provision.

+#### Use an existing Azure AD app for your Teams app

+You can add the following configuration snippet to `.fx/configs/config.{env}.json` to use the Azure AD app created for your bot:

+```json

+"bot": {

+ "appId": "<your Azure AD app client id>",

+ "appPassword": "{{$env.ENV_NAME_THAT_STORES_YOUR_SECRET}}"

+}

+```

+After adding the snippet, add your client secret to the related environment variable for Teams Toolkit to resolve the actual client secret during provision.

+#### Skip adding user for SQL database

+If you get an insufficient permission error when Teams Toolkit tries to add user to SQL database, you can then add the following configuration snippet to `.fx/configs/config.{env}.json` to skip adding SQL database user:

+```json

+"skipAddingSqlUser": true

+```

+* [Deploy Teams app to the cloud using Visual Studio](deploy-teams-app.md)

+* [Edit Teams app manifest using Visual Studio](VS-TeamsFx-preview-and-customize-app-manifest.md)

+* [Debug Teams app locally for Visual Studio](debug-teams-app-visual-studio.md)

+zone_pivot_groups: teams-app-platform

+Teams Toolkit is a capability feature which allows you to perform multi-functions in both Microsoft Visual Studio Code as well as Visual Studio. With the help of Teams Toolkit you can automate the process from creating to deploying and customizing your app. The various features and advantages of Teams Toolkit are discussed in the respective documentation for the environments you choose.

+## Teams Toolkit Overview for Visual Studio Code

+## Teams Toolkit overview for Visual Studio

+Teams Toolkit for Visual Studio helps you to create, debug and deploy Microsoft Teams apps. Teams Toolkit for Visual Studio is GA in Visual Studio 2022 version 17.3. App development with Teams Toolkit has the advantages of:

+* Integrated identity

+* Access to cloud storage

+* Data from Microsoft Graph

+* Azure and Microsoft 365 services with zero-configuration approach

+For Teams app development, you can also use [CLI tool](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/cli/user-manual.md), similar to Teams Toolkit for Microsoft Visual Studio code that includes Toolkit `teamsfx`.

+Teams Toolkit brings all the tools needed to build a Teams app in one place.

+> [!NOTE]

+> Teams Toolkit is not available in other versions.

+## User Journey of Teams Toolkit

+Teams Toolkit automates manual work and provides you with great integration of Teams and Azure resources. The following image shows the user journey:

+The main milestones of this journey are:

+1. You can start by creating a new project or try building a sample Teams app.

+1. You can then edit code or the manifest file as required.

+1. For building and debugging the Teams app you can use your Microsoft 365 account.

+1. For provisioning and deploying your app to cloud you can use your Azure account.

+1. You can finally publish your app to Teams.

+The following operations aren't supported in Teams Toolkit for Visual Studio yet compared to Teams Toolkit for Microsoft Visual Studio Code, however they're planned in the future product road map.

+* Add another Teams capabilities to your Teams app.

+* Add more Azure resources to your Teams app

+* Add Single Sign-on (SSO) to your Teams app.

+* Add API connection to your Teams app.

+* Customize Microsoft Azure Active Directory (Azure AD) manifest.

+* Add CI/CD pipelines.

+* Manage multiple cloud environments.

+* Collaborate on Teams projects.

+* Publish Teams app.

+### TeamsFx .NET SDK Reference docs

+* [Microsoft.Extensions.DependencyInjection Namespace](/../dotnet/api/Microsoft.Extensions.DependencyInjection)

+* [Microsoft.TeamsFx Namespace](/../dotnet/api/Microsoft.TeamsFx)

+* [Microsoft.TeamsFx.Configuration Namespace](/../dotnet/api/Microsoft.TeamsFx.Configuration)

+* [Microsoft.TeamsFx.Conversation Namespace](/../dotnet/api/Microsoft.TeamsFx.Conversation)

+* [Microsoft.TeamsFx.Helper Namespace](/../dotnet/api/Microsoft.TeamsFx.Helper)

+* [Create new Teams app in Visual Studio](create-new-teams-app-for-Visual-Studio.md)

+* [Provision cloud resources using Visual Studio](provision-cloud-resources.md)

+* [Deploy Teams app to the cloud using Visual Studio](deploy-teams-app.md)

+## See also

+| 09/16/2022 | Adaptive Cards in search based message extensions now support Universal Actions. | Build Message Extensions > Search commands > Define search commands > [Universal Actions for search based message extensions](messaging-extensions/how-to/search-commands/universal-actions-for-search-based-message-extensions.md) |