-## About Microsoft Teams and the docs

-Teams documentation is part of the Microsoft Docs technical documentation library. The content is organized into groups called docsets, each representing a group of related documents managed as a single entity. You can ask questions, provide suggestion, or provide updates. See [how to contribute to Teams documentation](https://learn.microsoft.com/microsoftteams/platform/resources/teams-contributor-reference/).

-To contribute to Microsoft Docs, see the [contributor guide overview](https://learn.microsoft.com/contribute/).

-You need an app package however you plan to distribute your Microsoft Teams app. A valid package is a ZIP file that contains the following:

-When a user installs your app in Teams, they install an app package that contains only a configuration file (also known as an app manifest) and your app's icons. The app's logic and data storage are hosted elsewhere, such on localhost during development and Azure Web Services. Teams accesses these resources via HTTPS.

-You configure default install options. For example, if your app's primary capability is a bot, you can also make the bot the default capability when a user installs your app to a team.

-> Sideloading your app multiple times displays more than one instance for messaging extensions.

-If your app fails to sideload or any issues to upload, check the following options:

-1. Ensure your app manifest matches to the latest [schema](../../resources/schem).

-Teams provide several ways to open apps. For more information, see [access your apps in Teams](https://support.microsoft.com/office/access-your-apps-in-teams-0758cb09-9e85-40e7-a974-51df7734646a).

-1. Select **View update**, a window with update option appears.

-After you stop the distribution of an app, you can still see it in Partner Center with a **Not available** status. If you decide to list the app again, follow the instructions to [Publish your app to the Microsoft Teams store](/concepts/deploy-and-publish/appsource/publish#teams-app-submission).

-* Access to users for subscribed plan features.

-* Value addition and significant benefits of subscription plan to users.

-* From your Teams app, provide link to the SaaS application home page for subscribers to manage the licenses in the future.

- * After youΓÇÖve reviewed the validation report, reply to the email thread with any queries related to the validation report,, or if you need any extra support to resolve the reported issues.

-Based on <a href="https://fluentsite.z22.web.core.windows.net/" target="_blank">Fluent UI</a>, the Microsoft Teams UI Kit includes components and patterns that are designed specifically for building Teams apps. In the UI kit, you can grab and insert the components listed here directly into your design and see more examples of how to use each component.

-Quickly learn about the fundamentals of Teams app design. You can find comprehensive guidance and examples in the <a href="https://www.figma.com/community/file/916836509871353159" target="_blank">Microsoft Teams UI Kit (Figma)</a>.

- * <a href="https://www.figma.com/community/file/916836509871353159" target="_blank">See full avatar guidelines (Figma)</a>

- * <a href="https://www.figma.com/community/file/836835755999342788" target="_blank">Get the latest Fluent icon set (Figma)</a>

- * <a href="https://www.figma.com/community/file/916836509871353159" target="_blank">See full type guidelines (Figma)</a>

- * <a href="https://www.figma.com/community/file/916836509871353159" target="_blank">See full color guidelines and available color tokens (Figma)</a>

- * <a href="https://www.figma.com/community/file/916836509871353159" target="_blank">See full shape and elevation guidelines (Figma)</a>

- * <a href="https://www.figma.com/community/file/916836509871353159" target="_blank">See full copy and content guidelinesΓÇöincluding writing for bots (Figma)</a>

-| [E5 developer account](../toolkit/accounts.md) | E5 developer subscription for building apps to extend Microsoft 365. It includes 25 user licenses, including the administrator, for development purposes only. <br>**See also**: [Microsoft 365 account](#m) |

-Each Teams theme has its own color scheme. To handle theme changes automatically, use <a href="https://fluentsite.z22.web.core.windows.net/0.51.3/colors#color-scheme" target="_blank">color tokens (Fluent UI)</a> in your design.

-|`resource`|string|2048 characters|✔️|Resource URL of app for acquiring auth token for SSO. </br> **NOTE:** If you aren't using SSO, ensure that you enter a dummy string value in this field to your app manifest, for example, <https://notapplicable> to avoid an error response. |

- |`LiveShareSession.ReadWrite.Chat`|Allows the app to create and synchronize Live Share sessions for meetings associated with this chat, and access related information about the meeting's roster, such as member's meeting role, on behalf of the signed-in user.|

-Teams documentation is part of the **Microsoft Docs** technical documentation library. The content is organized into groups called docsets, each representing a group of related documents managed as a single entity. Articles in the same docset have the same URL path extension after `learn.microsoft.com`. For example, `/learn.microsoft.com/microsoftteams/...` is the beginning of the Teams docset file path. Teams articles are written in Markdown syntax and hosted on GitHub.

- 1. Select the **Extensions icon** on the side activity bar or use the **View => Extensions** command or Ctrl+Shift+X and, search for **Microsoft Docs Authoring Pack**.

-## Review the Microsoft Docs Contributors Guide

-The contributors guide provides direction to create, publish, and update technical content on the **Microsoft Docs** platform.

-**Microsoft Docs** pages are written in **MarkDown** syntax and parsed through a [Markdig](https://github.com/lunet-io/markdig) engine. For more information on specific tags and formatting conventions, see [Docs Markdown reference](/contribute/markdown-reference).

-> To reference a Microsoft Docs library article that **is not part of** the Teams platform docset:<br>

-> To reference a page outside of the Microsoft Docs library, such as GitHub, use the full `https` file path.<br>

-Code samples play an important role to use APIs and SDKs effectively. Well presented code samples can communicate how things work more clearly than descriptive text and instructional information alone. Your code samples must be accurate, concise, well documented, and reader friendly. Code that is easy to read must be easy to understand, test, debug, maintain, modify, and extend. For more information, see [how to include code in docs](/contribute/code-in-docs).

-> [Get Microsoft Docs updates and the latest announcements](/teamblog)

-* [Microsoft Docs](/)

-* [Contributors guide](/contribute)

-* [Docs style and voice quick start](/contribute/style-quick-start)

- 1. If your Site URL = <https://myhostname.sharepoint.com/sites/MySiteName>

- 1. Hostname = myhostname.sharepoint.com

- 1. Relative path to site = sites/MySiteName

-|[Associate Collaboration Map](/rest/api/industry/collaboration-toolkit/collaboration-custom-ap-is/associate-collaboration-map)|Associates a collaborative entity to a collaboration session.|

-|[Begin Collaboration Session](/rest/api/industry/collaboration-toolkit/collaboration-custom-ap-is/begin-collaboration-session)|Creates a collaboration session record linked to a business entity, application context, and optional metadata.|

-|[Disassociate Collaboration Map](/rest/api/industry/collaboration-toolkit/collaboration-custom-ap-is/disassociate-collaboration-map-custom-api)|Disassociates a mapped entity from the given collaboration session.|

-|[Retrieve Collaboration Maps](/rest/api/industry/collaboration-toolkit/collaboration-custom-ap-is/retrieve-collaboration-maps-custom-api)|Gets a list of collaboration maps for a session of a specific entity type.|

-|[Retrieve Collaboration Session](/rest/api/industry/collaboration-toolkit/collaboration-custom-ap-is/retrieve-collaboration-session-custom-api)|Gets a collaboration session record based on the parameters provided.|

-|[Update Collaboration Map](/rest/api/industry/collaboration-toolkit/collaboration-custom-ap-is/update-collaboration-map-custom-api)|Updates a collaboration map record and its metadata if provided.|

-|[Update Collaboration Session](/rest/api/industry/collaboration-toolkit/collaboration-custom-ap-is/update-collaboration-session)|Updates a collaboration session record and optionally its metadata.|

-|[Get Collaboration Map By Id](/rest/api/industry/collaboration-toolkit/collaboration-standard-o-data-ap-is/get-collaboration-map-by-id)|Gets the details from a collaboration map record.|

-|[Get Collaboration Metadata](/rest/api/industry/collaboration-toolkit/collaboration-standard-o-data-ap-is/get-collaboration-metadata)|Gets a list of the collaboration metadata records for a given collaboration map or a collaboration root entity name.|

-|[Get Collaboration Root](/rest/api/industry/collaboration-toolkit/collaboration-standard-o-data-ap-is/get-collaboration-root)|Lists all the collaboration sessions created.|

-|[Create and Update Settings](/rest/api/industry/collaboration-toolkit/settings-custom-ap-is/create-update-setting-custom-api)|Creates or updates a setting that matches both the group path and the settings definition name.|

-|[Retrieve Null Settings](/rest/api/industry/collaboration-toolkit/settings-custom-ap-is/retrieve-null-settings-custom-api)|Returns a list of settings definitions that do not have a value.|

-|[Retrieve Settings](/rest/api/industry/collaboration-toolkit/settings-custom-ap-is/retrieve-settings-custom-api)|Returns a list of specific settings or settings in groups.|

-|[Delete Settings Definition](/rest/api/industry/collaboration-toolkit/settings-standard-o-data-ap-is/delete-settings-definition)|Deletes a settings definition.|

-|[Delete Settings Group](/rest/api/industry/collaboration-toolkit/settings-standard-o-data-ap-is/delete-settings-group)|Deletes a settings group.|

-|[Delete Settings Type](/rest/api/industry/collaboration-toolkit/settings-standard-o-data-ap-is/delete-settings-type)|Delete a settings type.|

-|[Delete Settings Value](/rest/api/industry/collaboration-toolkit/settings-standard-o-data-ap-is/delete-settings-value)|Deletes a settings value.|

-|[Get Settings Definitions](/rest/api/industry/collaboration-toolkit/settings-standard-o-data-ap-is/get-settings-definitions)|Lists settings definitions.|

-|[Get Settings Groups](/rest/api/industry/collaboration-toolkit/settings-standard-o-data-ap-is/get-settings-groups)|Lists settings groups.|

-|[Get Settings Types](/rest/api/industry/collaboration-toolkit/settings-standard-o-data-ap-is/get-settings-types)|Lists settings types.|

-|[Get Settings Value](/rest/api/industry/collaboration-toolkit/settings-standard-o-data-ap-is/get-settings-value)|Lists settings values.|

-|[Patch Settings Definition](/rest/api/industry/collaboration-toolkit/settings-standard-o-data-ap-is/patch-settings-definition)|Updates a settings definition.|

-|[Patch Settings Group](/rest/api/industry/collaboration-toolkit/settings-standard-o-data-ap-is/patch-settings-group)|Updates a settings group.|

-|[Patch Settings Type](/rest/api/industry/collaboration-toolkit/settings-standard-o-data-ap-is/patch-settings-type)|Updates a settings type.|

-|[Patch Settings Value](/rest/api/industry/collaboration-toolkit/settings-standard-o-data-ap-is/patch-settings-value)|Updates a setting value.|

-|[Post Settings Definition](/rest/api/industry/collaboration-toolkit/settings-standard-o-data-ap-is/post-settings-definition)|Creates a new settings definition.|

-|[Post Settings Group](/rest/api/industry/collaboration-toolkit/settings-standard-o-data-ap-is/post-settings-group)|Creates a new settings group.|

-|[Post Settings Type](/rest/api/industry/collaboration-toolkit/settings-standard-o-data-ap-is/post-settings-type)|Creates a new settings type.|

-|[Post Settings Value](/rest/api/industry/collaboration-toolkit/settings-standard-o-data-ap-is/post-settings-value)|Creates a new setting value.|

-The app that you've created in [create a model-driven application](/samples/app-with-collaboration-controls.md#create-a-model-driven-application) only have a single left pane and there are no complex commands. So before adding your app into Teams, you can hide the left pane and make more comprehensible header view.

-You can [create flows to automate repetitive work tasks](https://flow.microsoft.com/connectors/shared_teams/microsoft-teams/) directly within the Teams environment with the [Power Automate app in Teams](/power-automate/flows-teams). You can [trigger a flow from any message in Microsoft Teams](/power-automate/trigger-flow-teams-message) and [use Adaptive Cards within Power Automate](/power-automate/create-adaptive-cards). Additionally, you can build flows to customize and add further value to Microsoft Teams from within the new [Power Apps app](https://go.microsoft.com/fwlink/?linkid=2143539) in Teams.

-Each Teams theme has its own color scheme. To handle theme changes automatically, use <a href="https://fluentsite.z22.web.core.windows.net/0.51.3/colors#color-scheme" target="_blank">color tokens (Fluent UI)</a> in your design.

-|`url` <br>|The URL of 3P app server for the authentication pop-up, with the following two parameter placeholders:</br> <br> - `oauthRedirectMethod`: Pass placeholder in `{}`. This placeholder is replaced by deeplink or web page by Teams platform, which informs app server if the call is coming from mobile platform.</br> <br> - `authId`: This placeholder is replaced by UUID. The app server uses it to maintain session.|

-> * Currently, you can add authentication to external browsers for tabs in mobile only.

- 8. Teams calls success callback and sends result.

-* [Configure identity providers](../../../concepts/authentication/configure-identity-provider.md)

- > | *demoapplication* | **<https://demoapplication.example.net>** | All platforms.|

- > | *DemoApplication* | **<https://DemoApplication.example.net>** | Desktop, web, and iOS only. It isn't supported in Android. |

- * <https://localhost:3978/>

- * <https://localhost:3978/privacy>

- * <https://localhost:3978/tou>

- * <https://localhost:3978/>

- * <https://localhost:3978/privacy>

- * <https://localhost:3978/tou>

-> On Teams mobile clients, invoking Stage View for apps distributed through the [Teams store](/platform/concepts/deploy-and-publish/apps-publish-overview.md) and not having a moblie-optimized experience opens the default web browser of the device. The browser opens the URL specified in the `websiteUrl` parameter of the `TabInfo` object.

-description: In this module, learn how to edit, preview and customize Teams App Manifest in the different environment for Visual Studio.

-# 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`:

-You can add a customized parameter by:

- ```

- {

- "manifest": {

- "KEY": "VALUE"

- }

- }

- ```

-### Preview app manifest in Teams Toolkit

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

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

- :::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":::

- > [!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

-You can preview the manifest file by performing the following steps:

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

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

-There are two other ways to preview manifest file:

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

- :::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":::

- > [!NOTE]

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

-### Sync local changes to Developer Portal

-Your local changes can be synced to the Developer Portal, after you've previewed the manifest file. Select **Project** > **Teams Toolkit** > **Update Manifest in Teams Developer Portal**, or context menu from Solution Explorer.

-> [!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** dialogue box you can select **Overwrite and update** or **Cancel**.

-## See also

-description: In this module, learn how to create a new Teams app using Teams Toolkit for Visual Studio

-# 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

-## 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. |

-1. Select **Create a new project** from **Get started** section when you launch Visual Studio.

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

- You can also create a new project directly from the application.

-1. Select **File** menu.

-1. Select **New**.

-1. Select **Project**.

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

-1. Search for Microsoft **Teams** app in the list.

-1. Select **Microsoft Teams app**.

-1. Select **Next**.

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

-1. Select **Project name** and enter your project name.

-1. Select **Create**.

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

-1. Select the **Teams app type** that you would like to create.

-1. Select **Create**.

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

-## 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. You can now see the instructions in Get started and check out the different features in Teams Toolkit.

-## See also

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

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

-description: In this module, learn how to debug your Teams app locally in Visual Studio using Teams Toolkit

-# Debug your Teams app locally using Visual Studio

-Teams Toolkit helps you to debug and preview your Microsoft Teams app locally. Debug is a process of building, checking, detecting, and correcting issues or bugs in your app. Debug ensures that the program runs successfully. Visual Studio allows you to debug tab, bot, message extension. Teams Toolkit supports the following debug features:

-* Prepare Teams app dependencies

-* Start debugging

-* Toggle breakpoints

-* Hot reload

-* Stop debugging

-During the debug process, Teams Toolkit automatically starts app 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.

-## 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.|

-## Debug your app locally

-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**.

-1. Select **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":::

- > [!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**.

-1. 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**.

-1. Select **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.

-## 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":::

-1. Right-click on **Solution**.

-1. Select **Properties**.

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

-1. Select **Configuration Properties** > **Configuration** in the dialogue.

-1. Select uncheck the **Deploy** process box.

-1. Select **OK**.

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

-## See also

-* [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)

-description: In this module, learn how to deploy app to the cloud, Azure, or SharePoint and deploy Teams apps using Teams Toolkit in Visual Studio

-# Deploy Teams app to the cloud using Visual Studio

-Teams Toolkit helps you to deploy or upload your application's front-end and back-end code to the provisioned cloud resources in your Azure subscription. After deploying, you can preview the app in Teams client or the web browser before you can start using. 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.

-## Prerequisite

-Here's a list of tools you need for building and deploying your apps.

-| &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; | 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. |

- > [!NOTE]

- > Before you deploy project code to cloud, [Provision cloud resources for TTK Visual Studio](provision VS.md).

-## Deploy Teams app using Teams Toolkit

-1. Launch Visual Studio.

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

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

-1. Select **Teams Toolkit**.

-1. Select **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":::

-1. After the Deploy process is triggered and 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":::

-After your project is successfully deployed to Azure, there are different ways to preview your app in Teams Toolkit:

-1. Select **Project** > **Teams Toolkit** > **Zip App Package** to generate Teams app package.

-1. Select option **For Local** or **For Azure** and upload to Teams client.

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

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

-3. Select **Project**.

-4. Select **Teams Toolkit**.

-5. Select **Preview in Teams**.

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

-The other way to preview your app:

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

-1. Select **Teams Toolkit**.

-1. Select **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.

-## See also

-* [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)

-description: In this module, learn how to provision cloud resources using Teams Toolkit. Also to create resources and customize resource provision in Visual Studio

-# Provision cloud resources using Visual Studio

-TeamsFx integrates with Azure and Microsoft 365 cloud that allows you to place your application in Azure with a single command. TeamsFx integrates with Azure Resource Manager that enables you to provision Azure resources. For the code approach, your application needs the cloud resources.

-## Prerequisites

-Here's a list of tools you need for provisioning your cloud resources:

-| &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; | [Microsoft 365 developer account](https://developer.microsoft.com/en-us/microsoft-365/dev-program) | Access to Teams account with the appropriate permissions to install an app. |

-| &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; | Teams Toolkit | A Visual Studio extension that creates a project scaffolding for your app. Use latest version. |

-| &nbsp; | [Azure account](https://portal.azure.com/) | Azure account with a valid subscription. |

-## Steps to provision cloud resources

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

-### Sign in to your Microsoft 365 account

-1. Visual Studio 2022.

-2. Open the Microsoft Teams app project.

-3. Select **Project**.

-4. Select **Teams Toolkit**.

-5. Select **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-dependencies.png" alt-text="Prepare teams app dependencies":::

-7. 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.

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

-9. Select **Continue** after you've signed in to 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.

-2. Open the Teams App project.

-3. Select **Project**.

-4. Select **Teams Toolkit**.

-5. Select **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-cloud.png" alt-text="Sign in to Azure account":::

-6. 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.

-7. Sign in to Azure account using your credentials. The browser closes automatically.

-### To provision cloud resources

-1. After you open your project in Visual Studio, Select **Project**

-2. Select **Teams Toolkit**

-3. Select **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-cloud1.png" alt-text="Provision in cloud":::

-4. In the **Provision** dialogue you can see a list of all the subscriptions in your Azure account.

-5. You can either select or create a new **Resource group**.

-6. Select **Provision**.

- :::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":::

-7. The dialog warns you 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 provision process of creating the resources in the Azure cloud may take some time.

-8. Check Teams Toolkit output window to monitor progress.

-9. 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.

-### Create resource for Teams tab application

-| 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. |

-### Create resources for Teams message extension application

-| 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. |

-### Create resources for Teams command bot application

-| 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. |

-### Create resources for Teams notification bot with HTTP trigger (Web API server) application

-| 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. |

-### Create resource for Teams notification bot with HTTP trigger (Azure function) application

-| 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. |

-### Create resource for Teams notification bot with timer trigger (Azure function) application

-| 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. |

-### Create resources for Teams notification bot with HTTP trigger + timer trigger (Azure function) application

-| 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. |

-### 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. | [Customize the value](#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. | [Customize the value](#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. | [Customize the value](#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. | [Customize the value](#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. | [Customize the value](#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. | [Customize the value](#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

-```

-## See also

-* [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)

-description: In this module, learn Teams Toolkit Overview for Visual Studio

-# 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.

-## Install Teams Toolkit for Visual Studio

-You can download the latest Visual Studio installer from the [Visual Studio download page](https://visualstudio.microsoft.com).

-> [!NOTE]

-> You'll need to first install the Visual Studio installer before installing Visual Studio.

-After you open the Visual Studio installer, in the pop-up Workloads window.

-1. Select the box **ASP.NET and web development** workload.

-1. Select the box **Microsoft Teams development tools** in the installation details panel.

-1. Select **Install**.

- :::image type="content" source="../assets/images/teams-toolkit-overview/visual-studio-install1.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.png" alt-text="Launch visual studio":::

- > [!IMPORTANT]

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

-## Take a tour of Teams Toolkit

-After you install Teams Toolkit, you can take a brief look at the different menu options of Teams Toolkit:

-1. Select **Project**.

-1. Select **Teams Toolkit**.

-1. You can now access the **Teams Toolkit menu** options.

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

- You can also access Teams Toolkit menu from Solution Explorer.

-4. Right-click on your **Project**.

-5. Select **Teams Toolkit** > **Teams Toolkit menu** options.

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

- > [!NOTE]

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

-You can perform the following functions on Teams Toolkit for Visual Studio:

-|Function |Description |

-|||

-|Create Teams Project |Create Teams project using Teams template in Visual Studio |

-|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. |

-The following operations aren't supported in Teams Toolkit for Visual Studio yet compared to Teams Toolkit for 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 to your Teams app.

-* Add API connection to your Teams app.

-* Customize 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)

-## See also

-* [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)

-description: Learn building custom apps directly within Visual Studio with Teams Toolkit and learn to configure your app in Visual Studio, validate your app, and more

-# Teams Toolkit for Visual Studio

-Build, test, and develop for Teams inside your IDE.

-Teams Toolkit's extension for Visual Studio makes it easy to create new projects for Teams, automatically setup apps in Teams Developer Portal, run and debug in Teams, configure cloud hosting, and use [TeamsFx](https://github.com/OfficeDev/teamsfx) from your IDE.

-## Install Teams Toolkit for Visual Studio

->[!NOTE]

-> As a prerequisite, ensure you use Visual Studio 2022 17.1 Preview 2 or newer to follow the instructions below.

-1. If you already have Visual Studio 2022 17.1 Preview 2 installed, skip to the next step. Otherwise, [install Visual Studio 2022 Preview](https://visualstudio.microsoft.com/vs/preview/).

-2. Open the Visual Studio Installer.

-3. Select **Modify** for your existing VS 2022 Preview installation.

-4. Select the **ASP.NET and web development** workload.

-5. On the right, expand the **ASP.NET and web development** section and select **Microsoft Teams development tools** in the Optional list of components.

-6. Select **Install** or **Modify** in the Visual Studio Installer to complete the installation process.

- 

-## Get started quickly with a new project

-Teams Toolkit project templates provide all code, files, and configuration you need to get started with a Teams app project.

-The Microsoft Teams App project template allows you to specify a Microsoft 365 account that is required to automatically register and configure your new Teams app.

-> [!NOTE]

-> If you do not have a Microsoft 365 account, you can sign up for a [Microsoft 365 Developer Program](https://developer.microsoft.com/microsoft-365/dev-program) subscription. It's free for 90 days and renews as long as you are using it for development activity. If you have a Visual Studio Enterprise or Professional subscription, both programs include a free Microsoft 365 [developer subscription](https://aka.ms/MyVisualStudioBenefits), active for the life of your Visual Studio subscription. For more information, see [set up a Microsoft 365 developer subscription](/office/developer-program/office-365-developer-program-get-started).

-1. Launch Visual Studio 2022.

-1. In the start window, choose **Create a new project**.

-1. In the **Search for templates** box, enter Microsoft Teams App.

-1. Select the **Microsoft Teams App** template and select **Next**.

-1. In the **Configure your new project** window, type or enter _HelloTeams_ in the **Project name** box. Then, select **Create**.

-1. In the **Create a new Teams application** window, choose or sign in to a Microsoft 365 account using the **Choose an account** selector. Then, select **Create**.

- 

-Visual Studio will open up your new project and Teams Toolkit will setup you new project in Teams Developer Portal. The project will be added for the Teams organization linked to the Microsoft 365 account you chose in the steps above and create a new Azure Active Directory registration. This is required for the app to run in Teams.

-## Run and debug your app in Teams

-You can launch your app project running locally from Visual Studio.

-1. Open or [create a Teams app project](#get-started-quickly-with-a-new-project).

-2. Press **F5** or select **Debug > Start Debugging** in Visual Studio.

-Visual Studio will launch your Teams app project in a browser and start debugging.

-## Host your Teams app in the cloud and preview it

-You can create and automatically configure cloud resources for hosting your app in Azure using Teams Toolkit.

-1. Select the **Project > Teams Toolkit > Provision in the Cloud** menu.

-2. In the Select your subscription window, choose the Azure subscription you want to use to create resources with.

-Teams Toolkit will create Azure resources in this subscription but no code is deployed during this step. To deploy your project to these new resources:

-1. Select the **Project > Teams Toolkit > Deploy in the Cloud** menu.

-## Preview your app running from cloud resources

-You can run your app in a browser using the remote resources to verify that everything works. It's not possible to debug during in this scenario yet.

-1. Select the **Project > Teams Toolkit > Preview Teams app** menu.

-Your app will open in a browser and use the resources created by the Provision and Deploy steps.

-## Publish your app to Teams

-In the [Teams Developer Portal](https://dev.teams.microsoft.com/home), you can upload your app to a team, submit your app to your company custom app store for users in your organization, or submit your app to App Source for all Teams users.

-Discover Microsoft Teams platform features that are generally available (GA) and in developer preview. You can now get latest Teams platform updates by subscribing to the RSS feed [](https://aka.ms/TeamsPlatformUpdates). For more information, see [configure RSS feed](#get-latest-updates).

-<!--

-## Latest updates 

-| Date | Update | Find here |

-| | | |

-|05/24/2022|Live Share SDK| Build apps for Teams meetings > Enhanced collaboration with Live Share > [Overview](apps-in-teams-meetings/teams-live-share-overview.md) |

-|05/24/2022| Submit your Outlook- and Office-enabled apps to the Teams store | Extend your app across Microsoft 365 > [Overview](m365-apps/overview.md) |

-|05/24/2022| App guidance and what's new in TeamsJS version 2.0.0| Tools and SDKs > [Teams JavaScript client SDK](tabs/how-to/using-teams-client-sdk.md) |

-|05/19/2022|Bots and Message extensions in GCC and GCCH| ΓÇó Plan your app > [Overview](concepts/app-fundamentals-overview.md#government-community-cloud) </br> ΓÇó Build bots > [Overview](bots/what-are-bots.md) </br> ΓÇó Build message extensions > [Overview](messaging-extensions/what-are-messaging-extensions.md) |

-## GA features

-<br>

-| 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) |

-| 09/06/2022 | `selectMedia` API for capturing videos using camera | Integrate device capabilities > [Integrate media capabilities](concepts/device-capabilities/media-capabilities.md#code-snippets) |

-| 08/01/2021| Notice: Developer Portal is now GA and App Studio is deprecated from August, 01, 2022. | Tools and SDK > [Developer Portal for Teams](concepts/build-and-test/teams-developer-portal.md) |

-<br>

-<br>

-<br><br>

-Developer preview is a public program that provides early access to unreleased Teams platform features.

-| 09/20/2022 | Introduced meeting app support for Scheduled Channel Meetings | Build apps for Teams meetings and calls > [Unified meetings apps](apps-in-teams-meetings/meeting-app-extensibility.md) |

-1. Select ellipses &#x25CF;&#x25CF;&#x25CF; and from the dropdown list, select **Connectors**.