+You can start by importing the required modules. The sample uses the [LiveState DDS](/javascript/api/@microsoft/live-share/livestate) and [LiveShareClient](/javascript/api/@microsoft/live-share/liveshareclient) from the Live Share SDK. The sample supports Teams Meeting Extensibility so you must include the [Microsoft Teams JavaScript client library (TeamsJS)](https://github.com/OfficeDev/microsoft-teams-library-js). Finally, the sample is designed to run both locally and in a Teams meeting so you need to include more Fluid Framework pieces to [test the sample locally](https://fluidframework.com/docs/testing/testing/#azure-fluid-relay-as-an-abstraction-for-tinylicious).

+When testing locally, `TestLiveShareHost` updates the browser URL to contain the ID of the test container that was created. Copying that link to other browser tabs causes the `LiveShareClient` to join the test container that was created. If the modification of the applications URL interferers with the operation of the application, the strategy used to store the test containers ID can be customized using the [setLocalTestContainerId](/javascript/api/@microsoft/live-share/iliveshareclientoptions) and [getLocalTestContainerId](/javascript/api/@microsoft/live-share/iliveshareclientoptions) options passed to `LiveShareClient`.

+After you're ready to deploy your code, you can use Teams Toolkit or the Teams Developer Portal to provision and upload your app's zip file.

+If you don't have the required SDK, and need to invoke external APIs in your code. The `Teams: Connect to an API` command in Microsoft Visual Studio Code Teams Toolkit extension, or `teamsfx add api-connection` command in TeamsFx CLI can be used to bootstrap code to call target APIs. For more information, see [configure API connection](../../../toolkit/add-API-connection.md#).

+If you don't have the required SDK, and want to invoke external APIs in your code. The `Teams: Connect to an API` command in Microsoft Visual Studio Code Teams Toolkit extension, or `teamsfx add api-connection` command in TeamsFx CLI can be used to bootstrap code to call target APIs. For more information, see [Integrate existing third-party APIs](../../../toolkit/add-API-connection.md).

+`https://teams.microsoft.com/l/message/{chatId}/{messageId}?context={"contextType":"chat"}`

+Example: `https://teams.microsoft.com/l/message/19:253f5895-9a62-4362-8d38-43f0205c702c_f1b94dcf-0aa3-4989-bcdf-ef4a5ed00f86@unq.gbl.spaces/1563480968434?context=%7B%22contextType%22:%22chat%22%7D`

+See the following video to learn more about publishing your app to the Microsoft Teams store:

+ * Admin account (required)

+ * Non-admin accounts (required)

+ * Ensure that test accounts are safe-listed or configured with license keys, if applicable.

+ * If your app requires users to log in or connect to external services, provide the required credentials to complete the login or connection with the external service.

+ * Ensure that phone-based 2-way authentication is disabled for test accounts.

+ * If the app provides a collaborative experience, provide a non-admin account for each user persona. For example, if your app is used by teachers and students, provide credentials for both user personas.

+ * Ensure that at least one account has access to premium or upgraded features, if applicable.

+ * All accounts you provide must include pre-populated data to help in testing. For example, if your app helps to provide market insights based on the user profile, ensure that market data is pre-populated along with a few user profiles.

+ * Provide at least one account that isn't pre-configured to test the first-run sign-in experience properly.

+* Sample 1: Educational app

+* Sample 2: ERP Data transfer

+* Sample 3: Collaborative app

+### Distribute your app to specific countries

+If you want to cater your app to a specific audience, you can select from the available list of countries and communicate whatΓÇÖs great about your app in ways that are relevant to users. This is known as Geo-filtering. Geo-filtering is applicable only for apps listed in the Teams store. For example, a Contoso US app, which sells gift cards that are valid within the US and Canada is only visible in the Teams store for the users in the US and Canada.

+> [!NOTE]

+> Geo-filtering isn't supported in Government community cloud (GCC), GCC-High, and Department of Defence (DoD) tenants.

+Geo-filtering helps you improve your app's visibility in the Teams store. When you publish your app to the store, you can select from the available list of countries in the Partner Center to target your app to users in specific countries. For more information on supported geographic locations in Partner Center, see [Geographic availability and currencies](/partner-center/marketplace/marketplace-geo-availability-currencies).

+#### Determine user location

+Teams uses the `UsageLocation` property from the [user resource type](/graph/api/resources/user?view=graph-rest-#properties&preserve-view=true) API to determine the location of the user and displays the apps available in the user's country.

+If a user wants to install an app available in another country, they can use the following methods:

+* Use a deep link to install the app.

+* Install the app from [Microsoft AppSource](https://appsource.microsoft.com/en-US/?exp=ubp8).

+Based on [Fluent UI](https://react.fluentui.dev/?path=/docs/), 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.

+You can implement a notification bar using the Fluent UI [alert](https://react.fluentui.dev/?path=/docs/preview-components-alert--default) component.

+ * [Implement colors (Fluent UI)](https://react.fluentui.dev/?path=/docs/theme-colors--page)

+> [Try Teams UI components (Fluent UI)](https://react.fluentui.dev/?path=/docs/)

+> [Get the library (Fluent UI)](https://react.fluentui.dev/?path=/docs/)

+ Title: Build your basic tab app

+description: Build your basic tab app

+ms.localizationpriority: high

+# Build your basic tab app

+Start Microsoft Teams app development with your first Teams tab app.

+In this tutorial, get familiarized with a basic Teams tab app in one of the following ways:

+* **GitHub Codespaces**: The codespace instance allows you to experience a Teams app almost instantaneously. It opens Visual Studio Code, where the Teams Toolkit extension, the app source code, and all dependencies are pre-packaged for you.

+* **Step-by-step guide**: Allows you to create a Teams app from scratch with all development environment setup.

+# [GitHub Codespaces](#tab/teamstoolkitcodespaces)

+Before you create your codespace, ensure that you have:

+* A GitHub account to create your codespace instance.

+* A [Microsoft 365 account](https://developer.microsoft.com/microsoft-365/dev-program) with sideloading permission.

+* A [Microsoft 365 tenant](../concepts/build-and-test/prepare-your-o365-tenant.md)

+> [!TIP]

+> [GitHub codespaces](https://github.com/features/codespaces) offers the free plan up to a fixed amount of usage every month. If you need to free up the space, go to [github.com/codespaces](https://github.com/codespaces) and delete the codespace that you no longer need.

+To create a Teams tab app with GitHub Codespaces, follow the steps:

+1. Select the following button to open GitHub Codespaces.

+ <a href="https://github.com/codespaces/new?hide_repo_select=true&ref=v3&repo=348288141&machine=standardLinux32gb&location=WestUs2&devcontainer_path=.devcontainer%2Fhello-world-tab-codespaces%2Fdevcontainer.json&resume=1" target="_blank"><img src="https://github.com/codespaces/badge.svg" alt="Open hello-world tab in GitHub Codespaces"></a>

+ You may be asked to sign in to GitHub account if you haven't.

+1. Select **Create new codespace**.

+ :::image type="content" source="../assets/images/get-started/codespace.png" alt-text="Screenshot shows you the GitHub page to create a codespace for tab."lightbox="../assets/images/get-started/codespace.png":::

+ The **Setting up your codespace** page appears.

+ :::image type="content" source="../assets/images/get-started/building-codespace.png" alt-text="Screenshot shows you the codespace building your tab."lightbox="../assets/images/get-started/building-codespace.png":::

+ Teams Toolkit prepares the tab app project for you and opens it in Visual Studio Code in the browser. Teams Toolkit icon appears in the activity bar of Visual Studio Code.

+1. Select **Sign in to your Microsoft 365** and **Sign in to Azure** to sign in with your Microsoft 365 account.

+ :::image type="content" source="../assets/images/get-started/toolkit-in-browser-sign-in.png" alt-text="Screenshot shows you the Teams Toolkit window in browser to sign in."lightbox="../assets/images/get-started/add-tab-in-teams.png":::

+ > [!NOTE]

+ >

+ > When you build your app, GitHub Codespaces loads it to Teams client in a new tab. If your browser blocks pop-up tabs or windows, you'll need to allow pop-ups to let your app open.

+1. Select **Preview your Teams App (F5)** to build your tab app.

+ :::image type="content" source="../assets/images/get-started/toolkit-in-browser.png" alt-text="Screenshot shows you the Teams Toolkit window in browser with your tab app."lightbox="../assets/images/get-started/toolkit-in-browser.png":::

+ GitHub Codespaces builds your tab app, loads it to Teams client, and opens in another browser tab or window.

+1. When the app dialog appears, select **Add** to install your tab app in Teams.

+ :::image type="content" source="../assets/images/get-started/tab-in-teams.png" alt-text="Screenshot shows you the tab app loaded in the Teams client.":::

+ The Tab app is installed in the Teams client and opens.

+ You've successfully created the tab app and loaded in the Teams client.

+ :::image type="content" source="../assets/images/get-started/tab-app-in-teams.png" alt-text="Screenshot shows your tab app loaded in the Teams client."lightbox="../assets/images/get-started/tab-app-in-teams.png":::

+# [Step-by-step guide](#tab/step-by-step-guide)

+If you would like to learn how to start a project with Teams Toolkit from scratch, let's go through the step-by-step guide.

+Unlike GitHub Codespaces, you need to set up your development environment. Let's start building your basic tab app.

+> [!div class="nextstepaction"]

+> [Start building a basic tab app](../sbs-gs-javascript.yml)

+If a bot is what you are interested in, go to:

+> [!div class="nextstepaction"]

+> [Start building a bot](build-notification-bot.md)

+If you want to build message extension app, go to:

+> [!div class="nextstepaction"]

+> [Build message extension](build-message-extension.md)

+ Title: Build message extension

+description: In this module, learn how to build your first message extension for your Teams app.

+ms.localizationpriority: medium

+# Build message extension

+A message extension allows the users to interact with your web service through buttons and forms in the Microsoft Teams client. They can search or initiate actions in an external system from the compose message area, the command box, or directly from a message. You can send back the results of that interaction to the Teams client in the form of a richly formatted card.

+In this tutorial, you'll learn to build a search based message extension app, this app allows the users to search npm packages from the Node Package Manager (npm) directory.

+Get familiarized with search based message extension app in one of the following ways:

+* **GitHub Codespaces**: The codespace instance allows you to experience a Teams app almost instantaneously. It opens Visual Studio Code, where the Teams Toolkit extension, the app source code, and all dependencies are pre-packaged for you.

+* **Step-by-step guide**: Allows you to create a Teams app from scratch with all development environment setup.

+# [GitHub Codespaces](#tab/teamstoolkitcodespaces)

+Before you create your codespace, ensure that you have:

+* A GitHub account to create your codespace instance.

+* A [Microsoft 365 account](https://developer.microsoft.com/microsoft-365/dev-program) with sideloading permission.

+* A [Microsoft 365 tenant](../concepts/build-and-test/prepare-your-o365-tenant.md)

+> [!TIP]

+> [GitHub Codespaces](https://github.com/features/codespaces) offers the free plan up to a fixed amount of usage every month. If you need to free up the space, go to [github.com/codespaces](https://github.com/codespaces) and delete the codespaces that you no longer need.

+To create a search based message extension app with GitHub Codespaces, follow the steps:

+1. Select the following button to open GitHub Codespaces.

+ <a href="https://github.com/codespaces/new?hide_repo_select=true&ref=v3&repo=348288141&machine=basicLinux32gb&location=WestUs2&devcontainer_path=.devcontainer%2Fnpm-search-message-extension-codespaces%2Fdevcontainer.json&resume=1" target="_blank"><img src="https://github.com/codespaces/badge.svg" alt="Open message extension in GitHub Codespaces"></a>

+ You may be asked to sign in to GitHub account if you haven't.

+1. Select **Create new codespace**.

+ :::image type="content" source="../assets/images/get-started/codespace.png" alt-text="Screenshot shows you the GitHub page to create a codespace for message extension."lightbox="../assets/images/get-started/codespace.png":::

+ The **Setting up your codespace** page appears.

+ :::image type="content" source="../assets/images/get-started/building-codespace.png" alt-text="Screenshot shows you the codespace building your message extension.":::

+ Teams Toolkit prepares the message extension for you and opens it in Visual Studio Code in the browser. Teams Toolkit icon appears in the activity bar of Visual Studio Code.

+1. Select **Sign in to your Microsoft 365** and **Sign in to Azure** to sign in with your Microsoft 365 account.

+ :::image type="content" source="../assets/images/get-started/codespace/me-sign-in.png" alt-text="Screenshot shows you the Teams Toolkit window in browser to sign in."lightbox="../assets/images/get-started/add-tab-in-teams.png":::

+ > [!NOTE]

+ >

+ > When you build your app, GitHub Codespaces loads it to Teams client in a new tab. If your browser blocks pop-up tabs or windows, you'll need to allow pop-ups to let your app open.

+1. Select **Preview your Teams App (F5)** to build your message extension.

+ :::image type="content" source="../assets/images/get-started/codespace/me-preview-teams.png" alt-text="Screenshot shows you the Teams Toolkit window in browser with your message extension."lightbox="../assets/images/get-started/codespace/me-preview-teams.png":::

+ GitHub Codespaces builds your message extension app, loads it to Teams client, and opens in another browser tab or window.

+ Your message extension app is sideloaded to Teams.

+1. Once the app dialog appears in Teams, select **Add** to install your message extension in Teams.

+ :::image type="content" source="../assets/images/get-started/codespace/me-in-teams.png" alt-text="Screenshot shows you the message extension loaded in the Teams client.":::

+ You've successfully created the search based message extension and loaded in the Teams client.

+ :::image type="content" source="../assets/images/get-started/codespace/me-teams-chat.png" alt-text="Screenshot shows your message extension loaded in the Teams client.":::

+# [Step-by-step guide](#tab/step-by-step-guide)

+If you would like to learn how to start a project with Teams Toolkit from scratch, let's go through the step-by-step guide.

+Unlike GitHub Codespaces, you need to set up your development environment. Let's start building your message extension app.

+> [!div class="nextstepaction"]

+> [Build your first message extension app using JavaScript](../sbs-gs-msgext.yml)

+If a bot is what you are interested in, go to:

+> [!div class="nextstepaction"]

+> [Start building a bot](build-notification-bot.md)

+If you want to build basic tab app, go to:

+> [!div class="nextstepaction"]

+> [Build your basic tab app](build-basic-tab-app.md)

+## Next step

+> [!div class="nextstepaction"]

+> [Choose what suits you](choose-what-suits-you.md)

+## See also

+[npm directory](https://www.npmjs.com/)

+ Title: Build notification bot

+description: Sends messages in Teams channel or group chat or personal chat.

+ms.localizationpriority: medium

+# Build notification bot

+The notification bot proactively sends messages in Teams channel or group chat or personal chat. You can trigger the notification bot with an HTTP request, such as cards or texts.

+In this tutorial, get familiarized with a notification bot app in one of the following ways:

+* **GitHub Codespaces**: The codespace instance allows you to experience a Teams app almost instantaneously. It opens Visual Studio Code, where the Teams Toolkit extension, the app source code, and all dependencies are pre-packaged for you.

+* **Step-by-step guide**: Allows you to create a Teams app from scratch with all development environment setup.

+# [GitHub Codespaces](#tab/teamstoolkitcodespaces)

+Before you create your codespace, ensure that you have:

+* A GitHub account to create your codespace instance.

+* A [Microsoft 365 account](https://developer.microsoft.com/microsoft-365/dev-program) with sideloading permission.

+* A [Microsoft 365 tenant](../concepts/build-and-test/prepare-your-o365-tenant.md)

+> [!TIP]

+> [GitHub Codespaces](https://github.com/features/codespaces) offers the free plan up to a fixed amount of usage every month. If you need to free up the space, go to [github.com/codespaces](https://github.com/codespaces) and delete the codespace that you no longer need.

+To create a Teams notification bot with GitHub Codespaces, follow the steps:

+1. Select the following button to open GitHub Codespaces.

+ <a href="https://github.com/codespaces/new?hide_repo_select=true&ref=v3&repo=348288141&machine=basicLinux32gb&location=WestUs2&devcontainer_path=.devcontainer%2Fnotification-codespaces%2Fdevcontainer.json&resume=1" target="_blank"><img src="https://github.com/codespaces/badge.svg" alt="Open hello-world tab in GitHub Codespaces"></a>

+ You may be asked to sign in to GitHub account if you haven't.

+1. Select **Create new codespace**.

+ :::image type="content" source="../assets/images/get-started/codespace.png" alt-text="Screenshot shows you the GitHub page to create a codespace for bot."lightbox="../assets/images/get-started/codespace.png":::

+ The **Setting up your codespace** page appears.

+ :::image type="content" source="../assets/images/get-started/building-codespace.png" alt-text="Screenshot shows you the codespace building your notification bot.":::

+ Teams Toolkit prepares the notification bot project for you and opens it in Visual Studio Code in the browser. Teams Toolkit icon appears in the activity bar of Visual Studio Code.

+1. Select **Sign in to your Microsoft 365** and **Sign in to Azure** to sign in with your Microsoft 365 account.

+ :::image type="content" source="../assets/images/get-started/toolkit-in-browser-sign-in.png" alt-text="Screenshot shows you the Teams Toolkit window in browser to sign in."lightbox="../assets/images/get-started/add-tab-in-teams.png":::

+ > [!NOTE]

+ >

+ > When you build your app, GitHub Codespaces loads it to Teams client in a new tab. If your browser blocks pop-up tabs or windows, you'll need to allow pop-ups to let your app open.

+1. Select **Preview your Teams App (F5)** to build your notification bot.

+ :::image type="content" source="../assets/images/get-started/toolkit-in-browser.png" alt-text="Screenshot shows you the Teams Toolkit window in browser with your notification bot."lightbox="../assets/images/get-started/toolkit-in-browser.png":::

+ GitHub Codespaces builds your notification bot app, loads it to Teams client, and opens in another browser tab or window.

+1. Once the app dialog appears, select **Add** to install your notification bot in Teams.

+ :::image type="content" source="../assets/images/get-started/codespace/bot-teams.png" alt-text="Screenshot shows you the notification bot loaded in the Teams client.":::

+1. Open a new terminal in your codespace and run the following command to trigger an event for sending a notification to your bot:

+ ```bash

+ curl -X POST http://localhost:3978/api/notification

+ ```

+ > [!Tip]

+ >

+ > In real time, events are triggered by an external source, such as a third party API that cause the notification bot to send the user a notification. To emulate an event trigger, you can send an event manually via curl commands on terminal.

+ The notification bot app sends a notification as an Adaptive Card to your Teams client:

+ :::image type="content" source="../assets/images/get-started/codespace/notification-bot.png" alt-text="Screenshot shows your notification bot loaded in the Teams client.":::

+ You've successfully created the notification bot and loaded it in the Teams client.

+# [Step-by-step guide](#tab/step-by-step-guide)

+If you would like to learn how to start a project with Teams Toolkit from scratch, let's go through the step-by-step guide.

+Unlike GitHub Codespaces, you need to set up your development environment. Let's start building your notification bot app.

+> [!div class="nextstepaction"]

+> [Start building a notification bot](../sbs-gs-notificationbot.yml)

+If you want to build message extension, go to:

+> [!div class="nextstepaction"]

+> [Build message extension](build-message-extension.md)

+If you want to build basic tab app, go to:

+> [!div class="nextstepaction"]

+> [Build your basic tab app](build-basic-tab-app.md)

+ Title: Choose what suits you

+description: In this module, learn more about the tools and SDKs available for you to build a Microsoft Teams app

+ms.localizationpriority: high

+# Choose what suits you

+You've built your first tab app, notification bot, and message extension. You can build a Teams app as per your app's requirements. Based on factors, such as business needs, development environment, domain knowledge, select the environment and tools to build your app.

+A Teams app offers you the flexibility of choosing your build environment. It includes tools, framework, and languages to approach your app development. Build your Teams app in the environment that's best suited for your app. You can even select a combination. For example, you can use Teams Toolkit to build an app with JavaScript and host it on a SharePoint site.

+This section takes you through the various options that you have for building your Teams app as per your requirements.

+* [Teams collaborative platform](#teams-collaborative-platform)

+* [Tools and SDKs](#tools-and-sdks)

+## Teams collaborative platform

+As a collaborative platform for building apps, Teams offers the full range of apps and tools. Teams platform supports your app development at every stage from planning to distributing it.

+You can use various tools and services to build your app. An example development flow can be:

+1. Plan your project and figure out the requirement.

+1. Design your app. Use Teams UI Kit and UI Library for designing tabs UI.

+1. Build your app with JavaScript using Teams Toolkit.

+1. Extend functionality by adding more Teams capabilities and Microsoft 365 data with :::image type="icon" source="../assets/icons/graph-small-icon.png"::: Microsoft Graph.

+1. Test the app on a developer tenant with sample user data.

+1. Deploy the app to Azure.

+1. Manage and publish the app to Teams store with Developer Portal. Monetize your app with options, such as SaaS offers, in-app purchases, and more.

+## Tools and SDKs

+You can build your Microsoft Teams app with the help of the following tools and SDKs.

+To start building your Teams app, you can select the tools and SDKs based on your app requirements:

+1. **App capabilities**: Choose the capabilities for your app. You can choose single or a combination of capabilities based on your app requirements.

+1. **SDKs you need**: Choose the SDKs based on the capability that you are building for your app. For example, if you're building AI capability for your bot app, you must select Teams AI library.

+1. **UI Components**: Choose the UI components to design your app based on your app capability.

+1. **Languages**: Choose the language in which you want to build your app.

+1. **Recommended Tools**: Choose the tools based on the language that you've selected. You can also use Developer Portal to manage and publish your app. Teams Toolkit allows you to build your app with JavaScript, TypeScript, or C# in Visual Studio Code or Visual Studio.

+| App capabilities | User interactions | Recommended tools | SDKs | Languages |

+|--|-|--|--|--|

+| **Tabs** | A full-screen embedded web experience. | Visual Studio Code or Visual Studio with Teams Toolkit extension, or [TeamsFx CLI](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/cli/user-manual.md) if you prefer using CLI | [Teams JavaScript client library](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true) for UI functionalities, SharePoint Framework (SPFx), and Microsoft Graph SDK.| C#, TypeScript, and JavaScript (including React). |

+| **Bots** | A chat bot that converses with members. |Visual Studio Code or Visual Studio with Teams Toolkit extension, or [TeamsFx CLI](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/cli/user-manual.md) if you prefer using CLI | [TeamsFx SDK](/javascript/api/@microsoft/teamsfx/?view=msteams-client-js-latest&preserve-view=true), [Bot Framework SDK](https://dev.botframework.com/), Teams AI library, and Microsoft Graph SDK. | C#, TypeScript, and JavaScript. |

+| **Message extensions** | Shortcuts for inserting external content into a conversation or taking action on messages. | Visual Studio Code or Visual Studio with Teams Toolkit extension, or [TeamsFx CLI](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/cli/user-manual.md) if you prefer using CLI | [TeamsFx SDK](/javascript/api/@microsoft/teamsfx/?view=msteams-client-js-latest&preserve-view=true), [Bot Framework SDK](https://dev.botframework.com/), Teams AI library, and Microsoft Graph SDK. | C#, TypeScript, and JavaScript. |

+> [!NOTE]

+>

+> * Meeting and calls can deliver a user experience for enabling collaboration, partnership, informed communication, and shared feedback. For more information, see [apps for Teams meetings and calls](../apps-in-teams-meetings/teams-apps-in-meetings.md).

+> * You can also use languages, such as Node.js, Java, Python, and Web technology like HTML and CSS to build your Teams app.

+**Example scenario**: If you want to build a social media dashboard app that sends notifications using TypeScript, consider the following scenario:

+### Explore SDKs

+You can also create and build your Teams app with various SDKs. Teams supports all the SDKs shown in the following image and you can choose SDKs based on your requirements:

+### Explore Tools

+The following tools in the Teams platform helps you during app development:

+| App development phase | Teams platform tools |

+|--|-|

+| Design | Teams UI kit and Teams UI library |

+| Build | Teams Toolkit, Tools and SDKs, and Microsoft Graph |

+| Test, deploy, and publish |Azure Active Directory (Azure AD) and Developer Portal |

+| Distribute | Partner Center and Teams store |

+<!--

+Choose the best tools and SDKs for building a new Teams app.

+* [SDKs and libraries to build Teams app](#sdks-and-libraries-to-build-teams-app)

+* [Azure AD-secured REST APIs](#azure-ad-secured-rest-apis)

+* [Tools](#tools)

+## SDKs and libraries to build Teams app

+### TeamsFx SDK

+TeamsFx helps to reduce your tasks by using Microsoft Teams single sign-on (SSO) and accessing cloud resources down to single line statements with zero configuration.

+> [!div class="nextstepaction"]

+> [TeamsFx SDK](~/toolkit/teamsfx-sdk.md)

+### Teams JavaScript client library

+The Microsoft Teams JavaScript client library (TeamsJS) can help you create hosted experiences in Teams, Microsoft 365 app, and Outlook, where your app content is hosted in an iFrame.

+> [!div class="nextstepaction"]

+> [Teams JavaScript client library](~/tabs/how-to/using-teams-client-library.md)

+### Microsoft Graph SDKs

+The Microsoft Graph SDKs are designed to simplify building high-quality, efficient, and resilient applications that access Microsoft Graph.

+> [!div class="nextstepaction"]

+> [Microsoft Graph SDKs](/graph/sdks/sdks-overview)

+### Bots SDK (v3)

+Build and connect intelligent bots to interact with Microsoft Teams users naturally through chat.

+> [!div class="nextstepaction"]

+> [Bots SDK (v3)](~/resources/bot-v3/bots-overview.md)

+### Message extension SDK (v3)

+Message extensions are a powerful way for users to engage with your app from Microsoft Teams.

+> [!div class="nextstepaction"]

+> [Plan your app](~/resources/messaging-extension-v3/messaging-extensions-overview.md)

+### Microsoft Authentication Library (MSAL)

+The Microsoft Authentication Library (MSAL) enables developers to acquire security tokens from the Microsoft identity platform to authenticate users and access secured web APIs.

+> [!div class="nextstepaction"]

+> [Microsoft Authentication Library (MSAL)](/azure/active-directory/develop/msal-overview)

+### SharePoint Framework (SPFx)

+The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and extending Microsoft Teams and Microsoft Viva.

+> [!div class="nextstepaction"]

+> [SharePoint Framework (SPFx)](/sharepoint/dev/spfx/sharepoint-framework-overview)

+### Live Share SDK

+Live Share is an SDK designed to transform Teams apps into collaborative multi-user experiences without writing any dedicated back-end code.

+> [!div class="nextstepaction"]

+> [Live Share SDK](~/apps-in-teams-meetings/teams-live-share-overview.md)

+## Azure AD-secured REST APIs

+### Microsoft Graph

+Microsoft Graph is the gateway to data and intelligence in Microsoft 365. It provides a unified programmability model that you can use to access the tremendous amount of data in Microsoft 365, Windows, and Enterprise Mobility + Security. Use the wealth of data in Microsoft Graph to build apps for organizations and consumers that interact with millions of users.

+> [!div class="nextstepaction"]

+> [Microsoft Graph](/graph/sdks/sdks-overview)

+### Azure Active Directory

+Azure Active Directory (Azure AD) is a cloud-based identity and access management service. Azure AD enables your employees access external resources, such as Microsoft 365, the Azure portal, and thousands of other SaaS applications. Azure AD also helps them access internal resources like apps on your corporate intranet, and any cloud apps developed for your own organization.

+> [!div class="nextstepaction"]

+> [Azure Active Directory](/azure/active-directory/fundamentals/active-directory-whatis)

+### Azure Bot Service

+Azure Bot Service is a collection of libraries, tools, and services that let you build, test, deploy, and manage intelligent bots.

+> [!div class="nextstepaction"]

+> [Azure Bot Services](/azure/bot-service/bot-service-overview?view=azure-bot-service-4.0)

+### Azure OpenAI

+Azure OpenAI Service provides REST API access to OpenAI's powerful language models including the GPT-3, Codex and Embeddings model series. In addition, the new GPT-4 and ChatGPT (gpt-35-turbo) model series are now available in preview. These models can be easily adapted to your specific task including but not limited to content generation, summarization, semantic search, and natural language to code translation. Users can access the service through REST APIs, Python SDK, or our web-based interface in the Azure OpenAI Studio.

+> [!div class="nextstepaction"]

+> [Azure OpenAI](/azure/cognitive-services/openai/overview)

+## Tools

+### Teams Toolkit

+Teams Toolkit makes it simple to get started with app development for Microsoft Teams using Visual Studio Code and Visual Studio.

+> [!div class="nextstepaction"]

+> [Teams Toolkit](~/toolkit/teams-toolkit-fundamentals.md)

+### Teams Toolkit CLI

+TeamsFx CLI is a text-based command line interface that accelerates Teams application development.

+> [!div class="nextstepaction"]

+> [Teams Toolkit CLI](~/toolkit/teamsfx-cli.md)

+### Developer Portal for Teams

+Developer Portal for Teams is the primary tool for configuring, distributing, and managing your Microsoft Teams apps.

+> [!div class="nextstepaction"]

+> [Developer Portal for Teams](~/concepts/build-and-test/teams-developer-portal.md)

+### Yeoman Generator

+Yo Teams allows you to build Microsoft Teams applications based on TypeScript and node.js on your teams, in your editor of choice, without any external or online dependencies. Including support for extending Teams app to other parts of the Microsoft 365 eco-system.

+If you are already familiar with Yeoman workflow, you can use to build your apps.

+> [!div class="nextstepaction"]

+> [YoTeams Yeoman Generator](https://github.com/pnp/generator-teams/blob/master/docs/docs/tutorials/build-your-first-microsoft-teams-app.md)

+-->

+## See also

+ :::column span="1":::

+ **Plan your app**

+ :::column-end:::

+ :::column span="2":::

+ Understand and map your app use cases to Teams features.

+ > [!div class="nextstepaction"]

+ > [Plan your app](~/concepts/app-fundamentals-overview.md)

+ :::column-end:::

+ :::column span="1":::

+ **Design your app**

+ :::column-end:::

+ :::column span="2":::

+ Design your app UI with Teams UI Kit.

+ > [!div class="nextstepaction"]

+ > [Design your Teams app](~/concepts/design/design-teams-app-process.md)

+ :::column-end:::

+ :::column span="1":::

+ **Build your app**

+ :::column-end:::

+ :::column span="2":::

+ Looking for app development inspiration? Browse our list of real-world scenarios and industry solutions with high fidelity concept mocks to understand the various ways a Teams app can help your users.

+ > [!div class="nextstepaction"]

+ > [See app scenarios](https://adoption.microsoft.com/en-us/extensibility-look-book-gallery/)

+ :::column-end:::

+ :::column span="1":::

+ **Extend your app across Microsoft 365**

+ :::column-end:::

+ :::column span="2":::

+You can preview your Teams apps running in other high usage Microsoft 365 experiences with the latest Teams JavaScript client library.

+ > [!div class="nextstepaction"]

+ > [Extend your app](~/m365-apps/overview.md)

+ :::column-end:::

+ :::column span="1":::

+ **Test your app**

+ :::column-end:::

+ :::column span="2":::

+ After integrating your app with Teams, you must test your app before publishing it.

+ > [!div class="nextstepaction"]

+ > [Test your app](~/concepts/build-and-test/test-app-overview.md)

+ :::column-end:::

+ :::column span="1":::

+ **Distribute your app**

+ :::column-end:::

+ :::column span="2":::

+ You can provide your Teams app to an individual, team, organization, or anyone who wants to use it.

+ > [!div class="nextstepaction"]

+ > [Distribute your app](~/concepts/deploy-and-publish/apps-publish-overview.md)

+ :::column-end:::

+ :::column span="1":::

+ **Monetize your app**

+ :::column-end:::

+ :::column span="2":::

+ Teams store offers app monetizing options, such as SaaS offers and In-app purchases. Choose the best monetizing option suitable for your Teams app.

+ > [!div class="nextstepaction"]

+ > [Monetize your app](~/concepts/deploy-and-publish/appsource/prepare/monetize-overview.md)

+ :::column-end:::

+ :::column span="1":::

+ **Integrate with Teams**

+ :::column-end:::

+ :::column span="2":::

+ Blend the features users love about an existing web app, service, or system with the collaborative features of Teams.

+ > [!div class="nextstepaction"]

+ > [Integrate an existing app](~/samples/integrating-web-apps.md)

+ :::column-end:::

+ :::column span="1":::

+ **A little code goes a long way**

+ :::column-end:::

+ :::column span="2":::

+ You don't need to be an expert programmer to build a great Teams app. Try one of several low-code solutions.

+ > [!div class="nextstepaction"]

+ > [Create a low-code app](~/samples/teams-low-code-solutions.md)

+ :::column-end:::

+description: In this module, learn how to build your first Microsoft Teams app based on language and developement environment, understand app capabilities, SDKs.

+Let's get started with building apps for Microsoft Teams and beyond!

+Experience the Teams app with GitHub Codespaces or walk through the steps to build a basic, real-world Teams app. The Get started also introduces you to common tools, fundamental concepts, and more advanced functionalities.

+* Get up and running quickly with the Microsoft Teams Toolkit.

+* Build tab, scenario-based apps, and message extension with GitHub Codespaces or step-by-step guide.

+* Learn about tutorials and code samples available for building your Teams app.

+* Learn about various tools and SDKs available for building your Teams app.

+## Build your first Teams app

+In this section, learn more how to build Teams app with different capabilities, such as tab, scenario-based bot app, and message extension.

+1. Select the type of Teams app that you want to build:

+ * **Build a basic Teams tab app**: You can get started with building a Teams app with a basic tab app.

+ * **Build a scenario-based Teams bot app**: You can build a Teams app that is suitable for a particular scenario or use-case. For example, a notification bot is suitable to send notifications but not to chat.

+ * **Build message extension Teams app**: You can build a search based message extension Teams app.

+2. Choose your path to build your selected app:

+ * **GitHub Codespaces**: Allows you to run, test, and debug your app in a development environment without the need for any of the setup.

+ * **Step by step guide**: Allows you to create a Teams app from scratch with all development environment setup.

+ :::image type="content" border="false" source="../assets/images/get-started/codescpaces-vs-manual.png" alt-text="Screenshot shows your choices to build Teams app with codespaces and step-by-step guide."lightbox="../assets/images/get-started/codescpaces-vs-manual.png":::

+<!--

+(Note: will be moved to choose what suits you)

+Based on the capabilities you want for your app, choose an appropriate development tool set.

+| App capabilities | Tabs | Bots | Message extensions |

+|--|-|--|--|

+| **User interactions** | A full-screen embedded web experience. | A chat bot that converses with members. | Shortcuts for inserting external content into a conversation or taking action on messages. |

+| **Recommended tools** | Microsoft Visual Studio Code with Teams Toolkit extension, or TeamsFx CLI if you prefer using CLI | Visual Studio Code with Teams Toolkit extension, or TeamsFx CLI | Visual Studio Code with Teams Toolkit extension, or TeamsFx CLI |

+| **SDKs** | TeamsFx SDK for core libs and Teams JavaScript client library for UI functionalities | TeamsFx SDK and Bot Framework SDK | TeamsFx SDK and Bot Framework SDK |

+| **Technology stacks or Languages** | Web technology in general, HTML, CSS, and JavaScript (incl. React). | Node.js, C#, Java, and Python. | Node.js, C#, Java, and Python. |

+If you are already familiar with Yeoman workflow, you can use [YoTeams Yeoman Generator](https://github.com/pnp/generator-teams/blob/master/docs/docs/tutorials/build-your-first-microsoft-teams-app.md) to build your apps.

+-->

+## Next step

+If you want to build a basic tab app, go to:

+> [Build your basic tab app](build-basic-tab-app.md)

+If a bot is what you are interested in, go to:

+> [Start building a bot](build-notification-bot.md)

+If you want to build message extension app, go to:

+> [Build message extension](build-message-extension.md)

+* [Microsoft Teams samples](https://github.com/OfficeDev/Microsoft-Teams-Samples#microsoft-teams-samples)

+* [Git and GitHub resources](/contribute/additional-resources)

+* [Teams app tutorials and code samples](teams-toolkit-tutorial.md)

+| [Dev environment](../toolkit/TeamsFx-multi-env.md#create-a-new-environment-manually-in-visual-studio-code) | A type of development environment that Teams Toolkit creates by default. It represents remote or cloud environment configurations. A project can have multiple remote environments. You can add more dev environments to your project using Teams Toolkit. <br>**See also** [Environment](#e); [Local environment](#l) |

+| [Local environment](../toolkit/TeamsFx-multi-env.md#create-a-new-environment-manually-in-visual-studio-code) | A default development environment created by Teams Toolkit. <br>**See also**: [Environment](#e); [Dev environment](#d) |

+ Title: Teams toolkit tutorial

+description: This tutorial helps you to select the app that you want to build.

+ms.localizationpriority: medium

+# Teams app tutorials and code samples

+You can build your own Microsoft Teams app with different capabilities using the following tutorials and code samples.

+## Teams app tutorials

+Now, let's build your Teams app. You can use the following languages or framework and prepare your development environment for building your app.

+| &nbsp; | **Tab** | **Bot** | **Message extension** |

+| | | | |

+| **Basic app** | ΓÇó [Build your first tab app using JavaScript](../sbs-gs-javascript.yml) <br> ΓÇó [Build your first app using C#](../sbs-gs-csharp.yml) <br> ΓÇó [Build your first app with SPFx](../sbs-gs-spfx.yml) | [Build your first bot app using JavaScript](../sbs-gs-bot.yml) | [Build your first message extension app using JavaScript](../sbs-gs-msgext.yml)|

+| **Scenario-based app** | NA | ΓÇó [Build notification bot with JavaScript](../sbs-gs-notificationbot.yml) <br> ΓÇó [Build command bot with JavaScript](../sbs-gs-commandbot.yml) <br> ΓÇó [Create Teams workflow bot](../sbs-gs-workflow-bot.yml) | NA |

+## Code samples

+Code samples are designed to help you understand and build your own Teams app with different capabilities and scenarios. To learn more about the code samples, see [Microsoft Teams samples](https://github.com/OfficeDev/Microsoft-Teams-Samples).

+## Deploy your app to Azure

+Deployment consists of two steps. First, necessary cloud resources are created (also known as provisioning). Then, your app's code is copied into the created cloud resources. For this tutorial, you'll deploy the bot app.

+<br>

+<br>

+<details>

+<summary>What's the difference between Provision and Deploy?</summary>

+<br>

+The <b>Provision</b> step creates resources in Azure and Microsoft 365 for your app, but no code (HTML, CSS, JavaScript, etc.) is copied to the resources. The <b>Deploy</b> step copies the code for your app to the resources you created during the provision step. It's common to deploy multiple times without provisioning new resources. Since the provision step can take some time to complete, it's separate from the deployment step.

+</details>

+<br>

+# [Visual Studio Code](#tab/vscode)

+Select the Teams Toolkit :::image type="icon" source="~/assets/images/teams-toolkit-v2/teams-toolkit-sidebar-icon.png"::: icon in the Visual Studio Code sidebar.

+1. Select **Provision**.

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/provisioning-commands.png" alt-text="Screenshot showing the selection of provision in the cloud under Teams toolkit.":::

+1. Select a subscription to use for the Azure resources.

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/select-resource.png" alt-text="Screenshot showing the subscription to use for the Azure resources.":::

+ Your app is hosted using Azure resources.

+ A dialog warns you that costs may be incurred when running resources in Azure.

+1. Select **Provision**.

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/provision-warning.png" alt-text="Screenshot showing a dialog box that costs may be incurred when running resources in Azure.":::

+ The provisioning process creates resources in the Azure cloud. It may take some time. You can monitor the progress by watching the dialogs in the bottom-right corner. After a few minutes, you see the following notice:

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/deploy-provision-successmsgext.png" alt-text="Screenshot showing a notice which displays 'hellomsg' successfully provisioned in the cloud.":::

+ If you want, you can view the provisioned resources. For this tutorial, you don't need to view resources.

+ The provisioned resource appears in the **ENVIRONMENT** section.

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/provisioned-resources-env.png" alt-text="Screenshot showing the resource being provisioned in the environment section.":::

+1. Select **Deploy** from the **LIFECYCLE** panel after provisioning is complete.

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/deploy-cloud.png" alt-text="Screenshot showing deploy to cloud.":::

+ As with provisioning, deployment takes some time. You can monitor the process by watching the dialogs in the bottom-right corner. After a few minutes, you see a completion notice.

+Now, you can use the same process to deploy your Bot and Message Extension apps to Azure.

+# [Command Line](#tab/cli)

+In your terminal window:

+1. Run `teamsfx provision`.

+ ``` bash

+ teamsfx provision

+ ```

+ When prompted, select an Azure subscription to use Azure resources.

+ Your app is hosted using Azure resources.

+1. Run `teamsfx deploy`.

+ ``` bash

+ teamsfx deploy

+ ```

+## Run the deployed app

+Once the provisioning and deployment steps are complete:

+1. Open the debug panel (**Ctrl+Shift+D** / **⌘⇧-D** or **View > Run**) from Visual Studio Code.

+1. Select **Launch Remote (Edge)** from the launch configuration drop-down.

+1. Select the **Start debugging (F5)** to launch your app from Azure.

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/launch-remote.png" alt-text="Screenshot showing the launch app remotely.":::

+1. Select **Add**.

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/add-mex-app.png" alt-text="Screenshot showing the app being installed.":::

+ You've successfully added your bot app to the Teams client.

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/first-bot/bot-app-learn-local-debug.png" alt-text="Screenshot shows the learn card in the bot on Teams client.":::

+1. Select **Provision**.

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/provisioning-commands.png" alt-text="Screenshot showing the provisioning commands.":::

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/select-subscription.png" alt-text="Screenshot showing selection of existing Subscription.":::

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/select-resource.png" alt-text="Screenshot showing resources for provisioning.":::

+ The provisioned resource appears in the **ENVIRONMENT** section.

+1. Select **Deploy** from the **LIFECYCLE** panel after provisioning is complete.

+1. Select **Launch Remote (Edge)** from the launch configuration dropdown.

+Deployment consists of two steps. First, necessary cloud resources are created (also known as provisioning). Then, your app's code is copied into the created cloud resources. For this tutorial, you'll deploy the message extension app.

+1. Select **Provision**.

+ The provisioned resource appears in the **ENVIRONMENT** section.

+1. Select **Deploy** from the **LIFECYCLE** panel after provisioning is complete.

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/mex-added-msg.png" alt-text="Screenshot showing a message to try the app now or later.":::

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/app-added-mex1.png" alt-text="Screenshot showing an app sideloaded in Teams.":::

+Each Teams theme has its own color scheme. To handle theme changes automatically, use [color tokens (Fluent UI)](https://react.fluentui.dev/?path=/docs/theme-colors--page) in your design.

+### Extend your Teams app across Microsoft 365

+If you've already built some Teams apps, you can now extend your apps across Microsoft 365 and configure them to be accessible over Outlook and Microsoft 365.

+You've had a short tour through some of Teams platform features. You're ready to see how you can use them to build your app.

+Let's head towards the solution for the user story.

+Microsoft Teams Platform is a powerful, flexible platform for creating apps for Teams. It provides a vast suite of development environments and tools to support app development.

+Collate and map requirements to Teams functionalities:

+| **Capability** | Notification bot | &nbsp; | &nbsp; |

+| **Integration** | &nbsp; | &nbsp; | :::image type="icon" source="assets/icons/graph-small-icon.png"::: Microsoft Graph, Weather API |

+| **Integration point** | &nbsp; | Notification | &nbsp; |

+**Teams app solution**: A Teams *notification bot* app that checks and *sends forecast notification* to *registered users* before their travel date.

+1. Create a notification bot app.

+1. Integrate with :::image type="icon" source="assets/icons/graph-small-icon.png"::: Microsoft Graph for registered users.

+## Dive deeper

+Choose to customize your app with functionalities, such as user authentication and tools, such as Microsoft Graph and Developer Portal.

+Lets go through Teams Developer Documentation based on your requirement for building Teams app:

+| What do you want? | Where to go |

+| --| --|

+| If you're new to Teams app development and want to create a new Teams app | [Get started](get-started/get-started-overview.md) |

+|If you've created app with Teams before and want to learn more about app functionalities | Build modules for [tabs](tabs/what-are-tabs.md), [bots](bots/what-are-bots.md), [message extensions](messaging-extensions/what-are-messaging-extensions.md), [meeting app](apps-in-teams-meetings/teams-apps-in-meetings.md), and more. |

+| If you want to find more information about the tools and SDKs options that are available with Teams | [Explore SDKs](get-started/choose-what-suits-you.md#explore-sdks) and [Explore Tools](get-started/choose-what-suits-you.md#explore-tools) |

+[Extend a Teams personal tab across Microsoft 365 app](m365-apps/extend-m365-teams-personal-tab.md)

+ :::image type="content" source="../msteams-platform/assets/images/overview/developer-scenario-01.png" alt-text="Screenshot shows you the user story as a developer at a travel agency, build apps for travelers.":::

+ :::image type="content" source="../msteams-platform/assets/images/overview/developer-scenario-02.png" alt-text="Screenshot shows you how to develop an app that sends weather forecast of the destination to customers.":::

+ :::image type="content" source="../msteams-platform/assets/images/overview/developer-scenario-03.png" alt-text="Screenshot shows you that customers can know weather conditions and plan ahead.":::

+ :::image type="content" source="../msteams-platform/assets/images/overview/developer-scenario-04.png" alt-text="Screenshot shows you the customers are well-prepared for traveling!":::

+Microsoft Teams offers a collection of apps that are provided by Microsoft or external services. Teams apps can be tabs, bots, or message extensions or any combination of the capabilities. You can extend Teams apps to work on Outlook and Microsoft 365 App, too. These apps expand the value of the Teams collaborative experience for users.

+Apps can be personal or shared. A personal app enables a one-on-one communication and a shared app lets multiple users share app space to collaborate.

+| - On-the-go accessibility <br> - Secure customer data <br> - Ease of communication | - Automate repetitive tasks <br> - Simplify tasks with bots, such as Q&A and help-desk |

+You can build apps with Teams platform by extending app capabilities to fit your needs. Create something brand new for Teams or integrate an existing app.

+Take a look at these example developer personas and app scenarios:

+You can meet all of these scenarios with Teams apps and enhance collaboration within your Teams across Microsoft 365.

+* **Communication and collaboration**

+ Most successful Teams apps involve pulling information from another system, having a conversation about it, and letting users take action. Teams lets you do all these tasks directly within the Teams client. You can even push information to a targeted audience based on an event or action in an external system.

+* **Social interactions**

+ :::image type="content" border="false" source="../msteams-platform/assets/images/overview/scenario-social.png" alt-text="Screenshot shows you the Teams app for building team culture.":::

+* **Common business processes**

+ Tasks like creating and sharing a sales call report, tracking your project timeline, reserving common resources, submitting help desk requests, expense reports are repetitive tasks. They make for effective Teams apps.

+ :::image type="content" border="false" source="../msteams-platform/assets/images/overview/scenario-approval-flow.png" alt-text="Teams app for internal use":::

+* **Personal apps with tabs and bots**

+ One-to-one conversational bots are one of the more open-ended features in Teams. The conversation is just between the bot and your user. You have the flexibility of including task modules to simplify complex sets of information.

+ For example, if your app is a design tool with multiple collaborators, a shared bot that notifies all users helps to build user engagement.

+ Additionally, a chat bot can be an easy replacement for emails and phone calls to IT or HR departments.

+* **Surface existing app**

+ :::image type="content" border="false" source="../msteams-platform/assets/images/overview/scenario-dashboard.png" alt-text="Screenshot shows you the sharePoint site ported as a Teams tab.":::

+* **Teams store advantage**

+ Push your app on Teams store to improve app's availability and you can use it as a marketing opportunity. If you're running a startup, Teams platform helps to increase awareness of your products. Teams store marketplace can be a great platform for large audiences to discover your app.

+* **Build once, run everywhere**

+ Extend your Teams app across Microsoft 365, which provides a streamlined way to deliver cross-platform apps to an expanded user audience: from a single codebase, you can create app experiences tailored for Teams, Outlook, and Microsoft 365 app environments. End users don't have to leave the context of their work to use your app, and administrators benefit from a consolidated management and deployment workflow.

+Ensure to follow [Teams design guidelines](../concepts/design/understand-use-cases.md) to make your app native to Teams. You can't migrate an existing app content to a Teams tab. For more information on app design, see [Fluent Design System](https://react.fluentui.dev/?path=/docs/).

+* [Fluent UI React charting examples](https://63587347138fdad13ed63ccd-omfbjvvebn.chromatic.com/?path=/story/ui-templates-dashboards--default)

+description: Describes Managing Azure Active Directory application in Teams Toolkit.

+Teams Toolkit now manages Azure Active Directory (Azure AD) application with the manifest file as the source of truth during your Teams application development lifecycle.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/manual/add template.png" alt-text="Screenshot shows the template.":::

+ The following list provides different property IDs and their usage:

+ - The `resourceAppId` property is used for different APIs. For `Microsoft Graph` and `Office 365 SharePoint Online`, enter the name directly instead of UUID, and for other APIs use UUID.

+ - The `resourceAccess.id` property is used for different permissions. For `Microsoft Graph` and `Office 365 SharePoint Online`, enter the permission name directly instead of UUID, and for other APIs use UUID.

+ You can use `preAuthorizedApplications` property to authorize a client application to indicate that the API trusts the application. Users don't consent when the client calls exposed API. You can see the following example for this property:

+ "${{AAD_APP_ACCESS_AS_USER_PERMISSION_ID}}"

+3. Update Azure AD application changes for local or remote environment.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/manual/add deploy1.png" alt-text="Screenshot shows the preview.":::

+ 1. Select **local** or **dev** environment.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/manual/add deploy2.png" alt-text="Screenshot shows the environment list.":::

+ 1. Select `Deploy Azure AD Manifest` CodeLens in `aad.local.json` or `aad.dev.json`.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/manual/add deploy3.png" alt-text="Screenshot shows the deploy option highlighted." lightbox="../assets/images/teams-toolkit-v2/manual/add deploy3.png":::

+ 1. The changes for Azure AD application used in local or dev environment are deployed.

+ 1. Additionally, you can open the command palette and select **Teams: Update Azure Active Directory App** to update Azure AD app.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/manual/add deploy4.PNG" alt-text="Screenshot shows the Command Palette option.":::

+The Azure AD manifest file contains placeholder arguments with {{...}} statements, it's replaced during build for different environments. You can reference to environment variables with the placeholder arguments.

+You don't need to enter permanent values in Azure AD manifest template and Azure AD manifest template file supports reference environment variable values. You can use the syntax `${{YOUR_ENV_VARIABLE_NAME}}` in the tool as parameter values to resolve the current environment variable values.

+1. Copy the Azure AD application client ID from `.env.xxx` () file in the `AAD_APP_CLIENT_ID` property.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/manual/add view1.png" alt-text="Screenshot shows the client ID." lightbox="../assets/images/teams-toolkit-v2/manual/add view1.png":::

+1. Go to [Azure portal](https://ms.portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps) and sign in to Microsoft 365 account.

+1. Open [App Registrations page](https://ms.portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps) and search the Azure AD application using client ID that you copied before.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/manual/add view2.png" alt-text="Screenshot shows the client ID under All applications tab.":::

+1. Select Azure AD application from search result to view the detailed information.

+1. In Azure AD app information page, select the **Manifest** menu to view manifest of this application. The schema of the manifest is same as the one in `aad.template.json` file. For more information about manifest, see [Azure AD app manifest](/azure/active-directory/develop/reference-app-manifest).

+ :::image type="content" source="../assets/images/teams-toolkit-v2/manual/add view3.png" alt-text="Screenshot shows the Manifest screen.":::

+1. You can select **Other Menu** to view or configure Azure AD application through its portal.

+ You can create a project with Teams Toolkit that comes with single sign-on (SSO) support by default such as `SSO-enabled tab`. For more information on how to create a new app, see [create new Teams application using Teams Toolkit](create-new-project.md). An Azure AD manifest file is automatically created for you in `aad.template.json`. Teams Toolkit creates or updates the Azure AD application during local development or while you move the application to the cloud.

+1. **To add SSO to your bot or tab**

+ After you create a Teams application without built-in SSO, Teams Toolkit progressively helps you to add SSO for the project. As a result, an Azure AD manifest file is automatically created for you in `aad.template.json`.

+1. **To build locally**

+ - Read the `.env.local` file to find an existing Azure AD application. If an Azure AD application already exists, Teams Toolkit reuses the existing Azure AD application. Otherwise, you need to create a new application using the `aad.template.json` file.

+1. **To provision for cloud resources**

+ - Reads the `.env.{env}` file to find an existing Azure AD application. If an Azure AD application already exists, Teams Toolkit reuses the existing Azure AD application. Otherwise, you need to create a new application using the `aad.template.json` file.

+1. **To build application**

+2. Currently, `requiredResourceAccess` property is used for user readable resource application name or permission name strings only for `Microsoft Graph` and `Office 365 SharePoint Online` APIs. You need to use UUID for other APIs. Perform the following steps to retrieve IDs from Azure portal:

+ 1. Register a new Azure AD application on [Azure portal](https://ms.portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps).

+ 1. Select `API permissions` from the Azure AD application page.

+ 1. Select `add a permission` to add the permission you need.

+ 1. Select `Manifest` from the `requiredResourceAccess` property, where you can find the IDs of API, and the permissions.

+zone_pivot_groups: toolkit-cli

+## TeamsFx Library

+Microsoft Teams Framework (TeamsFx) is a library encapsulating common functionality and integration patterns, such as simplified access to Microsoft Identity. You can build apps for Microsoft Teams with zero configuration.

+Following is a list of main TeamsFx features:

+* **TeamsFx Collaboration**: Lets developers and project owner invite other collaborators to the TeamsFx project. You can collaborate to debug and deploy a TeamsFx project.

+* **TeamsFx CLI**: Accelerates Teams application development. It also enables CI/CD scenario where you can integrate CLI in scripts for automation.

+* **TeamsFx SDK**: Provides access to database, such as the primary TeamsFx code library contains simple authentication for both client and server-side code tailored for Teams developers.

+## Get Started

+Install `teamsfx-cli` from `npm` and run `teamsfx -h` to check all available commands:

+```bash

+ npm install -g @microsoft/teamsfx-cli

+ teamsfx -h

+```

+## Supported commands

+| Command | Description |

+|-|-|

+| `teamsfx new`| Create new Teams application.|

+| `teamsfx add`| Adds features to your Teams application.|

+| `teamsfx account`| Manage cloud service accounts. The supported cloud services are 'Azure' and 'Microsoft 365'. |

+| `teamsfx env` | Manage environments. |

+| `teamsfx provision` | Provision cloud resources in the current application.|

+| `teamsfx deploy` | Deploy the current application. |

+| `teamsfx package` | Build your Teams app into package for publishing.|

+| `teamsfx validate` | Validate the current application.|

+| `teamsfx publish` | Publish the app to Teams.|

+| `teamsfx preview` | Preview the current application. |

+| `teamsfx config` | Manage the configuration data. |

+| `teamsfx permission`| Collaborate with other developers in same project.|

+| `teamsfx update` | Update the specific application manifest file. |

+| `teamsfx upgrade` | Upgrade the project to work with the latest version of Teams Toolkit. |

+## Interactive mode

+`teamsfx` command runs in interactive mode by default. You can work in non-interactive mode by setting `--interactive` flag to `false`.

+## `teamsfx new`

+By default, `teamsfx new` is in interactive mode and guides to create new Teams application. You can work in non-interactive mode by setting `--interactive` flag to `false`.

+| Command | Description |

+|:- |:-|

+| `teamsfx new template` | Create an app from an existing template. |

+| `teamsfx new template list` | List all the available templates. |

+### Parameters for `teamsfx new`

+| Parameter | Requirement | Description |

+|:- |:-|:-|

+|`--app-name` | Yes| Name of your Teams application.|

+|`--interactive`| No | Select the options interactively. The options are `true` and `false` and default value is `true`.|

+|`--capabilities`| No| Choose Teams application capabilities, the options are `tab`, `tab-non-sso`, `tab-spfx`, `bot`, `message-extension`, `notification`, `command-bot`, `sso-launch-page`, `search-app`. The default value is `tab`.|

+|`--programming-language`| No| Programming language for the project. The options are `javascript` or `typescript` and default value is `javascript`.|

+|`--folder`| No | Project directory. A sub folder with your app name is created under this directory. The default value is `./`.|

+|`--spfx-framework-type`| No| Applicable if `SPFx tab` capability is selected. Frontend Framework. The options are `none`, `react` and `minimal`, and default value is `none`.|

+|`--spfx-web part-name`| No | Applicable if `SPFx tab` capability is selected. The default value is "helloworld".|

+|`--bot-host-type-trigger`| No | Applicable if `Notification bot` capability is selected. The options are `http-restify`, `http-functions`, and `timer-functions`. The default value is `http-restify`.|

+### Scenarios for `teamsfx new`

+You can use interactive mode to create a Teams app. The following list provides scenarios on controlling all the parameters with `teamsfx new`:

+* HTTP triggered notification bot with restify server.

+ ```bash

+ teamsfx new --interactive false --capabilities "notification" --bot-host-type-trigger "http-restify" --programming-language "typescript" --folder "./" --app-name MyAppName

+ ```

+* Teams command and response bot.

+ ```bash

+ teamsfx new --interactive false --capabilities "command-bot" --programming-language "typescript" --folder "./" --app-name myAppName

+ ```

+* Tab app hosted on SPFx using React.

+ ```bash

+ teamsfx new --interactive false --app-name newspfxapp --capabilities tab-spfx --spfx-framework-type react

+ ```

+## `teamsfx add`

+The following table lists different features to your Teams application along with their description.

+| Command | Description |

+|:- |:-|

+| `teamsfx add SPFxWebPart` | Auto-hosted SPFx web part tightly integrated with Microsoft Teams. |

+## `teamsfx account`

+The following table lists the cloud service accounts, such as Azure and Microsoft 365.

+| Command | Description |

+|:- |:-|

+| `teamsfx account login` | Log in to the selected cloud service. Service options are Microsoft 365 or Azure. |

+| `teamsfx account logout` | Log out of selected cloud service. Service options are Microsoft 365 or Azure. |

+| `teamsfx account show` | Display all connected cloud accounts information. |

+## `teamsfx env`

+Manage environments.

+| Command | Description |

+|:- |:-|

+| `teamsfx env add` | Add a new environment by copying from the specified environment. |

+| `teamsfx env list` | List all environments. |

+### Scenarios for `teamsfx env`

+Create a new environment by copying from the existing dev environment:

+```bash

+teamsfx env add staging --env dev

+```

+## `teamsfx provision`

+Run the provision stage in `teamsapp.yml`.

+Running `teamsfx provision --env local` triggesr the provision stage in `teamsapp.local.yml` instead.

+### Parameters for `teamsfx provision`

+| Parameters | Required | Description |

+|:- |:-|:-|

+| `--env` | Yes | Select an environment for the project. |

+| `--folder` | No | Select root folder of the project. Defaults to `./` |

+## `teamsfx deploy`

+Run the deploy stage in `teamsapp.yml`.

+Running `teamsfx deploy --env local` triggers the deploy stage in `teamsapp.local.yml` instead.

+### Parameters for `teamsfx deploy`

+| Parameter | Required | Description |

+|:- |:-|:-|

+| `--env` | Yes | Select an environment for the project. |

+| `--folder` | No | Select root folder of the project. Defaults to `./`. |

+## `teamsfx validate`

+Validate the Teams app using manifest schema or validation rules.

+### Parameters for `teamsfx validate`

+| Parameter | Required | Description |

+|:- |:-|:-|

+| `--env` | Yes | Select an existing environment for the project. |

+| `--manifest-path` | No | Select the input Teams app manifest file path, defaults to `${folder}/appPackage/manifest.json`. This manifest is validated using manifest schema. |

+|`--app-package-file-path` | No | Select the zipped Teams app package path, defaults to `${folder}/appPackage/build/appPackage.${env}.zip`. This package is validated with validation rules. |

+| `--folder` | No | Select root folder of the project. Defaults to `./`. |

+## `teamsfx publish`

+Run the publish stage in `teamsapp.yml`.

+Running `teamsfx publish --env local` triggers the publish stage in `teamsapp.local.yml` instead.

+### Parameters for `teamsfx publish`

+| Parameter | Required | Description |

+|:- |:-|:-|

+| `--env` | Yes | Select an environment for the project. |

+| `--folder` | No |Select root folder of the project. Defaults to `./`. |

+## `teamsfx package`

+Build your Teams app into a package for publishing.

+### Parameters for `teamsfx package`

+|Parameter | Required | Description |

+|:- |:-|:-|

+| `--env` | Yes | Select an existing environment for the project. |

+| `--manifest-file-path` | No | Select the Teams app manifest template path, defaults to `${folder}/appPackage/manifest.json`. |

+| `--output-zip-path` | No | Select the output path of the zipped app package, defaults to `${folder}/appPackage/build/appPackage.${env}.zip`. |

+| `--output-manifest-path` | No | Select the output path of the generated manifest path, defaults to `${folder}/appPackage/build/manifest.${env}.json`. |

+| `--folder` | No | Select root folder of the project. Defaults to `./`. |

+## `teamsfx preview`

+Preview the current application.

+### Parameters for `teamsfx preview`

+| Parameter | Required | Description |

+|:- | :- | :- |

+| `--folder` | No | Select root folder of the project. Defaults to `./`. |

+| `--env` | No | Select an existing env for the project. Defaults to `local`. |

+| `--manifest-file-path` | No | Select the Teams app `manifest file path`, defaults to `${folder}/appPackage/manifest.json`. |

+| `--run-command` | No | The command to start local service. Work for `local` environment only. If undefined, `teamsfx` uses the auto detected one from project type (`npm run dev:teamsfx` or `dotnet run` or `func start`). If empty, `teamsfx` skips starting local service. |

+| `--running-pattern` | No | The ready signal output that service is launched. Work for `local` environment only. If undefined, `teamsfx` uses the default common pattern ("started/successfully/finished/crashed/failed"). If empty, `teamsfx` treats process start as ready signal. |

+| `--open-only` | No | Work for `local` environment only. If true, directly open web client without launching local service. Defaults to `false`. |

+| `--m365-host` | No | Preview the application in Teams, Outlook, or the Microsoft 365 app [string] [choices: `teams`, `outlook`, `office`]. Defaults to `teams`. |

+| `--browser` | No | Select browser to open Teams web client [string] [choices: `chrome`, `edge`, `default`]. Defaults to `default`. |

+| `--browser-arg` | No | Argument to pass to the browser, for example, --browser-args="--guest. |

+| `--exec-path` | No | The paths that are added to the system environment variable PATH when the command is executed, defaults to `${folder}/devTools/func`. |

+### Scenarios for `teamsfx preview`

+The following list provides the common scenarios for `teamsfx preview`:

+`teamsfx preview` expects users have already ran `teamsfx provision` and `teamsfx deploy`.

+* Local Preview

+ Dependencies:

+ * Node.js

+ * .NET SDK

+ * Azure Functions Core Tools

+ ```typescript

+ teamsfx preview --env --local

+ teamsfx preview --env --local --browser chrome

+ ```

+* Remote Preview

+ ```typescript

+ teamsfx preview --env --remote

+ teamsfx preview --env --remote --browser edge

+ ```

+ > [!NOTE]

+ > The logs of the background services, such as React is saved in ~/.fx/cli-log/local-preview/.

+## `teamsfx config`

+Configure user settings.

+### Parameters for `teamsfx config`

+| Command | Description |

+|:- |:-|

+| `teamsfx config get [option]` | Get user global settings. |

+| `teamsfx config set` | Set user settings. |

+### Scenarios for `teamsfx config`

+* Stop sending telemetry data

+ ```typescript

+ teamsfx config set telemetry off

+ ```

+## `teamsfx permission`

+Check, grant, and list user permission.

+| Command | Description |

+|:- |:-|

+| `teamsfx permission grant` | Check user's permission. |

+| `teamsfx permission status` | Show permission status for the project. |

+### Parameters for `teamsfx permission grant`

+| Parameter | Required | Description |

+|:- |:-|:-|

+| `--env` | Yes | Select an existing environment for the project. |

+| `--folder` | No | Select root folder of the project. Defaults to `./`. |

+| `--email` | No | Input email address of collaborator. |

+| `--teams-app-manifest` | No | Manifest of Your Teams app. |

+| `--aad-app-manifest` | No | Manifest of your Azure Active Directory (Azure AD) app. |

+### Parameters for `teamsfx permission status`

+| Parameter | Required | Description |

+|:- |:-|:-|

+| `--env` | Yes | Select an existing environment for the project. |

+| `--folder` | No | Select root folder of the project. Defaults to `./`. |

+| `--teams-app-manifest` | No | Manifest of Your Teams app. |

+| `--aad-app-manifest` | No | Manifest of your Azure AD app. |

+| `--list-all-collaborators` | No | To list all collaborators. |

+### Scenarios for `teamsfx permission`

+* Grant Permission

+ Project creator and collaborators can use `teamsfx` permission grant command to add a new collaborator to the project:

+ ```typescript

+ teamsfx permission grant --env dev --email user-email@user-tenant.com

+ ```

+ After you receive the required permission, project creator and collaborators can share the project with the new collaborator by GitHub, and the new collaborator can have all the permissions for Microsoft 365 account.

+* Show Permission Status

+ Project creator and collaborators can use `teamsfx permission status` command to view Microsoft 365 account permission for specific env:

+ ```typescript

+ teamsfx permission status --env dev

+ ```

+* List All Collaborators

+ Project creator and collaborators can use `teamsfx permission status` command to view all collaborators for specific env:

+ ```typescript

+ teamsfx permission status --env dev --list-all-collaborators

+ ```

+## `teamsfx update`

+Update the specific application manifest file.

+| Command | Description |

+|:- |:-|

+| `teamsfx update aad-app` | Update the Azure AD App in the current application. |

+| `teamsfx update teams-app` | Update the Teams App manifest to Teams Developer Portal. |

+### Parameters for `teamsfx update aad-app`

+| Parameter | Required |Description |

+|:- |:-|:-|

+| `--env` | Yes | Select an existing environment for the project. |

+| `--folder` | No | Select root folder of the project. Defaults to `./` |

+| `--manifest-file-path` | No | Enter the Azure AD app manifest template file path, it's a relative path to project root folder, defaults to `./aad.manifest.json`. |

+### Parameters for `teamsfx update teams-app`

+| Parameter | Required | Description |

+|:- |:-|:-|

+| `--env` | Yes | Select an existing environment for the project. |

+| `--folder` | No | Select root folder of the project. Defaults to `./` |

+| `--manifest-file-path` | No | Enter the Teams app manifest template file path, it's a relative path to project root folder, defaults to `./appPackage/manifest.json`. |

+## `teamsfx upgrade`

+Upgrade the project to work with the latest version of Teams Toolkit.

+### Parameters for `teamsfx upgrade`

+|Parameter | Required | Description |

+|:- |:-|:-|

+| `--force` | No | Force upgrade the project to work with the latest version of Teams Toolkit. Defaults to `false`. |

+Multiple developers can work together to debug, provision, and deploy the same Teams Toolkit project, but it requires manually setting the right permissions of Teams App and Microsoft Azure Active Directory (Azure AD). Teams Toolkit's collaboration feature simplifies this process between developers and project owners.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/select-teams-toolkit.png" alt-text="Screenshot shows the select teams toolkit from activity bar.":::

+ 1. In **ENVIRONMENT** section, select Manage Collaborators button as shown in the following image:

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/add collaborators.png" alt-text="Screenshot shows the collaborators.":::

+ 1. Select **Add App Owners** to add other Microsoft 365 account email address as collaborator:

+ * Select the apps you want to add app owners for.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/add-owner.png" alt-text="Screenshot shows the Add project owner.":::

+ * (Optional) Select and confirm Teams `manifest.json` file.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/manifest.png" alt-text="Screenshot shows the Teams manifest file.":::

+ * (Optional) Select and confirm Azure AD app `aad.manifest.json` file.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/browse-1.png" alt-text="Screenshot shows the Browse option.":::

+ * Input the M365 account email address you want to add as app owner. The account to be added must be on the same tenant as project owner for remote debug as shown in the image.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/confirm-owner.png" alt-text="Screenshot shows the owner name to confirm.":::

+ 1. Select **List App Owners** to view collaborators in current environment:

+ * Select the apps you want to add app owners for.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/add-owner.png" alt-text="Screenshot shows the Add project owner.":::

+ * (Optional) Select and confirm Teams `manifest.json` file.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/manifest.png" alt-text="Screenshot shows the Teams manifest file.":::

+ * (Optional) Select and confirm Azure AD app `aad.manifest.json` file.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/browse-1.png" alt-text="Screenshot shows the Browse option.":::

+ * Input the M365 account email address you want to add as app owner. The account to be added must be on the same tenant as project owner for remote debug as shown in the image.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/confirm-owner.png" alt-text="Screenshot shows the owner name to confirm.":::

+ * Then you can see collaborators listed in the output channel as shown in following image:

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/list of collaborators.png" alt-text="Screenshot shows the collaborators list.":::

+ 1. Push the project to GitHub.

+ > The newly added collaborators don't receive any notification. The project owner needs to notify collaborator.

+ 2. Log in to Microsoft 365 account.

+ 3. Log in to Azure account, it has contributor permission required by the project for all Azure resources.

+## Remove Collaborator

+Removing collaborators requires the following manual steps:

+ * Go to [Azure Active Directory](https://ms.portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps), select **App registration** from left panel, and find your Azure AD app.

+ * Select **Owners** from left panel in Azure AD app management page.

+ > * Azure account must have contributor role for the subscription so that developers can work together to provision and deploy TeamsFx project.

+# Environments in Teams Toolkit

+Teams Toolkit provides a way to run and test your app in different targets for deployment like dev, staging, production, or locally on your machine. To do this, Teams Toolkit includes an optional set of features that orchestrate the configuration of these different targets using information in environment files. The environment files represent a collection of all the resources of a deployment target. Teams Toolkit project templates include two default environment groupings: one for running the app on your machine named 'local' and another for hosting somewhere else named 'dev'. You can rename the 'dev' environment and add additional environments using the Environments window or manually with a new `.env.{environment-name}` file. You can't rename the local environment.

+By adding different environment files, Teams Toolkit can help automate the provisioning of resources needed to run the app and deploy your code to those resources. You can have a single set of deployment rules for number of environments using these features.

+## Using environment files with Teams Toolkit

+Teams Toolkit uses a naming convention for the environment files such as: `.env.{environment-name}`. Using the toolkit's lifecycle commands (Provision, Deploy, or Publish) you're required to provide an environment name. The name of the environment should be the same as the value chosen for `{environment-name}` when creating the environment file.

+> [!NOTE]

+> You can define environment variables for Teams Toolkit in your current shell environment which override any values in the `.env` file during a naming conflict.

+### Environment file location

+By default, Teams Toolkit doesn't load any env variables, and just proceed with executing actions and write outputs to `./env/.env.dev`. If `environmentFolderPath` isn't defined, Teams Toolkit don't load any environment variables from the `.env` file, and executes actions assuming the env is dev. The outputs is written to `./env/.env.dev`.

+## Local environments

+To build a Teams app, few resources such as app registrations and Teams client are hosted in the cloud while other resources such as the application logic can be hosted locally to make testing changes easier during app development. All the Teams Toolkit project templates and samples are configured with a `local` environment. The local environment has `./env/.env.local` and `./env/.env.local.user` files and helps you to run your app with a locally hosted web server. When using Visual Studio Code (VS code) and Visual Studio (VS), the project templates and samples are set up to support debugging with breakpoints.

+To differentiate between a local environment and all other environments, you can create a separate project file called `teamsapp.local.yml` in the same directory as `teamsapp.yml`.

+## Create a new environment manually in Visual Studio Code

+Each project can have one local environment but multiple remote environments. After you create a project, Teams Toolkit configures the following default environments:

+* **local** environment to represent the local machine environment configuration.

+* **dev** environment to represent the remote or cloud environment configuration.

+To create a new environment:

+1. Open your Teams app project in Visual Studio Code.

+1. Select the Teams Toolkit icon from the Visual Studio Code activity bar.

+1. Select the **+** icon in the **ENVIRONMENT** section.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/create-new-environment.png" alt-text="Screenshot shows the plus icon highlighted in the Environment section.":::

+1. Enter a name for the environment and select **Enter**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/environment-name.png" alt-text="Screenshot shows where to enter the environment name.":::

+## Targeting an environment

+When you have multiple environments and select the Production, dev, or local menu items, Teams Toolkit prompts you to select a target environment.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/target-environment.png" alt-text="Screenshot shows the Production environment selected.":::

+description: In this module, learn how to edit, preview, and customize Teams App Manifest in different environment.

+The Teams app manifest describes how your app integrates into Teams. After scaffolding, the default manifest file is available at `appPackage/manifest.json`. The manifest file contains some environment variables with format of `${{XX_XX}}`, and the actual values are resolved using Teams Toolkit with env files like `env/.env.dev` and `env/.env.local`.

+To preview manifest with actual content, Teams Toolkit generates preview manifest files under `appPackage/build` folder:

+ΓööΓöÇΓöÇΓöÇappPackage

+ ΓööΓöÇΓöÇΓöÇbuild

+You can preview the manifest file in local and remove environments.

+## Preview manifest file in local environment

+To preview manifest file in local environment, you can press F5 to run local debug. After you generate the environment variables in `env/.env.local`, the app package and preview manifest is built under `appPackage/build` folder.

+You can also trigger `Zip Teams App Package` from tree view or `Teams: Zip Teams app Package` from command palette to generate previewed manifest and app package.

+## Preview manifest file in remote environment

+To preview manifest file in remote environment, you can trigger `Provision` from tree view or `Teams: Provision in the cloud` from command palette. It generates environment variables for remote Teams app, build app package and preview manifest under `appPackage/build` folder.

+You can also trigger Zip Teams App Package from tree view or `Teams: Zip Teams app Package` from command palette to generate preview manifest and app package.

+## Customize Teams app manifest for Visual Studio Code

+During local debug or provision, Teams Toolkit loads manifest from `appPackage/manifest.json`, and resolves manifest by environment variables defined in `env/.env.xx`, then creates or updates Teams app in [Teams Developer Portal](https://dev.teams.microsoft.com/home).

+1. You can define your own manifest.json file in `teamsapp.yml` and `teamsapp.local.yml`.

+For example, you can put your manifest.json file in `test/test.json`, and update `manifestPath` parameters in yaml files.

+ ```text

+ - uses: teamsApp/zipAppPackage # Build Teams app package with latest env value

+ with:

+ manifestPath: ./test/test.json # Path to manifest template

+ outputZipPath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip

+ outputJsonPath: ./appPackage/build/manifest.${{TEAMSFX_ENV}}.json

+ ```

+1. You can define your own environment variables. The default manifest.json contains some placeholders with format of ${{xx_xx}}. You can define your own environment variables and add placeholders in manifest.json file.

+For example, you can customize app description by defining a new environment variable in env/.env.xx file, and update manifest.json with corresponding placeholder.

+ `.env.dev`

+ ```text

+ TEAMS_APP_DESCRIPTION=This is an amazing app

+ ```

+ `manifest.json`

+ ```text

+ {

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

+ "manifestVersion": "1.16",

+ "description": {

+ "short": "${{TEAMS_APP_DESCRIPTION}}",

+ "full": "Full description of tab0418"

+ },

+ }

+ ```

+## Validate Application

+After customization, you may want to validate your manifest or app package. You can trigger `Validate Application` from tree view, or `Teams: ValidateApplication` from command palette. There are two options, `Validate using manifest schema` or `Validate app package using validation rules`.

+### Validate using manifest schema

+This option renders `appPackage/manifest.json` with environment variables, and then validates your manifest with its schema.

+CLI command:

+```text

+teamsfx validate --manifest-path YOUR-PATH-TO-MANIFEST

+```

+If you meet `MissingEnvironmentVariablesError`, it means that Teams Toolkit can't find corresponding environment variables defined in manifest.json. You may need to run Provision or F5 to generate environment variables, or manually update `.env.xx` file to fulfill the value.

+**Validate app package using validation rules**

+This option validates the zipped app package with validation rules.

+CLI command:

+```text

+teamsfx validate --app-package-file-path YOUR-PATH-TO-APP-PACKAGE

+```

+It has additional validation rules than manifest schema. For example, if static tab section has entityId "conversations" and name, the following error appears:

+## Update Teams app

+After you've previewed and validated the manifest file, you can sync your local changes to Teams Developer Portal by triggering `Teams: Update Teams app` command from command palette:

+CLI command:

+```text

+teamsfx update teams-app

+* Preview only: Local manifest file is overwritten according to current configuration.

+* Preview and update: Local manifest file is overwritten according to current configuration and also updated to Teams platform.

+* Cancel: No action is taken.

+In `appPackage/manifest.json`, you can go to CodeLens to preview the values for `local` and `dev` environment.

+> Provision the environment or execute local debug to generate environment variables.

+You can go to `.env` file by selecting the CodeLens, which provide a dropdown list with all the environment names. After selecting one environment, the corresponding `.env` file opens.

+To preview values for all the environment, you can hover over the placeholder. It shows a list of environment names and corresponding values. If you haven't provisioned the environment or executed the local debug, the environment variable may not exist. Select `Trigger Teams: Provision in the cloud command to see placeholder value` or `Trigger local debug to see placeholder value`.

+* [Teams Toolkit Overview](teams-toolkit-fundamentals.md).

+description: Learn how toolkit allows bootstrap sample access to existing APIs and the list of different authentication types.

+Teams Toolkit allows you to access and use existing APIs for building Teams apps. Your organization or a third party might have developed these APIs.

+## Add API connection using Teams Toolkit

+1. Select **Teams Toolkit** from the Visual Studio Code activity bar.

+1. Select **View How-to Guides** in the **DEVELOPMENT** section.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/manual/select-feature123_1.png" alt-text="Screenshot shows the selection of View How-to guides.":::

+1. From the dropdown list that appears, select **Connect to an API**. You'll be redirected to the respective How-to Guide.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/add-API/api-select-features_1.png" alt-text="Screenshot shows the selection of Connect to an API option in the View How-to Guides list.":::

+ |**Development** | **How-to Guide** |

+ |-|-|

+ |Connect to an API | [How to integrate API Connection with your Teams app](https://github.com/OfficeDev/TeamsFx/wiki/Integrate-API-Connection-with-your-Teams-app) |

+description: In this module, learn how to add capabilities of Teams Toolkit.

+Teams Toolkit project templates focus on getting started with an app that implements a single [app capability](~/concepts/design/app-structure.md). However, apps can have multiple capabilities. We've created a set of How-to guides with the steps needed to add different capabilities to a project created with Teams Toolkit.

+## How-to guides for adding capabilities

+|**Capability** | **How-to Guide** |

+|-|-|

+| Configure Tab Capability | [How to configure Tab capability within your Teams app](https://github.com/OfficeDev/TeamsFx/wiki/How-to-configure-Tab-capability-within-your-Teams-app) |

+| Configure Bot Capability | [How to configure Bot capability within your Teams app](https://github.com/OfficeDev/TeamsFx/wiki/How-to-configure-Bot-capability-within-your-Teams-app) |

+| Configure Message Extension Capability | [How to configure Message Extension capability within your Teams app](https://github.com/OfficeDev/TeamsFx/wiki/How-to-configure-Message-Extension-capability-within-your-Teams-app) |

+| Configure Outlook add-in Capability | [How to configure Outlook add-in capability within your Teams app](https://github.com/OfficeDev/TeamsFx/wiki/Configure-Outlook-Add-in-capability-within-your-Teams-app) |

+## Open the guides from Teams Toolkit

+ 1. Select **View How-to Guides** in the **DEVELOPMENT** section.

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/manual/select-feature123_1.png" alt-text="Screenshot shows View How-to Guides under Development highlighted.":::

+ 1. From the dropdown list that appears, select the capability you want to add to your app. You'll be redirected to the respective How-to Guide.

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/manual/notification-add-capabilities_1.png" alt-text="Screenshot shows the capabilities listed.":::

+ :::image type="content" source="../assets/images/teams-toolkit-v2/manual/add-capabilities-command-palette_1.png" alt-text="Screenshot shows the Command Palette option.":::

+ 1. Select **Teams: View How-to Guides**.

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/manual/teams-add-features_1.png" alt-text="Screenshot shows option to add capabilities by using command palette.":::

+ 1. From the dropdown list that appears, select the capability you want to add to your app. You'll be redirected to the respective How-to Guide.

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/manual/notification-add-capabilities_1.png" alt-text="Screenshot shows the capabilities list.":::

+* [Walkthrough building an app that responds to chat commands](../sbs-gs-commandbot.yml).

+* [Walkthrough building an app that sends chat messages](../sbs-gs-notificationbot.yml).

+* [Walkthrough building an app with a workflow in chat](../sbs-gs-workflow-bot.yml)

+description: Learn how to add resources of Teams Toolkit and about advantages, limitations, and capabilities.

+ 1. Select **View How-to Guides** in the **DEVELOPMENT** section.

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/manual/select-feature123_1.png" alt-text="Screenshot shows View How-to Guides under Development highlighted.":::

+ 1. From the dropdown list that appears, select the cloud service integration you want to add to your app. You'll be redirected to the respective How-to Guide.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/manual/cloud-service-integration.png" alt-text="Screenshot shows the Cloud service integration options in View How-to Guides.":::

+ |**Cloud service integration** | **How-to Guide** |

+ |-|-|

+ |Integrate with Azure Functions | [How to Integrate Azure Functions with your Teams app](https://github.com/OfficeDev/TeamsFx/wiki/How-to-integrate-Azure-Functions-with-your-Teams-app) |

+ |Integrate with Azure SQL Database | [How to Integrate Azure SQL Database with your Teams app](https://github.com/OfficeDev/TeamsFx/wiki/Integrate-Azure-SQL-Database-with-your-Teams-app) |

+ |Integrate with Azure API Management | [How to Integrate Azure API Management with your Teams App and export the api to power app](https://github.com/OfficeDev/TeamsFx/wiki/Integrate-Azure-API-Management-with-your-Teams-App-and-export-the-api-to-power-app) |

+ |Integrate with Azure Key Vault | [How to Integrate Azure Key Vault with your Teams app](https://github.com/OfficeDev/TeamsFx/wiki/Integrate-Azure-Key-Vault-with-your-Teams-app) |

+### To add cloud resources by using Command Palette

+ 1. Open your Teams app project in Visual Studio Code.

+ 1. Select **View** > **Command Palette...** or **Ctrl+Shift+P**.

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/manual/cloud/Teams-add-features_1.png" alt-text="Screenshot shows the Command Palette option under View.":::

+ 1. Select **View How-to Guides** in the **DEVELOPMENT** section.

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/manual/select-feature123_1.png" alt-text="Screenshot shows the View How-to Guides option highlighted in Teams Toolkit activity bar.":::

+ 1. From the dropdown list that appears, select the capability you want to add to your app. You'll be redirected to the respective How-to Guide.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/manual/cloud-service-integration.png" alt-text="Screenshot shows the capabilities in View How-to Guides list.":::

+ |**Cloud service integration** | **How-to Guide** |

+ |-|-|

+ |Integrate with Azure Functions | [How to Integrate Azure Functions with your Teams app](https://github.com/OfficeDev/TeamsFx/wiki/How-to-integrate-Azure-Functions-with-your-Teams-app) |

+ |Integrate with Azure SQL Database | [How to Integrate Azure SQL Database with your Teams app](https://github.com/OfficeDev/TeamsFx/wiki/Integrate-Azure-SQL-Database-with-your-Teams-app) |

+ |Integrate with Azure API Management | [How to Integrate Azure API Management with your Teams App and export the api to power app](https://github.com/OfficeDev/TeamsFx/wiki/Integrate-Azure-API-Management-with-your-Teams-App-and-export-the-api-to-power-app) |

+ |Integrate with Azure Key Vault | [How to Integrate Azure Key Vault with your Teams app](https://github.com/OfficeDev/TeamsFx/wiki/Integrate-Azure-Key-Vault-with-your-Teams-app) |

+description: In this module, learn how to add single sign-on (SSO) of Teams Toolkit, enable SSO support, and update your application to use SSO.

+Microsoft Teams provides single sign-on (SSO) function for an app to obtain signed in Teams user token to access Microsoft Graph and other APIs. Teams Toolkit facilitates the interaction by abstracting few of the Microsoft Azure Active Directory (Azure AD) flows and integrations behind simple APIs. This enables you to add SSO features easily to your Teams app.

+3. Select **View How-to Guides** in the **DEVELOPMENT** section.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/manual/select-feature123_1.png" alt-text="Screenshot shows the selection of View How-to guides option. ":::

+4. From the dropdown list, select **Develop Single Sign-On Experience in Teams**. You'll be redirected to the respective How-to guide.

+ |**Development** | **How-to Guide** |

+ | -- | --|

+ |Develop Single Sign-on Experience in Teams | [How to Develop Single Sign-on Experience](https://github.com/OfficeDev/TeamsFx/wiki/Develop-single-sign-on-experience-in-Teams) |

+Teams Toolkit in Visual Studio allows you to create a Teams app using C# using the Blazor framework. You can create tab app, bot app, and message extension app in a C# build environment.

+Azure Functions integrates with an array of [cloud services](add-resource.md) to provide feature-rich implementations. The following are the common scenarios for Azure Functions:

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

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

+You can build a new Teams project by selecting **Create a New App** in Teams Toolkit. You can start from built-in Teams app templates or start from official Teams app samples in Teams Toolkit. What's more, Teams Toolkit v5 supports to start with Outlook Add-in templates to build your own Outlook Add-ins.

+To start with Teams capabilities, you can create the following types of Teams app:

+| **Scenario-based Teams apps** | This group of templates are designed for particular abstracted business scenarios that your teams app can serve for. For example notification bot, command bot, SSO-enabled tab, or Dashboard tab app. |

+| **Basic Teams apps** | Basic Teams apps are just hello world Teams tab, bot, or message extension that you can create and customize based on your requirement. |

+| **Extend Teams App across Microsoft 365** | This group of Teams app can be installed and run on Outlook and Office.com. |

+The process to create a new Teams app is similar for all types of apps.

+To create a basic Teams app:

+1. Select the **Teams Toolkit** > **Create a New App**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/first-tab/create-project.png" alt-text="Screenshot shows the Create New Project button in the Teams Toolkit sidebar.":::

+1. In this example, select **Tab** as app capability.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/first-tab/select-capabilities-tabapp_1.png" alt-text="Screenshot shows the App Capability to select.":::

+1. Select **Basic Tab** as app capability.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/first-tab/select-basic-tab.png" alt-text="Screenshot shows to select App Feature using a Tab as Basic Tab.":::

+ :::image type="content" source="../assets/images/teams-toolkit-v2/first-tab/select-language-tab_1.png" alt-text="Screenshot shows the programming language to select.":::

+ :::image type="content" source="../assets/images/teams-toolkit-v2/first-tab/select-default-location.png" alt-text="Screenshot shows the default location option to select.":::

+ :::image type="content" source="../assets/images/teams-toolkit-v2/first-tab/select-browse_1.png" alt-text="Screenshot shows the Browse option highlighted to browse for storage.":::

+ :::image type="content" source="../assets/images/teams-toolkit-v2/select-folder_1.png" alt-text="Screenshot shows the Select Folder option highlighted.":::

+ 1. Enter a suitable name for your app, such as helloworld, as the application name. Ensure that you use only alphanumeric characters. Press **Enter**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/first-tab/enter-name-tab1.png" alt-text="Screenshot shows where to enter the app name.":::

+ :::image type="content" source="../assets/images/teams-toolkit-v2/first-tab/tab-app-created.png" alt-text="Screenshot shows the app created." lightbox="../assets/images/teams-toolkit-v2/first-tab/tab-app-created.png":::

+| `.vscode` | Settings for VS Code to build and debug your Teams app. |

+| `appPackage` | Teams manifest file and icon files that Teams used to recognize your Teams app. |

+| `env` | Stores different environment parameters. |

+| `infra` | Azure `bicep` template files. Used for deploy your Teams app to Azure. |

+| `src` | Source code for the Tab capability, including your front-end app, UI components and the privacy notice, terms of use, |

+| `src\components\` | The main app which handles the initialization and routing. |

+| `src\index.jsx` | Entry point for the front-end app. |

+| `teamsapp.yml` | This configuration file defines the Teams Toolkit behavior for provision, deploy, and publish lifecycle. You can customize this file to change the behavior of Teams Toolkit in each lifecycle. |

+| `teamsapp.local.yml` | This overrides teamsapp.yml with actions that enable local execution and debugging. |

+| `.vscode` | Settings for VS Code to build and debug your Teams app. |

+| `appPackage` | Teams manifest file and icon files that Teams used to recognized your Teams app. |

+| `env` | Stores different environment parameters. |

+| `infra` | Azure `bicep` template files. Used for deploy your Teams app to Azure. |

+| `teamsapp.yml` | This configuration file defines the Teams Toolkit behavior for provision, deploy, and publish lifecycle. You can customize this file to change the behavior of Teams Toolkit in each lifecycle. |

+| `teamsapp.local.yml` | This overrides teamsapp.yml with actions that enable local execution and debugging. |

+The core notification implementation is stored in the **src** folder and it contains:

+| `src\adaptiveCards\` | Templates for Adaptive Card. |

+description: In this module, learn how Visual Studio Code and Teams Toolkit work during debugging process. Also learn how to register and configure your Teams app.

+The debugging process involves the `.vscode/launch.json` and `.vscode/tasks.json` files to configure the debuggers in Visual Studio Code. Visual Studio Code launches Node debugger and browser debugger, and Microsoft Edge or Google Chrome launches a new browser instance.

+The debugging process workflow is as follows:

+4. The browser debugger, Microsoft Edge or Google Chrome, launches a new browser instance and opens a webpage to load Teams client.

+## Validate prerequisites

+Teams Toolkit checks the following prerequisites during the debugging process:

+* Teams Toolkit checks if Node.js is installed. If Node.js isn't installed, the debugging terminates.

+* Teams Toolkit checks if Node.js version matches the versions defined in `package.json` file. If the version doesn't match, Teams Toolkit displays a warning message in output channel.

+* Teams Toolkit checks if custom app uploading or sideloading for your developer tenant is turned on. If it isn't turned on, the debugging terminates.

+* Teams Toolkit checks if ports are available. If tab, bot, message extension, and Azure Functions ports are unavailable, the debugging terminates.

+For more information on validating prerequisites, see [Validate prerequisites task](https://aka.ms/teamsfx-tasks/check-prerequisites).

+## Start local tunnel

+For bot and message extension, Teams Toolkit starts a local tunnel service to make the bot messaging endpoint public. For more information, see [Start local tunnel task](https://aka.ms/teamsfx-tasks/local-tunnel).

+## Create the debug resources

+Teams Toolkit executes lifecycle `provision` defined in `teamsapp.local.yml` to create Teams app related resources required for debugging. For more information, see [Provision task](https://aka.ms/teamsfx-tasks/provision) and [available actions](https://aka.ms/teamsfx-actions).

+## Build project

+Teams Toolkit executes lifecycle `deploy` defined in `teamsapp.local.yml` to build the project. For more information, see [Deploy task](https://aka.ms/teamsfx-tasks/deploy) and [available actions](https://aka.ms/teamsfx-actions).

+You can view the project folders and files under **Explorer** in Visual Studio Code after debugging. The following table lists the files related to debugging:

+| `teamsapp.local.yml` | The main Teams Toolkit project file for debugging. | This file defines the life cycles and actions required for debugging. |

+| `env/.env.local` | Environment variables file for Teams Toolkit project. | The values of each environment variable are consumed or generated during debugging. |

+| `.localConfigs` | Environment variables file for the app code. | The values of each environment variable are generated during debugging. |

+For more information on the project folder structure, see [Teams Toolkit project](https://aka.ms/teamsfx-v5.0-guide#teams-toolkit-project).

+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 sideloads the Teams app. You can preview your Teams app in Teams web client locally after debugging.

+> Your old Teams Toolkit project gets upgraded to use new tasks, for more information, see [tasks doc](https://aka.ms/teamsfx-tasks).

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/debug-run.png" alt-text="Screenshot shows the Browser option.":::

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/start-debugging.png" alt-text="Screenshot shows the Start debugging option.":::

+3. Select **Create a Microsoft 365 Testing Tenant** to Microsoft 365 account.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/microsoft365-signin.png" alt-text="Screenshot shows the Sign in option highlighted.":::

+ > You can select **Create a Microsoft 365 Testing Tenant** to learn about Microsoft 365 Developer Program. Your default web browser opens to let you sign in to your Microsoft 365 account with your credentials.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/install-certificate.png" alt-text="Screenshot shows the certificate to install.":::

+5. Select **Yes** in the **Security Warning** dialog.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/development-certificate.png" alt-text="Screenshot shows the certification authority to install the certificate.":::

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/debug-run.png" alt-text="Screenshot shows the Browser lists.":::

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/start-debugging.png" alt-text="Screenshot shows the Debug option.":::

+3. Select **Sign in**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/microsoft365-signin.png" alt-text="Screenshot shows the Sign in option highlighted in the dialog.":::

+ > You can select **Create a Microsoft 365 Testing Tenant** to learn about Microsoft 365 Developer Program. Your default web browser opens to let you sign in to your Microsoft 365 account using your credentials.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/install-certificate.png" alt-text="Screenshot shows the dialog to Install the certificate.":::

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/mac-settings.png" alt-text="Screenshot shows the mac sign in dialog.":::

+Teams Toolkit launches your browser instance and opens a webpage to load Teams client.

+Runs tasks as defined in `.vscode/tasks.json`. By default, the task name is `"Start application"`. If your project contains more than one component, there'll be more dependent tasks.

+```JSON

+// .vscode/tasks.json

+{

+ "label": "Start application",

+ "dependsOn": [

+ "Start Frontend", // Tab

+ "Start Backend", // Azure Functions

+ "Start Bot" // Bot or message extensions

+ ]

+}

+```

+| Tab | **Attach to Frontend (Edge)** or **Attach to Frontend (Chrome)** | msedge or chrome |

+| Bot or message extensions | **Attach to Bot** | node |

+| Azure Functions | **Attach to Backend** | node |

+The following table lists the debug configuration names and types for project with bot app, Azure Functions, and without tab app:

+| Component | Debug configuration name | Debug configuration type |

+| Bot or message extension | **Launch Bot (Edge)** or **Launch Bot (Chrome)** | msedge or chrome |

+| Bot or message extension | **Attach to Bot** | node |

+| Azure Functions | **Attach to Backend** | node |

+The configuration **Attach to Frontend** or **Launch App** launches Microsoft Edge or Chrome browser instance to load Teams client in web page. After the Teams client is loaded, Teams sideloads the Teams app that is controlled by the sideloading URL defined in the launch configurations [Microsoft Teams](https://teams.microsoft.com/l/app/>${localTeamsAppId}?installAppPackage=true&webjoin=true&${account-hint}). When Teams client loads in the web browser, select **Add** or select an option from the dropdown as per your requirement.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/hello-local-debug.png" alt-text="Screenshot shows the Add local debug." lightbox="../assets/images/teams-toolkit-v2/debug/hello-local-debug.png":::

+description: In this module, learn how to debug your Teams app and key features of Teams Toolkit.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/toggle-points.png" alt-text="Screenshot shows the toggle breakpoints." lightbox="../assets/images/teams-toolkit-v2/debug/toggle-points.png":::

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/hot-reload.png" alt-text="Screenshot shows the hot reload for source codes." lightbox="../assets/images/teams-toolkit-v2/debug/hot-reload.png":::

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/stop-debug.png" alt-text="Screenshot shows the stop debugging option.":::

+Ensure that you can toggle breakpoints on the source codes of tabs, bots, message extensions, and Azure Functions. For more information, see [Toggle breakpoints](#toggle-breakpoints)

+Teams Toolkit allows you to customize the debug settings to create your tab or bot. For more information on the full list of customizable options, see [debug settings doc](https://github.com/OfficeDev/TeamsFx/wiki/Teams-Toolkit-Visual-Studio-Code-v5.0-Prerelease-Guide#debug-f5-in-visual-studio-code).

+Teams Toolkit creates Azure AD apps for projects with bot by default using [`botAadApp/create`](https://github.com/OfficeDev/TeamsFx/wiki/Available-actions-in-Teams-Toolkit#botaadappcreate) action.

+To use an existing bot, you can set `BOT_ID` and `SECRET_BOT_PASSWORD` in `env/.env.local` with your own values.

+Use the following code snippet example to set up an existing bot for debugging:

+```javascript

+# env/.env.local

+# Built-in environment variables

+TEAMSFX_ENV=local

+# Generated during provision, you can also add your own variables.

+BOT_ID={YOUR_OWN_BOT_ID}

+...

+SECRET_BOT_PASSWORD={YOUR_OWN_BOT_PASSWORD}

+...

+```

+In `.vscode/tasks.json` under `"Validate prerequisites"` > `"args"` > `"prerequisites"`, update the prerequisite checks you want to skip.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/skip-prerequisite-checks.png" alt-text="Screenshot shows the skip prerequisite checks.":::

+1. In `teamsapp.local.yml`, remove `devCert` from `devTool/install` action (or remove the whole `devTool/install` action if it only contains `devCert`).

+1. In `teamsapp.local.yml`, set `"SSL_CRT_FILE"` and `"SSL_KEY_FILE"` in `file/createOrUpdateEnvironmentFile` action to your certificate file path and key file path.

+ ```yml

+ # teamsapp.local.yml

+ ...

+ # Remove devCert or this whole action

+ - uses: devTool/install

+ with:

+ # devCert:

+ ...

+ - uses: file/createOrUpdateEnvironmentFile

+ with:

+ target: ./.localSettings

+ envs:

+ ...

+ # set your own cert values

+ SSL_CRT_FILE: ...

+ SSL_KEY_FILE: ...

+ ...

+ ```

+<summary><b>Customize npm install command</b></summary>

+In `teamsapp.local.yml`, edit `args` of `cli/runNpmCommand` action.

+```yml

+# teamsapp.local.yml

+...

+ - uses: cli/runNpmCommand

+ with:

+ # edit the npm command args

+ args: install --no-audit

+...

+```

+ 1. Search for `"3978"` across your project and look for appearances in `tasks.json` and `index.js`.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/modify-ports-bot.png" alt-text="Screenshot shows the search result to replace your port for bot.":::

+ 1. Search for `"53000"` across your project and look for appearances in `teamsapp.local.yml` and `tasks.json`.

+

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/modify-ports-tab.png" alt-text="Screenshot shows the search result to replace your port for tab.":::

+Teams Toolkit by default creates a set of `teamsApp` actions to manage app package. You can update those in `teamsapp.local.yml` to use your own app package.

+```yml

+# teamsapp.local.yml

+...

+ - uses: teamsApp/create # Creates a Teams app

+ ...

+ - uses: teamsApp/validateManifest # Validate using manifest schema

+ ...

+ - uses: teamsApp/zipAppPackage # Build Teams app package with latest env value

+ ...

+ - uses: teamsApp/validateAppPackage # Validate app package using validation rules

+ ...

+ - uses: teamsApp/update # Apply the Teams app manifest to an existing Teams app in Teams Developer Portal.

+ ...

+...

+```

+In `.vscode/tasks.json` under `"Start Teams App Locally"`, you can update `"Start Local tunnel"`.

+```javascript

+# env/.env.local

+# Built-in environment variables

+TEAMSFX_ENV=local

+...

+BOT_DOMAIN={YOUR_OWN_TUNNEL_DOMAIN}

+BOT_ENDPOINT={YOUR_OWN_TUNNEL_URL}

+...

+```

+```javascript

+# env/.env.local

+# Built-in environment variables

+TEAMSFX_ENV=local

+...

+BOT_DOMAIN={YOUR_OWN_TUNNEL_DOMAIN}

+BOT_ENDPOINT={YOUR_OWN_TUNNEL_URL}

+...

+```

+You can add environment variables to `.localConfigs` file for tab, bot, message extension, and Azure Functions. Teams Toolkit loads the environment variables you added to start services during local debug.

+ // "Attach to Backend"

+ "preLaunchTask": "Start Teams App Locally",

+ "label": "Start application",

+description: Learn how to deploy app to the cloud, Azure, or SharePoint using Teams Toolkit in Visual Studio Code.

+You can deploy to the following types of cloud resources:

+* Azure App Services

+* Azure Functions

+* Azure Storage (as static website)

+* SharePoint

+> [!NOTE]

+> Before you deploy app code to Azure cloud, you need to successfully complete the [provisioning of cloud resources](provision.md).

+### Sign in to your Azure account

+Use this account to access the Microsoft Azure portal and to provision new cloud resources to support your app. Before deploying your app to Azure App Service, Azure Functions, or Azure Storage, you must sign in to your Azure account.

+1. Open Visual Studio Code.

+1. Open the project folder in which you created app.

+1. Select the Teams Toolkit icon in the sidebar.

+1. Select **Sign in to Azure**.

+ > [!TIP]

+ > If you have the Azure Account extension installed and are using the same account, you can skip this step. Use the same account as you're using in other extensions.

+ Your default web browser opens to let you sign in to the account.

+1. Sign in to your Azure account using your credentials.

+1. Close the browser when prompted and return to Visual Studio Code.

+The ACCOUNTS section of the sidebar shows the two accounts separately. It also lists the number of usable Azure subscriptions available to you. Ensure you have at least one usable Azure subscription available. If not, sign out and use a different account.

+Now you're ready to deploy your app to Azure!

+Congratulations, you've created a Teams app! Now let's go ahead and learn how to deploy one of the apps to Azure using the Teams Toolkit.

+## Deploy to Azure

+1. Select **Deploy** from the **LIFECYCLE** section in the left pane.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/deploy_to_the_cloud_button.png" alt-text="Screenshot showing the selection of Deploy.":::

+1. Select an environment. (If there's only one environment, this step is skipped.)

+1. Select **Deploy**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/click_deploy.png" alt-text="Screenshot showing the selection of Deploy under Visual Studio Code.":::

+1. Select the Teams Toolkit icon in the sidebar.

+### Customize deploy lifecycle in Teams

+To customize the deployment process, you can edit the deploy sections in 'teamsapp.yml'.

+**cli/runNpmCommand**

+This action executes npm commands under specified directory with parameters.

+**Sample**

+```text

+ - uses: cli/runNpmCommand

+ with:

+ workingDirectory: ./src

+ args: install

+```

+**Parameters**

+| Parameter | Description | Required | Default value |

+|workingDirectory | Represents the folder where you want to run the command. If your input value is a relative path, it's relative to the workingDirectory. | No | Project root |

+|args | Command arguments| Yes | |

+**cli/runDotnetCommand**

+This action executes dotnet commands under specified directory with parameters.

+**Sample**

+```text

+ - uses: cli/runDotnetCommand

+ with:

+ workingDirectory: ./src

+ execPath: /YOU_DOTNET_INSTALL_PATH

+ args: publish --configuration Release --runtime win-x86 --self-contained

+```

+**Parameters**

+| Parameter | Description | Required | Default value |

+|-|-|||

+|workingDirectory | Represents the folder where you want to run the command. If your input value is a relative path, it's relative to the workingDirectory. | No | Project root |

+|args | npm Command arguments| Yes | |

+|execPath | Executor path | No | System PATH |

+**cli/runNpxCommand**

+**Sample**

+```text

+ - uses: cli/runNpxCommand

+ with:

+ workingDirectory: ./src

+ args: gulp package-solution --ship --no-color

+```

+**Parameters**

+| Parameter | Description | Required | Default value |

+|-|-|||

+|workingDirectory | Represents the folder where you want to run the command. If your input value is a relative path, it's relative to the workingDirectory. | No | Project root |

+|args | Command arguments| Yes | |

+**azureAppService/zipDeploy**

+**Sample**

+```text

+ - uses: azureAppService/zipDeploy

+ with:

+ workingDirectory: ./src

+ artifactFolder: .

+ ignoreFile: ./.webappignore

+ resourceId: ${{BOT_AZURE_APP_SERVICE_RESOURCE_ID}}

+ dryRun: false

+ outputZipFile: ./.deployment/deployment.zip

+```

+**Parameters**

+| Parameter | Description | Required | Default value |

+|-|-|||

+|workingDirectory | Represents the folder where you want to upload the artifact. If your input value is a relative path, it's relative to the project root. | No | Project root |

+|artifactFolder | Represents the folder where you want to upload the artifact. If your input value is a relative path, it's relative to the workingDirectory.| Yes | |

+|ignoreFile | Specifies the file path of ignoreFile used during upload. This file can be utilized to exclude certain files or folders from the artifactFolder. Its syntax is similar to the Git's ignore. | No | null |

+| resourceId | Indicates the resource ID of an Azure App Service. It's generated automatically after running the provision command. If you already have an Azure App Service, you can find its [resource ID](https://azurelessons.com/how-to-find-resource-id-in-azure-portal/) | Yes | |

+|dryRun | You can set the dryRun parameter to true if you only want to test the preparation of the upload and don't intend to deploy it. This helps you verify that the packaging zip file is correct. | No | false |

+| outputZipFile | Indicates the path of the zip file for the packaged artifact folder. It's relative to the workingDirectory. This file is reconstructed during deployment, reflecting all folders and files in your artifactFolder, and removing any nonexistent files or folders. | No | ./.deployment/deployment.zip |

+**azureFunctions/zipDeploy**

+This action upload and deploy the project to Azure Functions using the [zip deploy feature](/azure/azure-functions/deployment-zip-push).

+**Sample**

+```text

+ - uses: azureFunctions/zipDeploy

+ with:

+ workingDirectory: ./src

+ artifactFolder: .

+ ignoreFile: ./.webappignore

+ resourceId: ${{BOT_AZURE_APP_SERVICE_RESOURCE_ID}}

+ dryRun: false

+ outputZipFile: ./.deployment/deployment.zip

+```

+**Parameters**

+| Parameter | Description | Required | Default value |

+|-|-|||

+|workingDirectory | Represents the folder where you want to upload the artifact. If your input value is a relative path, it's relative to the project root. |No | Project root |

+|artifactFolder | Represents the folder where you want to upload the artifact. If your input value is a relative path, it's relative to the workingDirectory.| Yes | |

+|ignoreFile | Specifies the file path of ignoreFile used during upload. This file can be utilized to exclude certain files or folders from the artifactFolder. Its syntax is similar to the Git's ignore. | No | null |

+| resourceId | Indicates the resource ID of an Azure Functions. It's generated automatically after running the provision command. If you already have an Azure Functions, you can find its [resource ID](https://azurelessons.com/how-to-find-resource-id-in-azure-portal/) in the Azure portal.| Yes | |

+|dryRun | You can set the dryRun parameter to true if you only want to test the preparation of the upload and don't intend to deploy it. This helps you verify that the packaging zip file is correct. | No | false |

+| outputZipFile | Indicates the path of the zip file for the packaged artifact folder. It's relative to the workingDirectory. This file is reconstructed during deployment, reflecting all folders and files in your artifactFolder, and removing any nonexistent files or folders. | No | ./.deployment/deployment.zip |

+**azureStorage/deploy**

+This action upload and deploy the project to Azure Storage.

+**Sample**

+```text

+ - uses: azureStorage/deploy

+ with:

+ workingDirectory: ./src

+ artifactFolder: .

+ ignoreFile: ./.webappignore

+ resourceId: ${{BOT_AZURE_APP_SERVICE_RESOURCE_ID}}

+```

+**Parameters**

+| Parameter | Description | Required | Default value |

+|-|-|||

+|workingDirectory | Represents the folder where you want to upload the artifact. If your input value is a relative path, it's relative to the project root. |No | Project root |

+|artifactFolder | Represents the folder where you want to upload the artifact. If your input value is a relative path, it's relative to the workingDirectory.| Yes | |

+|ignoreFile | Specifies the file path of ignoreFile used during upload. This file can be utilized to exclude certain files or folders from the artifactFolder. Its syntax is similar to the Git's ignore. | No | null |

+| resourceId | Indicates the resource ID of an Azure Functions. It's generated automatically after running the provision command. If you already have an Azure Functions, you can find its [resource ID](https://azurelessons.com/how-to-find-resource-id-in-azure-portal/) in the Azure portal.| Yes | |

+**spfx/deploy**

+This action upload and deploys generated sppkg to SharePoint app catalog. You can create tenant app catalog manually or by setting createAppCatalogIfNotExist to true if you don't have one in current M365 tenant.

+**Sample**

+```text

+- uses: spfx/deploy

+ with:

+ createAppCatalogIfNotExist: false

+ packageSolutionPath: ./src/config/package-solution.json

+```

+**Parameters**

+| Parameter | Description | Required | Default value |

+|-|-|||

+|createAppCatalogIfNotExist | If the value is true, this action creates tenant app catalog first if not exist. |No | False |

+|packageSolutionPath | Path to package-solution.json in SPFx project. This action honors the configuration to get target sppkg.| Yes | |

+description: Learn about Teams Toolkit UI elements and task pane for Visual Studio Code.

+> [!IMPORTANT]

+>

+> We've introduced the Teams Toolkit v5 extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> [Teams Toolkit v4](toolkit-v4/teams-toolkit-fundamentals-v4.md) extension will soon be deprecated.

+You can explore the look and feel of Teams Toolkit within the Visual Studio Code.

+This section gives you a tour of Teams Toolkit and its features.

+| 2 | **How-to Guides** | Access the how-to guides for app scenario and app development. |

+| 3 | **Create a New App** | Create a new Teams app based on your requirement. |

+| 4 | **View Samples** | Select and build existing app samples based on common use cases for a Teams app. |

+| 5 | ΓÇó **New File** <br> ΓÇó **Open File** <br> ΓÇó **Open Folder** <br> ΓÇó **Clone Git Repository** | ΓÇó Create a new file. <br> ΓÇó Open an existing file. <br> ΓÇó Open an existing folder. <br> ΓÇó Clone an Git repository of your app project. |

+ :::image type="content" source="../assets/videos/javascript-bot-app1_1.gif" alt-text="Graphical representation shows the steps to create a Teams app.":::

+After you create a new Teams app project, the directory structure of the app appears in the left pane and the **`README`** file in the right pane.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/accounts1_1.png" alt-text="Screenshot shows the Accounts section.":::

+ * **Sign in to Microsoft 365**: Use your Microsoft 365 work or school account with a valid E5 subscription for building your app. If you don't have a valid account, you can join [Microsoft 365 developer program](https://developer.microsoft.com/microsoft-365/dev-program) to get a free account before you start.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/environment1.png" alt-text="Screenshot shows the Environment section.":::

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/development-vsc.png" alt-text="Screenshot shows the Development section.":::

+ To create and debug your Teams app, you need the following features:

+ * **Create a New App**: Use the Teams Toolkit wizard to prepare project scaffolding for app development.

+ * **View Samples**: Select any of the Teams Toolkit's sample apps. The toolkit downloads the app code from GitHub and you can build the sample app.

+ * **View How-to Guides**: Select to view Teams app scenario guides and development guides.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/deployment1.png" alt-text="Screenshot shows the Lifecycle section.":::

+ * **Provision**: Allocate Azure resources for your application. Teams Toolkit is integrated with Azure Resource Manager, and it registers your app with Azure AD automatically.

+ * **Deploy**: Deploy the source code to Azure.

+ * **Publish**: Publish your developed app and distribute it to scopes, such as personal, team, channel, or organization.

+ :::column-end:::

+ :::column span="":::

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/utility.png" alt-text="Screenshot shows the the Utility section.":::

+ :::column-end:::

+ :::column span="":::

+ To create an app package, validate an app, and publish in Developer Portal, you need the following features:

+ * **Zip Teams App Package**: Create the app package that can be uploaded to Teams or Developer Portal. It contains the app manifest and app icons.

+

+ * **Validate Application**: Validate if Teams manifest file is in right schema or validate the Teams app package.

+ * **Open Developer Portal to Publish**: Use Developer Portal to publish and manage your Teams app.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/help-and-feedback1.png" alt-text="Screenshot shows the Help section.":::

+ * **Get Started**: View Teams Toolkit Get started help within Visual Studio Code.

+ * **Report Issues on GitHub**: Select to access GitHub page and raise any issues.

+ :::column-end:::

+ :::column span="":::

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/feedback.png" alt-text="Screenshot shows the Feedback section.":::

+ :::column-end:::

+ :::column span="":::

+ You can help us improve by giving us your feedbacks!

+1. Select **View How-to Guides** from the Teams Toolkit task pane under **DEVELOPMENT** section.

+ The **View How-to Guides** menu appears.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/view-how-to-guides.png" alt-text="Screenshot shows the how-to guides menu options." lightbox="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/view-how-to-guides.png":::

+[Prepare to build apps using Teams Toolkit](build-environments.md)

+description: In this module, see FAQ for Teams Toolkit using Visual Studio Code.

+> [!IMPORTANT]

+>

+> We've introduced the Teams Toolkit v5 extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> [Teams Toolkit v4](toolkit-v4/teams-toolkit-fundamentals-v4.md) extension will soon be deprecated.

+If you get errors with Teams Toolkit in Visual Studio Code, you can select **Get Help** on the error notification to go to the related document. If you're using TeamsFx CLI, there'll be a hyperlink at the end of error message that points to the help doc. You can also view [provision help doc](https://aka.ms/teamsfx-arm-help) directly.

+1. Switch subscription in current account or sign out and select a new subscription.

+2. If you've already provisioned current environment, you need to create a new environment and perform provision because ARM doesn't support moving resources.

+> Currently, the building Teams app with SharePoint framework with Teams Toolkit doesn't have direct integration with Azure, the contents in the doc doesn't apply to SPFx-based apps.

+description: Learn about installation of Teams Toolkit of different versions in Visual Studio Code and marketplace.

+> [!IMPORTANT]

+>

+> We've introduced the Teams Toolkit v5 extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> [Teams Toolkit v4](toolkit-v4/teams-toolkit-fundamentals-v4.md) extension will soon be deprecated.

+This section helps you to know about the prerequisites, install Teams Toolkit for Visual Studio Code, and install a different version of Teams Toolkit.

+## Prerequisites

+Before installing Teams Toolkit for Visual Studio Code, you need to [download and install Visual Studio Code](https://code.visualstudio.com/Download).

+1. Select **View** > **Extensions** or **Ctrl+Shift+X**. You can also open extensions by selecting the extensions :::image type="icon" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/vsc-ext-icon.png" border="false"::: icon from the Visual Studio Code activity bar.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/install toolkit-1_2.png" alt-text="Screenshot shows the Extensions option under View.":::

+ The EXTENSIONS: MARKETPLACE pane appears.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/install-toolkit-2_2_1.png" alt-text="Screenshot show the Teams Toolkit listed in the search result.":::

+ Teams Toolkit appears in the search result.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/select-install-ttk_2.png" alt-text="Screenshot shows the Install option to install toolkit v5.":::

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/after-install_2.jpg" alt-text="Screenshot shows the Teams Toolkit icon in the activity bar.":::

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/install-ttk-marketplace_1.png" alt-text="Screenshot shows the Teams Toolkit Marketplace screen.":::

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/Install-ttk_1.png" alt-text="Screenshot shows the Install option.":::

+1. In the pop-up window, select **Open**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/ttk-in-vsc_1.png" alt-text="Screenshot shows how to select Teams Toolkit in Visual Studio Code." lightbox="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/ttk-in-vsc_1.png":::

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/select-install-ttk_2.png" alt-text="Screenshot shows the selection of Install option in Teams Toolkit.":::

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/after-install_2.jpg" alt-text="Screenshot shows the Teams Toolkit icon in the activity bar after installation.":::

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/TeamsToolkit-search.png" alt-text="Screenshot shows the Teams Toolkit search and the result.":::

+1. Select **Install Another Version...** from the dropdown list.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/InstallAnotherVersion.jpg" alt-text="Screenshot shows the option to select other version of Visual Studio Code.":::

+## Next step

+description: Learn how to do provision cloud resources using Teams Toolkit in Visual Studio Code, resource creation and customize resource provision.

+You can trigger the provision command in Teams Toolkit or TeamsFx CLI to create or update resources for your application. The steps of the provision command are defined in the `teamsapp.yml` file, under `provision` property. You can view the file to understand what resources are created.

+## Provision actions

+The following list shows the actions designed for provision.

+### teamsApp/create

+#### What it is

+If the environment variable that stores Teams app ID is empty or the app ID isn't found from Teams Developer Portal, then this action creates a new Teams app.

+#### What resource it operates

+Teams app in Teams Developer Portal.

+#### How to use it

+```yml

+ - uses: teamsApp/create

+ with:

+ # #required. Name of Teams app

+ name: <your-preferred-app-name>

+ # Write the information of created resources into environment file for the specified environment variable(s).

+ writeToEnvironmentFile:

+ # The id for Teams app

+ teamsAppId: <your-preferred-env-var-name>

+### teamsApp/update

+#### What it is

+Apply the Teams app manifest to an existing Teams app in Teams Developer Portal. It uses the app ID in manifest.json file to determine which Teams app to update.

+#### What resource it operates

+Teams app in Teams Developer Portal.

+#### How to use it

+```yml

+- uses: teamsApp/update

+ with:

+ # Required. Relative path to the yaml file. This is the path for built zip file.

+ appPackagePath: <path-to-teams-app-package-file>

+### teamsApp/validateManifest

+#### What it is

+This action renders Teams app manifest template with environment variables and validates Teams app manifest file using its schema.

+#### What resource it operates

+N/A

+#### How to use it

+```yml

+ - uses: teamsApp/validate

+ with:

+ # Required. Relative path to the yaml file. Path to Teams app manifest file

+ manifestPath: <path-to-manifest-file>

+### teamsApp/validateAppPackage

+#### What it is

+This action validates Teams app package using validation rules.

+#### What resource it operates

+N/A

+#### How to use it

+```yml

+ - uses: teamsApp/validateAppPackage

+ with:

+ # Required. Relative path to the yaml file. This is the path for built zip file.

+ appPackagePath: <path-to-teams-app-package-file>

+```

+### teamsApp/zipAppPackage

+#### What it is

+This action renders Teams app manifest template with environment variables and compresses the manifest file with two icons into a zip file.

+#### What resource it operates

+N/A

+#### How to use it

+```yml

+- uses: teamsApp/zipAppPackage

+ with:

+ # Required. Relative path to the yaml file. This is the path for Teams app manifest file. Environment variables in manifest will be replaced before apply to AAD app.

+ manifestPath: <path-to-manifest-file>

+ # Required. Relative path to the yaml file. This is the path for built zip file.

+ outputZipPath: <path-to-generated-zip-file>

+ # Required. Relative path to the yaml file. This is the path for built manifest json file.

+ outputJsonPath: <path-to-generated-json-file>

+```

+### teamsApp/publishAppPackage

+#### What it is

+This action publishes built Teams app zip file to tenant app catalog.

+#### What resource it operates

+Teams app in Microsoft 365 tenant app catalog.

+#### How to use it

+```yml

+- uses: teamsApp/publishAppPackage

+ with:

+ # Required. Relative path to this file. This is the path for built zip file.

+ appPackagePath: <path-to-teams-app-package>

+ # Write the information of created resources into environment file for the specified environment variable(s).

+ writeToEnvironmentFile:

+ # The Teams app id in tenant app catalog.

+ publishedAppId: <your-preferred-env-var-name>

+```

+### aadApp/create

+#### What it is

+This action creates a new Azure Active Directory (Azure AD) application to authenticate users if the environment variable that stores clientId is empty.

+#### What resource it operates

+Azure AD in your Microsoft 365 tenant.

+#### How to use it

+```yml

+- uses: aadApp/create

+ with:

+ # Required. The AAD app's display name. When you run aadApp/update, the Azure Active Directory AD app name will be updated based on the definition in manifest. If you don't want to change the name, make sure the name in AAD manifest is the same with the name defined here.

+ name: <your-application-name>

+ # Required. If the value is false, the action will not generate client secret for you

+ generateClientSecret: true

+ # Required. Specifies what Microsoft accounts are supported for the current application. Supported values are: `AzureADMyOrg`, `AzureADMultipleOrgs`, `AzureADandPersonalMicrosoftAccount`, `PersonalMicrosoftAccount`.

+ signInAudience: "AzureADMyOrg"

+ # Write the information of created resources into environment file for the specified environment variable(s).

+ writeToEnvironmentFile:

+ # Required. The client (application) ID of Azure Active Directory AD application. The action will refer the environment variable defined here to determine whether to create a new AAD app.

+ clientId: <your-preferred-env-var-name>

+ # Required when `generateClientSecret` is `true`. The action will refer the environment variable defined here to determine whether to create a new client secret. It's recommended to add `SECRET_` prefix to the environment variable name so it will be stored to the .env.{envName}.user environment file.

+ clientSecret: <your-preferred-env-var-name>

+ # Required. The object ID of AAD application

+ objectId: <your-preferred-env-var-name>

+ # Optional. The tenant ID of AAD tenant

+ tenantId: <your-preferred-env-var-name>

+ # Optional. The AAD authority

+ authority: <your-preferred-env-var-name>

+ # Optional. The host name of AAD authority

+ authorityHost: <your-preferred-env-var-name>

+```

+

+### aadApp/update

+#### What it is

+This action updates your Azure AD application based on give Azure AD app manifest. It refers to the ID property in Azure AD app manifest to determine which Azure AD app to update.

+#### What resource it operates

+Azure AD in your Microsoft 365 tenant.

+#### How to use it

+```yaml

+- uses: aadApp/update

+ with:

+ # Required. Relative path to the yaml file. Path to the AAD app manifest. Environment variables in manifest will be replaced before apply to AAD app.

+ manifestPath: <path-to-manifest-file>

+ # Required. Relative path to the yaml folder. This action will output the final AAD manifest used to update AAD app to this path.

+ outputFilePath : <path-to-output-file>

+```

+### botAadApp/create

+#### What it is

+This action creates a new or reuses an existing Azure AD application for bot.

+#### What resource it operates

+Azure AD in your Microsoft 365 tenant.

+#### How to use it

+```yml

+- uses: botAadApp/create

+ with:

+ # Required. The AAD app's display name

+ name: <your-app-name>

+ writeToEnvironmentFile:

+ # The The AAD app's client id created for bot.

+ botId: <your-preferred-env-var-name>

+ # The The AAD app's client secret created for bot.

+ botPassword: <your-preferred-env-var-name>

+```

+

+### arm/deploy

+#### What it is

+This action deploys given ARM templates in parallel.

+#### What resource it operates

+Azure subscription.

+#### How to use it

+```yml

+- uses: arm/deploy

+ with:

+ # Required. You can use built-in environment variable `AZURE_SUBSCRIPTION_ID` here. TeamsFx will ask you select one subscription if its value is empty. You're free to reference other environment variable here, but TeamsFx will not ask you to select subscription if it's empty in this case.

+ subscriptionId: ${{AZURE_SUBSCRIPTION_ID}}

+ # Required. You can use built-in environment variable `AZURE_RESOURCE_GROUP_NAME` here. TeamsFx will ask you to select or create one resource group if its value is empty. You're free to reference other environment variable here, but TeamsFx will not ask you to select or create resource group if it's empty in this case.

+ resourceGroupName: ${{AZURE_RESOURCE_GROUP_NAME}}

+ # Required. The ARM templates to be deployed.

+ templates:

+ # Required. Relative path to the yaml file.

+ - path: <path-to-arm-template>

+ # Optional. Relative path to the yaml file. TeamsFx will replace the environment variable reference with real value before deploy ARM template.

+ parameters: <path-to-arm-template-parameter>

+ # Required. Name of the ARM template deployment.

+ deploymentName: <arm-deployment-name>

+ # Optional. Teams Toolkit will download this bicep CLI version from github for you, will use bicep CLI in PATH if you remove this config.

+ bicepCliVersion: v0.9.1

+```

+### azureStorage/enableStaticWebsite

+#### What it is

+This action enables static website setting in Azure Storage.

+#### What resource it operates

+Azure Storage.

+#### How to use it

+```yml

+- uses: azureStorage/enableStaticWebsite

+ with:

+ # Required. The resource id of Azure Storage

+ storageResourceId: ${{<env-name-of-azure-storage-resource-id>}}

+ # Required. The path to index page.

+ indexPage: <path-to-index-page>

+ # Required. The path to error page.

+ errorPage: <path-to-error-page>

+```

+### script

+#### What it is

+This action executes a user-defined script.

+#### What resource it operates

+N/A

+#### How to use it

+```yml

+- uses: script

+ with:

+ # Required. Command to run or path to the script. Succeeds if exit code is 0. '::set-teamsfx-env key=value' is a special command to generate output variables into .env file, in this case, "mykey=abc" will be added the output in the corresponding .env file.

+ run: $my_key="abc"; echo "::set-teamsfx-env mykey=${my_key}"

+ # Optional. Available values are: bash, sh, powershell(Powershell Desktop), pwsh(powershell core), cmd. If omitted, it defaults to bash on Linux/MacOS, defaults to pwsh on windows.

+ shell: <shell-name>

+ # Optional. Current working directory. Defaults to the directory of this file.

+ workingDirectory: <working-directory>

+ # Optional. Timeout in ms.

+ timeout: <timeout-in-ms>

+ # Optional. Redirect stdout and stderr to a file.

+ redirectTo: <path-to-output-file>

+```

+### Customize resource provision

+The provision steps are defined in `teamsapp.yml` file, under `provision` property. You can add, remove, or update actions to the `provision` property to define the expected actions you want to do during provision.

+#### Reference environment variables in parameter files

+Teams Toolkit supports referencing the values from environment variables in `teamsapp.yml`, Teams app manifest, Azure AD app manifest, and Azure parameter files. You can use syntax `${{ENV_VARIABLE_NAME}}` to reference environment variables.

+The following example sets the value of environment variable `MY_AZURE_SUBSCRIPTION_ID` to `subscriptionId`:

+```yml

+subscriptionId: ${{MY_AZURE_SUBSCRIPTION_ID}}

+```

+#### Customize ARM template files

+If the predefined templates don't meet your app requirements, you can create your own ARM template or update existing ARM template and provide the path to `arm/deploy` action as in the following template:

+```yml

+- uses: arm/deploy

+ with:

+ subscriptionId: ${{AZURE_SUBSCRIPTION_ID}}

+ resourceGroupName: ${{AZURE_RESOURCE_GROUP_NAME}}

+ templates:

+ - path: <path-to-your-arm-template>

+ parameters: <path-to-your-parameter-file>

+ deploymentName: <arm-deployment-name>

+ bicepCliVersion: <bicep-cli-version>

+```

+

+The `arm/deploy` action support ARM templates written in bicep and json format. If you use json format, you can omit the `bicepCliVersion` parameter. You need to have basic knowledge of Azure Resource Manager. You can get started with Azure Resource Manager at [Azure Resource Manager documentation](/azure/azure-resource-manager/).

+### Customize Teams apps

+You can customize your bot or the Teams app by adding environment variables to use an Azure AD app created by you. Perform the following ways to customize the Teams app:

+* [Use an existing Azure AD app for your Teams app](#use-an-existing-azure-ad-app-for-your-teams-app)

+* [Use an existing Azure AD app for your bot](#use-an-existing-azure-ad-app-for-your-bot)

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

+You can follow the steps to add environment variables to the .env files to use an Azure AD app created for your Teams app. If you don't have an Azure AD app yet or you already have one but don't know where to find the correct value, see [how to use existing Azure AD app in TeamsFx project](use-existing-aad-app.md).

+1. Open `teamsapp.yml` and find the `aadApp/create` action.

+1. Find the environment variable names that store information for Azure AD app in the `writeToEnvironmentFile` property. The default `writeToenvironmentFile` definition if you create projects using Teams Toolkit is as follows:

+ ```yml

+ writeToEnvironmentFile:

+ clientId: AAD_APP_CLIENT_ID

+ clientSecret: SECRET_AAD_APP_CLIENT_SECRET

+ objectId: AAD_APP_OBJECT_ID

+ tenantId: AAD_APP_TENANT_ID

+ authority: AAD_APP_OAUTH_AUTHORITY

+ authorityHost: AAD_APP_OAUTH_AUTHORITY_HOST

+ ```

+1. Add values for each environment variable from step 2.

+ 1. Add the following environment variables and their values to `env\.env.{env}` file.

+ ```env

+ AAD_APP_CLIENT_ID=<value of Azure AD application's client id (application id)> # example: 00000000-0000-0000-0000-000000000000

+ AAD_APP_OBJECT_ID=<value of Azure AD application's object id> # example: 00000000-0000-0000-0000-000000000000

+ AAD_APP_TENANT_ID=<value of Azure AD's Directory (tenant) id>> # example: 00000000-0000-0000-0000-000000000000

+ AAD_APP_OAUTH_AUTHORITY=<value of Azure AD's authority> # example: https://login.microsoftonline.com/<Directory (tenant) ID>

+ AAD_APP_OAUTH_AUTHORITY_HOST=<host of Azure AD's authority> # example: https://login.microsoftonline.com

+ AAD_APP_ACCESS_AS_USER_PERMISSION_ID=<id of access_as_user permission> # example: 00000000-0000-0000-0000-000000000000

+ ```

+ 1. If your application requires an Azure AD app client secret, add the following environment variable and its value to `env\.env.{env}.user` file.

+ ```env

+ SECRET_AAD_APP_CLIENT_SECRET=<value of Azure AD application's client secret>

+ ```

+>[!NOTE]

+>

+> * Remember to update the environment variable names in the examples if you use different names in `writeToEnvironmentFile`.

+> * If you don't use `aadApp/create` action to create Azure AD application, you can add necessary environment variables with your preferred name without following above steps.

+> * Ensure not to share the same Azure AD app in multiple environments.

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

+You can follow the steps to add environment variables to the .env files to use an Azure AD app created for your Teams app. If you don't have an Azure AD app for your bot yet or you already have one but don't know where to find the correct values, see [Use existing Azure AD app in TeamsFx project](use-existing-aad-app.md).

+1. Open `teamsapp.yml` and find the `botAadApp/create` action.

+1. Find the environment variable names that store information for Azure AD app in the `writeToEnvironmentFile` property. The default `writeToEnvironmentFile` definition if you create projects using Teams Toolkit is as follows:

+ ```yml

+ writeToEnvironmentFile:

+ botId: BOT_ID

+ botPassword: SECRET_BOT_PASSWORD

+ ```

+1. Add values for each environment variable from step 2.

+ 1. Add the following environment variable and its value to `env\.env.{env}` file.

+ ```env

+ BOT_ID=<value of Azure AD application's client id (application id)> # example: 00000000-0000-0000-0000-000000000000

+ ```

+ 1. Add the following environment variable and its value to `env\.env.{env}.user` file.

+ ```env

+ SECRET_BOT_PASSWORD=<value of Azure AD application's client secret>

+ ```

+>

+> * Remember to update the environment variable names in the examples if you use different names in `writeToEnvironmentFile`.

+> * If you don't use `botAadApp/create` action to create Azure AD application, you can add necessary environment variables with your preferred name without following above steps.

+> * Ensure not to share the same Azure AD app in multiple environments.

+# Integrate with Developer Portal

+## To publish app using Developer Portal

+You can publish your app, which is created in Visual Studio Code using Developer Portal:

+The following steps help to publish your app in Developer Portal:

+1. Select **Open Developer Portal to Publish** for Teams under **UTILITY**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/open-developer-portal-to-publish.png" alt-text="Screenshot showing the selection of open Developer Portal to publish.":::

+1. Select the Teams app package you'd like to publish.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/select-your-teams-app-package.png" alt-text="Screenshot showing the selection of zip Teams app package.":::

+1. Sign in to [Developer Portal for Teams](https://dev.teams.microsoft.com/home) using the corresponding account.

+1. Teams Toolkit will open your selected Teams app's page and navigate to the **Publish** > **Publish to store** page.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/publish-to-your-org.png" alt-text="Screenshot showing the selection of publish to your org.":::

+* **Basic information**: This section shows and allows you to edit the **App names**, **Descriptions**, **Version**, **Developer information**, **App URLs**, **Application (client) ID**, and **Microsoft Partner Network ID**.

+description: In this module, learn how to publish Teams apps using Teams Toolkit and publish to individual scope or sideload permission.

+* Select **Zip Teams App Package** > **UTILITY**.<br>

+ The generated app package is located in `{your project folder}\appPackage\build\appPackage.{env}.zip`.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/publish1_1.png" alt-text="Screenshot shows the publish an app option.":::

+ The **Upload an app** window appears.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/upload_1.png" alt-text="Screenshot shows the upload an app option.":::

+ Now, the app is sideloaded into the Teams client and you can add and view it.

+ * Select **Publish** under **LIFECYCLE**.

+ * Select **View** > **Command Palette...** > **Teams: Publish**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/select-publish_1.png" alt-text="Screenshot shows the Publish option highlighted.":::

+1. Select your environment, Teams Toolkit runs the `publish` lifecycle defined in `teamsapp.yml`.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/select-env.jpg" alt-text="Screenshot shows the environment options.":::

+Now the app is available on the Manage apps of Microsoft Teams admin center, where you and the admin can review and approve it.

+ > * Grant admin consent to apps in [manage org wide app settings.](https://admin.teams.microsoft.com/policies/manage-apps).

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/select-manage-apps.png" alt-text="Screenshot shows the select Manage apps option.":::

+ In the **Pending approval** widget at the top of the page, lets you know when a custom app is submitted for approval. In the table, a newly submitted app automatically publishes the status of submitted and blocked apps. You can sort the publishing status column in descending order to find the app.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/admin-approval-for-teams-app-1.png" alt-text="Screenshot shows the approval.":::

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/about-submitted-app-1.png" alt-text="Screenshot shows the submitted app.":::

+ After you publish the app, the publishing status changes to Published and the status automatically changes to Allowed.

+description: Learn about Teams Toolkit, it's installation, navigation, and user journey. Teams Toolkit is available for Visual Studio code.

+> [!IMPORTANT]

+>

+> We've introduced the Teams Toolkit v5 extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> [Teams Toolkit v4](toolkit-v4/teams-toolkit-fundamentals-v4.md) extension will soon be deprecated.

+* Start with a project template for common line-of-business app scenarios or from a sample.

+* Create unique configurations like dev, test, and prod using the environment features.

+> [!NOTE]

+> Before you get started, we strongly recommend that you visit [Teams Toolkit v5 Guide](https://aka.ms/teamsfx-v5.0-guide) to learn key features, such as life cycles and actions.

+Teams Toolkit is available for free for Visual Studio Code. For more information about installation and set up, see [Install Teams Toolkit](./install-Teams-Toolkit.md).

+You can start directly with the capability-focused templates such as tabs, bots, and message extensions or by following the existing samples if you're already familiar with Teams app development. Teams Toolkit reduces the complexity of getting started with the help of templates for common line-of-business app scenarios and smart defaults to accelerate your time to production.

+You can save time and let the toolkit automatically register the app in Teams Developer Portal. When you first run or debug the app, Teams Toolkit automatically registers the Teams app to your Microsoft 365 tenant and configures settings such as Azure Active Directory (Azure AD) for your Teams app. Sign in with your Microsoft 365 account to control where the app is configured and customize the included Azure AD manifest when you need flexibility.

+You can access Teams Developer Portal where you can configure, distribute, and manage your app. For more information, see [manage your Teams apps using Developer Portal](../concepts/build-and-test/manage-your-apps-in-developer-portal.md).

+[Install Teams Toolkit](install-Teams-Toolkit.md)

+ Title: Teams toolkit tutorial and code samples

+description: The article lists the app that you want to build and the associated guides.

+ms.localizationpriority: medium

+# Teams app tutorials and related code samples

+> [!IMPORTANT]

+>

+> We've introduced the Teams Toolkit v5 extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> [Teams Toolkit v4](toolkit-v4/teams-toolkit-fundamentals-v4.md) extension will soon be deprecated.

+You can build your own Teams app with different capabilities using the step-by-step guide or tutorial and code samples.

+## Teams app tutorials

+Now, let's build your first Teams app. You can use the following language (or framework) and prepare your development environment to build your app.

+| &nbsp; | **Tab** | **Bot** | **Message extension** |

+| | | | |

+| **Basic app** | ΓÇó [Build your first tab app using JavaScript](../sbs-gs-javascript.yml) <br> ΓÇó [Build your first app with SPFx](../sbs-gs-spfx.yml) <br> | [Build your first bot app using JavaScript](../sbs-gs-bot.yml) | [Build your first message extension app using JavaScript](../sbs-gs-msgext.yml)|

+| **Scenario-based app** | NA | ΓÇó [Build notification bot with JavaScript](../sbs-gs-notificationbot.yml) <br> ΓÇó [Build command bot with JavaScript](../sbs-gs-commandbot.yml) <br> ΓÇó [Create Teams workflow bot](../sbs-gs-workflow-bot.yml) | NA |

+## Code samples

+Code samples are designed to help understand and build your own Microsoft Teams app with different capabilities and scenarios. To learn more about list of code samples, see [Microsoft Teams samples](https://github.com/OfficeDev/Microsoft-Teams-Samples).

+description: In this module, learn how to test app behavior in different environment.

+## Upload your app to Teams

+You can sideload your Teams app to Microsoft Teams without having to publish to your organization or the Teams store in the following scenarios:

+* You want to test and debug an app locally or on your testing cloud environment.

+* You built an app for yourself to automate a workflow.

+* You built an app for a small set of users, such as, your work group.

+> [!IMPORTANT]

+>

+> * Sideloading of apps is possible only in Government Community Cloud (GCC) and isn't possible in GCC-High and Department of Defense (DOD).

+>

+> * App installation is supported only on Teams desktop client.

+## Prerequisites

+* Ensure to create your app package and validate it for errors.

+* Enable custom app uploading in Teams.

+* Ensure that your app is running and accessible using HTTPs.

+## Upload your app

+You can sideload your app to a team, chat, meeting, or for personal use depending on how you configured your app's scope.

+1. Log in to the Teams client with your [Microsoft 365 development account](https://developer.microsoft.com/microsoft-365/dev-program).

+1. Select **Apps** > **Manage your apps** and **Upload an app**.

+ :::image type="content" source="~/assets/images/publish-app/manage-apps.png" alt-text="Screenshot shows the Upload an app option highlighted.":::

+1. Select **Upload a custom app**.

+ :::image type="content" source="~/assets/images/publish-app/publish-app.png" alt-text="Screenshot shows the Upload a custom app option highlighted.":::

+1. Select your app package **.zip file**.

+1. Add your app to Teams as per your requirement:

+ 1. Select **Add** to add your personal app.

+ 1. Use the dropdown menu to add your app to a Team or chat.

+ :::image type="content" source="~/assets/images/publish-app/teams-app-detail.png" alt-text="Screenshot shows the App description.":::

+To host your development and production code and their HTTPS endpoints, you need to remotely test your teams app using provisioning and deploying on Azure AD. You need to ensure that all domains are accessible from your Teams app listed in the `validDomains` object in the `manifest.json` file.

+ Title: Edit Azure Active Directory manifest in Teams Toolkit v4

+description: Describes Managing Azure Active Directory application in Teams Toolkit v4

+ms.localizationpriority: medium

+# Edit Azure AD manifest in Teams Toolkit v4

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

+The Microsoft Azure Active Directory (Azure AD) manifest contain definitions of all the attributes of an Azure AD application object in the Microsoft identity platform.

+Teams Toolkit now manages Azure AD application with the manifest file as the source of truth during your Teams application development lifecycle.

+## Customize Azure AD manifest template

+You can customize Azure AD manifest template to update Azure AD application.

+1. Open `aad.template.json` in your project.

+

+ :::image type="content" source="images/add template-v4.png" alt-text="template":::

+2. Update the template directly or [reference values from another file](https://github.com/OfficeDev/TeamsFx/wiki/Manage-AAD-application-in-Teams-Toolkit#Placeholders-in-AAD-manifest-template). Following are the customization scenarios:

+

+ <details>

+ <summary>Add an application permission</summary>

+ If the Teams application requires more permissions to call an API with additional permissions, you need to update `requiredResourceAccess` property in the Azure AD manifest template. You can see the following example for this property:

+ ```JSON

+ "requiredResourceAccess": [

+ {

+ "resourceAppId": "Microsoft Graph",

+ "resourceAccess": [

+ {

+ "id": "User.Read", // For Microsoft Graph API, you can also use uuid for permission id

+ "type": "Scope" // Scope is for delegated permission

+ },

+ {

+ "id": "User.Export.All",

+ "type": "Role" // Role is for application permission

+ }

+ ]

+ },

+ {

+ "resourceAppId": "Office 365 SharePoint Online",

+ "resourceAccess": [

+ {

+ "id": "AllSites.Read",

+ "type": "Scope"

+ }

+ ]

+ }

+ ]

+ ```

+ The following permissions are used property IDs:

+ - The `resourceAppId` property is used for different APIs. For `Microsoft Graph`, and `Office 365 SharePoint Online` enter the name directly instead of UUID, and for other APIs use UUID.

+ - The `resourceAccess.id` property is used for different permissions. For `Microsoft Graph`, and `Office 365 SharePoint Online` enter the permission name directly instead of UUID, and for other APIs use UUID.

+ - The `resourceAccess.type` property is used for delegated permission or application permission. `Scope` means delegated permission and `Role` means application permission.

+ <br>

+ </details>

+ <details>

+ <summary>Pre-authorize a client application</summary>

+ You can use `preAuthorizedApplications` property to authorize a client application to indicate that the API trusts the application. Users don't consent when the client calls it exposed API. You can see the following example for this property:

+ ```JSON

+ "preAuthorizedApplications": [

+ {

+ "appId": "1fec8e78-bce4-4aaf-ab1b-5451cc387264",

+ "permissionIds": [

+ "{{state.fx-resource-aad-app-for-teams.oauth2PermissionScopeId}}"

+ ]

+ }

+ ...

+ ]

+ ```

+ `preAuthorizedApplications.appId` property is used for the application you want to authorize. If you don't know the application ID and know only the application name, use the following steps to search application ID:

+ 1. Go to [Azure portal](https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps) and open **Application Registrations**.

+ 1. Select **All applications** and search for the application name.

+ 1. Select the application name and get the application ID from the overview page.

+ <br>

+ </details>

+ <details>

+ <summary>Update redirect URL for authentication response</summary>

+ Redirect URLs are used while returning authentication responses such as tokens after successful authentication. You can customize redirect URLs using property `replyUrlsWithType`. For example, to add `https://www.examples.com/auth-end.html` as redirect URL, you can add it as the following example:

+ ``` JSON

+ "replyUrlsWithType": [

+ ...

+ {

+ "url": "https://www.examples.com/auth-end.html",

+ "type": "Spa"

+ }

+ ]

+ ```

+ <br>

+ </details>

+<br>

+<details>

+<summary>3. Deploy Azure AD application changes for local environment</summary>

+ 1. Select `Preview` CodeLens in `aad.template.json`.

+

+ :::image type="content" source="images/add deploy1-v4.png" alt-text="deploy1":::

+ 2. Select **local** environment.

+

+ :::image type="content" source="images/add deploy2-v4.png" alt-text="deploy2":::

+ 3. Select `Deploy Azure AD Manifest` CodeLens in `aad.local.json`.

+ :::image type="content" source="images/add deploy3-v4.png" alt-text="deploy3" lightbox="images/add deploy3-v4.png":::

+ 4. The changes for Azure AD application used in local environment are deployed.

+<br>

+</details>

+

+<br>

+<details>

+<summary>4. Deploy Azure AD application changes for remote environment</summary>

+- Open the command palette and select: **Teams: Deploy Azure Active Directory app manifest**.

+

+ :::image type="content" source="images/add deploy4-v4.png" alt-text="deploy4":::

+- Additionally you can right click on the `aad.template.json` and select **Deploy Azure Active Directory app manifest** from the context menu.

+

+ :::image type="content" source="images/add deploy5-v4.png" alt-text="deploy5":::

+<br>

+</details>

+## Azure AD manifest template placeholders

+The Azure AD manifest file contains placeholder arguments with {{...}} statements, it's replaced during build for different environments. You can build references to config file, state file, and environment variables with the placeholder arguments.

+### Reference state file values in Azure AD manifest template

+The state file is located in `.fx\states\state.xxx.json`. The following example shows state file:

+``` JSON

+{

+ "solution": {

+ "teamsAppTenantId": "uuid",

+ ...

+ },

+ "fx-resource-aad-app-for-teams": {

+ "applicationIdUris": "api://xxx.com/uuid",

+ ...

+ }

+ ...

+}

+```

+> [!NOTE]

+> xxx represents different environment.

+You can use this placeholder argument in the Azure AD manifest. `{{state.fx-resource-aad-app-for-teams.applicationIdUris}}` to point out `applicationIdUris` value in `fx-resource-aad-app-for-teams` property.

+### Reference config file values in Azure AD manifest template

+The following config file is located in `.fx\configs\config.xxx.json`:

+``` JSON

+{

+ "$schema": "https://aka.ms/teamsfx-env-config-schema",

+ "description": "description.",

+ "manifest": {

+ "appName": {

+ "short": "app",

+ "full": "Full name for app"

+ }

+ }

+}

+```

+You can use the placeholder argument in the Azure AD manifest `{{config.manifest.appName.short}}` to refer `short` value.

+### Reference environment variable in Azure AD manifest template

+When the value is a secret, you don't need to enter permanent values in Azure AD manifest template. Azure AD manifest template file supports reference environment variables values. You can use the syntax `{{env.YOUR_ENV_VARIABLE_NAME}}` in the tool as parameter values to resolve the current environment variable values.

+## Edit and preview Azure AD manifest with CodeLens

+Azure AD manifest template file has CodeLens to review and edit the code.

+### Azure AD manifest template file

+There's a preview CodeLens at the beginning of the Azure AD manifest template file. Select the CodeLens to generate an Azure AD manifest based as per your environment.

+### Placeholder argument CodeLens

+Placeholder argument CodeLens helps you to see the values for local debug and develop your environment. If you hover the mouse on the placeholder argument, it shows tooltip box for the values of all the environments.

+### Required resource access CodeLens

+Azure AD manifest template in Teams Toolkit also supports user readable strings for `Microsoft Graph` and `Office 365 SharePoint Online` permissions. The official [Azure AD manifest schema](/azure/active-directory/develop/reference-app-manifest), which is the `resourceAppId` and `resourceAccess` in `requiredResourceAccess` property supports only the UUID. If you enter UUID, the CodeLens shows user readable strings, otherwise it shows the UUID.

+### Pre-authorized applications CodeLens

+CodeLens shows the application name for the pre-authorized application ID for the `preAuthorizedApplications` property.

+## View Azure AD application on the Azure portal

+1. Copy the Azure AD application client ID from `state.xxx.json` () file in the `fx-resource-aad-app-for-teams` property.

+

+ :::image type="content" source="images/add view1-v4.png" alt-text="view1" lightbox="images/add view1-v4.png":::

+ > [!NOTE]

+ > xxx in the client ID indicates the environment name where you have deployed the Azure AD application.

+2. Go to [Azure portal](https://ms.portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps) and sign in to Microsoft 365 account.

+

+ > [!NOTE]

+ > Ensure that login credentials of Teams application and M365 account are the same.

+3. Open [App Registrations page](https://ms.portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps), and search the Azure AD application using client ID that you copied before.

+

+ :::image type="content" source="images/add view2-v4.png" alt-text="view2":::

+4. Select Azure AD application from search result to view the detail information.

+

+5. In Azure AD app information page, select the `Manifest` menu to view manifest of this application. The schema of the manifest is same as the one in `aad.template.json` file. For more information about manifest, see [Azure AD app manifest](/azure/active-directory/develop/reference-app-manifest).

+

+ :::image type="content" source="images/add view3-v4.png" alt-text="view3":::

+6. You can select **Other Menu** to view or configure Azure AD application through its portal.

+

+## Use an existing Azure AD application

+You can use the existing Azure AD application for the Teams project. For more information, see [use an existing Azure AD application for your Teams application](https://github.com/OfficeDev/TeamsFx/wiki/Customize-provision-behaviors#use-an-existing-aad-app-for-your-teams-app).

+## Azure AD application in Teams application development lifecycle

+You need to interact with Azure AD application during various stages of your Teams application development lifecycle.

+1. **To create Project**

+ You can create a project with Teams Toolkit that comes with single sign-on (SSO) support by default such as `SSO-enabled tab`. For more information on how to create a new app, see [create new Teams application using Teams Toolkit](create-new-project-v4.md). An Azure AD manifest file is automatically created for you in `templates\appPackage\aad.template.json`. Teams Toolkit creates or updates the Azure AD application during local development or while you move the application to the cloud.

+2. **To add SSO to your Bot or Tab**

+ After you create a Teams application without built-in SSO, Teams Toolkit progressively helps you to add SSO for the project. As a result, an Azure AD manifest file is automatically created for you in `templates\appPackage\aad.template.json`.

+ Teams Toolkit creates or updates the Azure AD application during next local development session or while you move the application to the cloud.

+3. **To build Locally**

+ Teams Toolkit performs the following functions during local development:

+ - Read the `state.local.json` file to find an existing Azure AD application. If an Azure AD application already exists, Teams Toolkit reuses the existing Azure AD application. Otherwise you need to create a new application using the `aad.template.json` file.

+ - Initially ignores some properties in the manifest file that requires more context, such as `replyUrls` property that requires a local development endpoint during the creation of a new Azure AD application with the manifest file.

+ - After the local dev environment starts successfully, the Azure AD application's `identifierUris`, `replyUrls`, and other properties that aren't available during creation stage are updated accordingly.

+ - The changes you've done to your Azure AD application are loaded during next local development session. You can see [Azure AD application changes](https://github.com/OfficeDev/TeamsFx/wiki/) applied manually.

+4. **To provision for cloud resources**

+ You need to provision cloud resources and deploy your application while moving your application to the cloud. At stages, such as local debug, Teams Toolkit:

+ - Reads the `state.{env}.json` file to find an existing Azure AD application. If an Azure AD application already exists, Teams Toolkit re-uses the existing Azure AD application. Otherwise you need to create a new application using the `aad.template.json` file.

+ - Ignores some properties in the manifest file initially that requires more context such as `replyUrls` property. This property requires frontend or bot endpoint during the creation of a new Azure AD application with the manifest file.

+ - Completes other resources provision, then Azure AD application's `identifierUris`, and `replyUrls` are updated according to the correct endpoints.

+5. **To build application**

+ - The cloud command deploys your application to the provisioned resources. It doesn't include deploying Azure AD application changes you've made.

+ - Teams Toolkit updates the Azure AD application according to the Azure AD manifest template file.

+## Limitations

+1. Teams Toolkit extension doesn't support all the properties listed in Azure AD manifest schema.

+

+ The following table lists the properties that aren't supported in Teams Toolkit extension:

+ |**Not supported properties**|**Reason**|

+ |--|-|

+ |`passwordCredentials`|Not allowed in manifest|

+ |`createdDateTime`|Read-only and can't change|

+ |`logoUrl`|Read-only and can't change|

+ |`publisherDomain`|Read-only and can't change|

+ |`oauth2RequirePostResponse`|Doesn't exist in Graph API|

+ |`oauth2AllowUrlPathMatching`|Doesn't exist in Graph API|

+ |`samlMetadataUrl`|Doesn't exist in Graph API|

+ |`orgRestrictions`|Doesn't exist in Graph API|

+ |`certification`|Doesn't exist in Graph API|

+2. Currently `requiredResourceAccess` property is used for user readable resource application name or permission name strings only for `Microsoft Graph` and `Office 365 SharePoint Online` APIs. You need to use UUID for other APIs. Perform the following steps to retrieve IDs from Azure portal:

+ - Register a new Azure AD application on [Azure portal](https://ms.portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps).

+ - Select `API permissions` from the Azure AD application page.

+ - Select `add a permission` to add the permission you need.

+ - Select `Manifest`, from the `requiredResourceAccess` property, where you can find the IDs of API, and the permissions.

+## See also

+- [Teams Toolkit Overview](teams-toolkit-fundamentals-v4.md)

+- [Azure AD manifest](/azure/active-directory/develop/reference-app-manifest)

+- [Preview and Customize app manifest in Toolkit](TeamsFx-preview-and-customize-app-manifest-v4.md)

+- [Debug your Teams app](debug-overview-v4.md)

+- [Debug your Teams app locally](debug-local-v4.md)

+ Title: Collaborate on TeamsFx Project using Teams Toolkit v4

+description: In this article, learn how to collaborate on TeamsFx Project using Teams Toolkit v4 and collaborate with other developers.

+ms.localizationpriority: medium

+# Collaborate on Teams project using Microsoft Teams Toolkit v4

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

+Multiple developers can work together to debug, provision and deploy for the same TeamsFx project, but it requires manually setting the right permissions of Teams App and Microsoft Azure Active Directory (Azure AD). Teams Toolkit supports collaboration feature to allow developers and project owner to invite other developers or collaborators to the TeamsFx project to debug, provision, and deploy the same TeamsFx project.

+## Collaborate with other developers

+The following sections guide us to understand the collaboration process as project owner or collaborator:

+### As project owner

+ > [!NOTE]

+ > Before adding collaborators for an environment, project owner needs to [provision](provision-v4.md) the project first.

+ 1. Select **Teams Toolkit** in the activity bar.

+

+ :::image type="content" source="images/select-teams-toolkit-v4.png" alt-text="Select teams toolkit from activity bar":::

+ 1. In **ENVIRONMENT** section, select collaborators, that displays as option **1** **Add Microsoft 365 Teams App (with Azure AD App) Owners** and **2** **List Microsoft 365 Teams App (with Azure AD App) Owners** as shown in the following image:

+ :::image type="content" source="images/add collaborators-v4.png" alt-text="collaborators":::

+ 2. Select **Add Microsoft 365 Teams App (with Azure AD App) Owners** and add other Microsoft 365 account email address as collaborator. The account to be added must be on the same tenant as project owner for remote debug as shown in the image:

+ :::image type="content" source="images/add-owner-v4.png" alt-text="Add project owner":::

+ 3. To view collaborators in current environment, select **List Microsoft 365 Teams App (with Azure AD App) Owners**, then you can see collaborators listed in the output channel as shown in following image:

+ :::image type="content" source="images/list of collaborators-v4.png" alt-text="list":::

+ 4. Push the project to GitHub.

+ > [!NOTE]

+ > The newly added collaborators do not receive any notification. The Project owner needs to notify collaborator.

+### As project collaborator

+ 1. Clone the project from GitHub.

+ 2. Log on to Microsoft 365 account.

+ 3. Log on to Azure account, it has contributor permission for all the Azure resources, which are used in the project.

+ 4. To preview your Teams app, deploy the project to remote.

+ 5. Launch remote to have a preview of the Teams app.

+ > [!NOTE]

+ > Collaborators must log in using the account that project owner adds under the same tenant with project owner. For more information, see [build and run your Teams app in remote environment](/microsoftteams/platform/sbs-gs-javascript?tabs=vscode%2Cvsc%2Cviscode%2Cvcode&tutorial-step=3).

+## Remove Collaborators

+If you want to remove collaborators from Teams Toolkit extension, you need to remove manually as you can't remove them directly. Perform the following steps to remove collaborators manually:

+* Using Developer Portal

+ * Go to [Teams Developer Portal](https://dev.teams.microsoft.com/home) and select your Teams app by name or app ID.

+ * Select **Owners** from left panel.

+ * Select and remove the collaborator.

+* Using Azure Active Directory

+ * Go to [Azure Active Directory](https://ms.portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps), select **App registration** from left panel, and find your Azure AD App.

+ * Select **Owners** from left panel in Azure AD App management page.

+ * Select and remove the collaborator.

+ > [!NOTE]

+ >

+ > * Collaborator added to your project doesn't receive any notification. Project owner needs to notify collaborator offline.

+ > * Azure related permissions must be set manually by Azure subscription administrator on Azure portal.

+ > * Azure account must have contributor role for the subscription so that developers can work together to provision, and deploy TeamsFx project.

+## See also

+* [Teams Toolkit Overview](teams-toolkit-fundamentals-v4.md)

+* [Provision cloud resources](provision-v4.md)

+* [Deploy Teams app to the cloud](deploy-v4.md)

+* [Manage multiple environments](TeamsFx-multi-env-v4.md)

+ Title: TeamsFX multiple environments in Teams Toolkit v4

+description: In this module, learn about TeamsFX multi environment such as, create a new environment, select target environment and more in Teams Toolkit v4.

+ms.localizationpriority: medium

+# Manage multiple environments in Teams Toolkit v4

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

+ Teams Toolkit provides a simple way for you to create and manage multiple environments. You can use environments to provision resources and deploy artifacts to the target environment for your Microsoft Teams app.

+ You can perform the following activities with environments:

+1. **Test before production**: You can set up multiple environments, such as dev, test, and staging before publishing a Teams app to production environment in modern app development lifecycle.

+2. **Manage app behaviors in different environments**: You can set up different app behaviors for multiple environments, such as enabling telemetry in the production environment.

+ > [!NOTE]

+ > Ensure that telemetry is disabled in the development environment.

+## Create a new environment

+Each project can have one **local** environment but multiple remote environments. After you create a project, Teams Toolkit configures the following default environments:

+* **local** environment to represent the local machine environment configuration.

+* **dev** environment to represent the remote or cloud environment configuration.

+To create a new environment:

+1. Open your Teams app project in Visual Studio Code.

+2. Select the **Teams Toolkit** from the Visual Studio Code activity bar.

+3. Select **+ Create new environment** under **ENVIRONMENT**.

+ :::image type="content" source="images/create_new _env_1-v4.PNG" alt-text="Create new environment":::

+ If you've more than one environment, you need to select an existing environment to create the new environment. The command copies the file contents of `config.<newEnv>.json` and `azure.parameters.<newEnv>.json` from the selected environment to the new environment that youΓÇÖre creating.

+## Target environment

+Teams Toolkit prompts you to select a target environment when you've multiple remote environments.

+## Project folder structure

+After creating the project, you can view the project folders and files under **EXPLORER** in Visual Studio Code. Besides the custom codes, Teams Toolkit uses some files to maintain the `configs`, `states`, and `templates` of the app. The following list provides files and outlines their relationship with multiple environments:

+* `.fx\configs`: Configuration files that the user can customize for the Teams app.

+ * `config.<envName>.json`: Configuration file for the environment. This file exists for every environment individually.

+ * `azure.parameters.<envName>.json`: Parameters file for Azure bicep provision for every environment.

+ * `projectSettings.json`: Global project settings that apply to all environments.

+* `.fx\states`: Teams Toolkit generates the provision output in this folder after you provision resources for your app.

+ * `state.<envName>.json`: Provision output file for the environment. This file exists for every environment individually.

+ * `<env>.userdata`: User data for the provision output for the environment. This file exists for every environment individually.

+* `templates`

+ * `appPackage`: App manifest template files.

+ * `azure`: `bicep` template files.

+## Customize resource provision

+Teams Toolkit allows you to customize the resource provision in each environment by changing the configuration and template files.

+The following table lists the common scenarios for customized resource provision:

+| Scenarios | Location| Description |

+| | | |

+| Customize Azure Resource |`bicep` files under `templates\azure` `.fx\azure.parameters.<envName>.json` | [Customize ARM parameters and templates](provision-v4.md#customize-arm-template-files) |

+| Reuse existing Microsoft Azure Active Directory (Azure AD) app for Teams app | `auth` section in`.fx\config.<envName>.json`| [Use an existing Azure AD app for your Teams app](provision-v4.md#use-an-existing-azure-ad-app-for-your-teams-app) |

+| Reuse existing Azure AD app for bot |`bot` section in`.fx\config.<envName>.json`| [Use an existing Azure AD app for your bot](provision-v4.md#use-an-existing-azure-ad-app-for-your-bot) |

+| Skip adding user while provisioning SQL |`skipAddingSqlUser` property in`.fx\config.<envName>.json`| [Skip adding user for SQL database](provision-v4.md#skip-adding-user-for-sql-database) |

+| Customize app manifest |`manifest.template.json` file is available under `templates\appPackage`| [Preview app manifest in Toolkit](TeamsFx-preview-and-customize-app-manifest-v4.md)|

+## Scenarios

+The following scenarios show how to customize the resource provision in different environments:

+<br>

+<br><details>

+<summary><b>Scenario 1: Customize the Teams app name for different environments

+</b></summary>

+You can set the Teams app name to `myapp(dev)` for the default environment **dev** and `myapp(staging)` for the staging environment, **staging**. Here, myapp denotes the name of your app project or app name.

+Steps for customization:

+1. Open the configuration file `.fx\configs\config.dev.json`.

+2. Update the value of the property `manifest` > `appName` > `short` to `myapp(dev)`.

+ The updates to `.fx\configs\config.dev.json` are:

+ ```json

+ {

+ "$schema": "https://aka.ms/teamsfx-env-config-schema",

+ "description": "You can customize the TeamsFx config for different environments. Visit https://aka.ms/teamsfx-env-config to learn more about this.",

+ "manifest": {

+ "appName": {

+ "short": "myapp(dev)"

+ ...

+ }

+ }

+ ...

+ }

+ ```

+3. Create a new environment and name it **staging**, if a staging environment doesn't exist.

+4. Open the configuration file `.fx\configs\config.staging.json`.

+5. Update the value of the property manifest > appname > short to `myapp(staging)`.

+6. Run provision command on **dev** and **staging** environments to update the app name in remote environments.

+ > [!NOTE]

+ > For more information on running provision command with Teams Toolkit, see [how to provision using Teams Toolkit in Microsoft Visual Studio Code](provision-v4.md#provision-using-teams-toolkit-in-microsoft-visual-studio-code).

+</details>

+<details>

+<summary><b>Scenario 2: Customize the Teams app description for different environments</b></summary>

+You can define Teams app description for each environment:

+* For the default environment **dev**, the description is **my app description for dev**.

+* For the staging environment **staging**, the description is **my app description for staging**.

+Follow these steps customizing the environment description:

+1. Open the configuration file `.fx\configs\config.dev.json`.

+2. Add a new property for `manifest` > `description` > `short` and enter its value as **my app description for dev**.

+ The updates to `.fx\configs\config.dev.json` are:

+ ```json

+ {

+ "$schema": "https://aka.ms/teamsfx-env-config-schema",

+ "description": "You can customize the TeamsFx config for different environments. Visit https://aka.ms/teamsfx-env-config to learn more about this.",

+ "manifest": {

+ ...

+ "description": {

+ "short": "`my app description for dev"

+ ...

+ }

+ }

+ ...

+ }

+ ```

+3. Create a new environment and name it **staging**, if a staging environment doesnΓÇÖt exist.

+4. Open the configuration file `.fx\configs\config.staging.json`.

+5. Add a new property as you did in config.dev.json and enter its value as **my app description for staging**.

+6. Open Teams app manifest template `templates\appPackage\manifest.template.json`.

+7. Update the value of property `description` > `short` to use the variable defined in configure files with braces. Use the following syntax `{{config.manifest.description.short}}`.

+

+ The updates to `manifest.template.json` are:

+ ```json

+ {

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

+ "manifestVersion": "1.11",

+ "version": "1.0.0",

+ ...

+ "description": {

+ "short": "{{config.manifest.description.short}}",

+ ...

+ },

+ ...

+ }

+ ```

+8. Run provision command against **dev** and **staging** environments to update the app name in remote environments.

+ > [!NOTE]

+ > For more information on running provision command with Teams Toolkit, see [how to provision using Teams Toolkit in Microsoft Visual Studio Code](provision-v4.md#provision-using-teams-toolkit-in-microsoft-visual-studio-code).

+</details>

+<details>

+<summary><b>Scenario 3: Customize Teams app description for all environments</b></summary>

+You can set the description of Teams app to **my app description** for all the environments.

+Teams Toolkit shares the same Teams app manifest templates across all environments, you can update the description value in it for your target:

+1. Open the Teams app manifest template `templates\appPackage\manifest.template.json`.

+2. Update the value of the property `description` > `short` with the permanent string **my app description**.

+

+ The updates to `manifest.template.json` are:

+ ```json

+ {

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

+ "manifestVersion": "1.11",

+ "version": "1.0.0",

+ ...

+ "description": {

+ "short": "my app description",

+ ...

+ },

+ ...

+ }

+ ```

+3. Run the provision command against all environments to update the app name in remote environments.

+</details>

+<details>

+<summary><b>Scenario 4: Customize Azure resources for different environments</b></summary>

+You can customize Azure resources provisioned for each environment. For example, edit the environment corresponding to `.fx\configs\azure.parameters.{env}.json` file to specify an Azure Function name.

+For more information on Bicep template and parameter files, see [how to provision cloud resources](provision-v4.md).

+</details>

+## See also

+* [Teams Toolkit Overview](teams-toolkit-fundamentals-v4.md)

+* [App manifest schema for Teams](~/resources/schem)

+* [Add more cloud resources](add-resource-v4.md)

+* [Collaborate with other developers on Teams project](TeamsFx-collaboration-v4.md)

+* [Test app behavior in different environment](test-app-behavior-v4.md)

+ Title: Customize Teams App Manifest in Teams Toolkit v4

+description: In this module, learn how to edit, preview and customize Teams App Manifest in different environment in Teams Toolkit v4.

+ms.localizationpriority: medium

+zone_pivot_groups: teams-app-platform

+# Customize Teams app manifest in Teams Toolkit v4

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

+## Customize Teams app manifest for Visual Studio Code

+The Teams app manifest describes how your app integrates into Teams. The manifest template file `manifest.template.json` is available under `templates/appPackage` folder after scaffolding. The template file with placeholders, and the actual values are resolved by Teams Toolkit using files under `.fx/configs` and `.fx/states` for different environments.

+To preview manifest with actual content, Teams Toolkit generates preview manifest files under `build/appPackage` folder:

+```text

+ΓööΓöÇΓöÇΓöÇbuild

+ ΓööΓöÇΓöÇΓöÇappPackage

+ Γö£ΓöÇΓöÇΓöÇappPackage.{env}.zip - Zipped app package of remote Teams app

+ Γö£ΓöÇΓöÇΓöÇappPackage.local.zip - Zipped app package of local Teams app

+ Γö£ΓöÇΓöÇΓöÇmanifest.{env}.json - Previewed manifest of remote Teams app

+ ΓööΓöÇΓöÇΓöÇmanifest.local.json - Previewed manifest of local Teams app

+```

+You can preview the manifest file in local and remote environments.

+<br>

+<details>

+<b><summary>Preview manifest file in local environment</b></summary>

+To preview manifest file in local environment, you can press **F5** to run local debug. After generating default local settings, the app package and preview manifest builds under `build/appPackage` folder.

+You can preview local manifest file by two methods:

+* Use preview option in CodeLens.

+* Use **Zip Teams metadata package** option.

+The following steps help to preview local manifest file by using preview option in CodeLens:

+1. Select **Preview** in the CodeLens of `manifest.template.json` file.

+ :::image type="content" source="images/preview-23-v4.png" alt-text="Screenshot is an example showing the preview in the CodeLens of manifest file." lightbox="images/preview-23-v4.png":::

+1. Select **local**.

+ :::image type="content" source="images/select-env1-v4.png" alt-text="Screenshot is an example of showing the selection of local in the environment.":::

+To preview local manifest file by using **Zip Teams metadata package** option:

+1. Select `manifest.template.json` file.

+ :::image type="content" source="images/select-manifest-json-v4.png" alt-text="Screenshot is an example of showing the selection of manifest.template.json.":::

+1. Select the Teams Toolkit :::image type="icon" source="images/teams-toolkit-sidebar-icon-v4.PNG"::: icon in the Visual Studio Code **Activity Bar**.

+1. Select **Zip Teams metadata package** under **DEPLOYMENT**.

+ :::image type="content" source="images/teams-metadata-package-v4.png" alt-text="Screenshot is an example of showing the selection of zip Teams metadata package.":::

+1. Select **local**.

+ :::image type="content" source="images/select-env1-v4.png" alt-text="Screenshot is an example of showing the selection of local in the environment.":::

+Following is a preview local image:

+<br>

+</details>

+<details>

+<b><summary>Preview manifest file in remote environment</b></summary>

+To preview manifest file using Visual Studio Code:

+* Select **Provision in the cloud** under **DEPLOYMENT** in Teams Toolkit.

+

+ :::image type="content" source="images/provision-v4.png" alt-text="Screenshot is an example of showing the selection of provision in the cloud resource.":::

+* To preview the manifest file using command palette. You can trigger **Teams: Provision in the cloud** from command palette.

+ :::image type="content" source="images/command palatte-v4.png" alt-text="Screenshot is an example of showing provision cloud resource using command palette.":::

+It generates configuration for remote Teams app, builds package, and preview manifest under `build/appPackage` folder.

+You can preview manifest file in remote environment by two methods:

+* Use preview option in CodeLens.

+* Use **Zip Teams metadata package** option.

+To preview manifest file by using preview option in CodeLens:

+1. Select **Preview** in the CodeLens of `manifest.template.json` file.

+ :::image type="content" source="images/preview-23-v4.png" alt-text="Screenshot is an example of showing preview in the CodeLens of manifest file." lightbox="images/preview-23-v4.png":::

+1. Select your environment.

+ :::image type="content" source="images/manifest preview-1-v4.png" alt-text="Screenshot is an example of showing the adding of environment.":::

+ > [!NOTE]

+ > If there are more than one environment, you need to select the environment you want to preview.

+To preview manifest file by selecting **Zip Teams metadata package** in remote environment:

+1. Select `manifest.template.json` file.

+ :::image type="content" source="images/select-manifest-json-v4.png" alt-text="Screenshot is an example of showing the selection of manifest.template.json.":::

+1. Select the **Teams Toolkit** :::image type="icon" source="images/teams-toolkit-sidebar-icon-v4.PNG"::: icon in the Visual Studio Code **Activity Bar**.

+1. Select **Zip Teams metadata package** under **DEPLOYMENT**.

+ :::image type="content" source="images/teams-metadata-package-v4.png" alt-text="Screenshot is an example of showing the selection of zip Teams metadata package.":::

+1. Select your environment.

+ :::image type="content" source="images/manifest preview-1-v4.png" alt-text="Screenshot is an example of showing the adding of environment.":::

+ > [!NOTE]

+ > If there are more than one environment, you need to select the environment you want to preview.

+</details>

+## Sync local changes to Developer Portal

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

+1. Deploy Teams app manifest.

+ You can deploy Teams app manifest in any of the following ways:

+ * Right-click the `manifest.template.json` file, and select **Deploy Teams app manifest** from context menu.

+ :::image type="content" source="images/deploy-manifest-v4.png" alt-text="Screenshot is an example of showing the selection of deploy Teams app manifest.":::

+ * Trigger **Teams: Deploy Teams app manifest** by selecting it from the command palette.

+ :::image type="content" source="images/deploy-command-v4.png" alt-text="Screenshot is an example of showing the deploy from command palette.":::

+2. Update to Teams platform.

+ You can update to Teams platform in any of the following ways:

+ * Select **Update to Teams platform** on the upper left-corner of `manifest.{env}.json`.

+ * Trigger **Teams: Update manifest to Teams platform** on the menu bar of `manifest.{env}.json`. The following image shows dev environment:

+ :::image type="content" source="images/update-to-teams-v4.png" alt-text="Screenshot is an example of showing the update to Teams platform on the menu bar of manifest." lightbox="images/update-to-teams-v4.png":::

+You can also trigger **Teams: Update manifest to Teams platform** from the command palette:

+> [!NOTE]

+>

+> * The Trigger from editor CodeLens or menu bar updates current manifest file to Teams platform.

+> * The Trigger from command palette requires selecting target environment.

+ CLI command:

+``` bash

+ teamsfx deploy manifest --include-app-manifest yes

+```

+> [!NOTE]

+> The change is reflected in Developer Portal. Any manual updates in Developer Portal are overwritten.

+If the manifest file is outdated due to configuration file change or template change, select any one of the following actions:

+* **Preview only**: Local manifest file is overwritten according to current configuration.

+* **Preview and update**: Local manifest file is overwritten according to current configuration and also updated to Teams platform.

+* **Cancel**: No action is taken.

+## Customize your Teams app manifest

+Teams Toolkit consists of the following manifest template files under `manifest.template.json` folder across local and remote environments:

+* `manifest.template.json`

+* `templates/appPackage`

+During the local debug or provision, Teams Toolkit loads manifest from `manifest.template.json` with the configurations from `state.{env}.json`, `config.{env}.json`, and creates Teams app in [Developer Portal](https://dev.teams.microsoft.com/apps).

+### Supported placeholders in manifest.template.json

+The following list provides supported placeholders in `manifest.template.json`:

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

+* `{{config.manifest.xx}}` is a customized placeholder and it's value is resolved from `config.{env}.json`.

+**To add customized parameter**

+1. Add customized parameter as follows:</br>

+ a. Add a placeholder in `manifest.template.json` with pattern `{{config.manifest.xx}}`.</br>

+ b. Add a config value in `config.{env}.json`.

+ ```json

+ {

+ "manifest": {

+ "KEY": "VALUE"

+ }

+ }

+ ```

+2. You can go to configuration file by selecting any one of the config placeholders **Go to config file** or **View the state file** in `manifest.template.json`.

+### Validate manifest

+During operations such as **Zip Teams metadata package**, Teams Toolkit validates the manifest against its schema. The following list provides different ways to validate manifest:

+* In Visual Studio Code, trigger **Teams: Validate manifest file** from command palette:

+ :::image type="content" source="images/validate-v4.png" alt-text="Screenshot is an example of showing Teams validate manifest file from command palette.":::

+* In CLI, use command:

+ ``` bash

+ teamsfx validate --env local

+ teamsfx validate --env dev

+ ```

+## To preview values for local and dev environment

+In `manifest.template.json`, you can go to CodeLens to preview the values for `local` and `dev` environment.

+> [!NOTE]

+> Provision the environment or execute local debug to generate values for placeholders.

+You can go to state file or configuration file by selecting the CodeLens, which provides a drop down list with all the environment names. After selecting one environment, the corresponding state file or configuration file opens.

+To preview values for all the environments, you can hover over the placeholder. It shows a list with environment names and corresponding values. If you haven't provisioned the environment or executed the local debug, select `Trigger Teams: Provision in the cloud command to see placeholder value` or `Trigger local debug to see placeholder value`.

+## Customize 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 Teams app in Developer Portal with 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

+The following list provides 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`. Its recommended not to 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`.

+ ```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`, you can see the values for **dev** and **local** environment.

+ :::image type="content" source="images/vs-hover-placeholder1-v4.png" alt-text="Screenshot is an example showing when you hover over placeholder, can view the values for dev and local environment." lightbox="images/vs-hover-placeholder1-v4.png":::

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

+ :::image type="content" source="images/vs-hover-key-placeholder-v4.png" alt-text="Screenshot is an example showing when you hover over key beside placeholder can view the same values for dev and local environment." lightbox="images/vs-hover-key-placeholder-v4.png":::

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

+### Preview manifest file

+You can either sideload for local, or deploy for Azure to preview the manifest file. You can preview the manifest file by performing the following steps:

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

+1. Select to trigger **Prepare Teams App Dependencies** or **Provision in the Cloud** that generates configuration for either for local or remote Teams app.

+ :::image type="content" source="images/vs-preview-manifest1-v4.png" alt-text="Screenshot is an example of showing preview manifest file." lightbox="images/vs-preview-manifest1-v4.png":::

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

+1. From the list of menu select, **Project** > **Teams Toolkit**.

+1. Select **Zip App Package**, then select either **For Local** or **For Azure**.

+ :::image type="content" source="images/vs-zip1-v4.png" alt-text="Screenshot is an example of showing the navigation to zip app package for local and Azure." lightbox="images/vs-zip1-v4.png":::

+1. You can also upload zip app package from **Solution Explorer** section, if you right-click on **MyTeamsApp1**. In this scenario the project name is MyTeamsApp1.

+1. Select **Teams Toolkit** > **Zip App Package** > **For Local** or **For Azure**.

+ :::image type="content" source="images/vs-solution-explorer1-v4.png" alt-text="Screenshot is an example of showing the list of Teams toolkit menus from solution explorer." lightbox="images/vs-solution-explorer1-v4.png":::

+Teams Toolkit generates the zip app package, the following steps help to preview the manifest file:

+1. Right-click on **manifest.template.json** file under **appPackage** folder.

+1. Select **Preview Manifest File** > **For Local** or **For Azure**.

+ :::image type="content" source="images/vs-preview1-v4.png" alt-text="Screenshot is an example of showing the preview manifest menu for local and Azure." lightbox="images/vs-preview1-v4.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 sync the local changes to Developer Portal.

+Select **Project** > **Teams Toolkit** > **Update Manifest in Teams Developer Portal**.

+You can also sync the local changes to Developer Portal from the context menu of **Solution Explorer** section. After the local changes are synced, you can preview the manifest file in Developer Portal.

+The changes are updated to Developer Portal.

+> [!TIP]

+>

+> * Select **Overwrite and update** or **Cancel** from the **Warning** dialog box to make any manual updates that can be overwritten in Developer Portal.

+When you create a Teams command bot using Visual Studio, two app IDs are registered in Microsoft Azure Active Directory (Azure AD). You can identify the app IDs in the Developer Portal as **Application (client) ID** under **Basic information** and existing **bot ID** under **App features**.

+## See also

+* [Teams Toolkit Overview](teams-toolkit-fundamentals-v4.md)

+* [App manifest schema for Teams](~/resources/schem)

+* [Developer Portal for Teams](~/concepts/build-and-test/teams-developer-portal.md)

+* [Manage multiple environments](TeamsFx-multi-env-v4.md)

+* [Public developer preview for Microsoft Teams](~/resources/dev-preview/developer-preview-intro.md)

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

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

+ Title: Integrate existing third-party APIs using Teams Toolkit v4

+description: Learn how toolkit v4 allows bootstrap sample access to existing APIs. List of different authentication types.

+ms.localizationpriority: medium

+# Integrate existing third-party APIs using Teams Toolkit v4

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

+Teams Toolkit allows you to access and use existing APIs for building Teams apps. Your organization or a third-party might have developed these APIs. When you use Teams Toolkit to connect to an existing API, Teams Toolkit performs the following functions:

+* Generate sample code in the `./bot` or `./api` folder.

+* Add a reference to the `@microsoft/teamsfx` package to `package.json`.

+* Add app settings for your API in `.env.teamsfx.local` that configures local debugging.

+Teams Toolkit allows you bootstrap sample code to access the APIs, if you don't have language appropriate SDKs to access these APIs.

+## Configure API connection

+You can add an existing third-party API to your Teams app using:

+* [Teams Toolkit](#add-api-connection-using-teams-toolkit)

+* [TeamsFx CLI commands](#add-api-connection-using-teamsfx-cli)

+### Add API connection using Teams Toolkit

+Add a connection to an existing third-party API using the following steps:

+1. Open your Teams app project in **Visual Studio Code**.

+2. Select **Teams Toolkit** from the Visual Studio Code activity bar.

+3. Select **Add features** in the **DEVELOPMENT** section.

+ :::image type="content" source="images/api-add-features_1-v4.png" alt-text="api add features":::

+ The **Add Feature** dropdown list appears.

+4. Select **API Connection**.

+ :::image type="content" source="images/api-select-features_1-v4.png" alt-text="api select features":::

+5. Enter endpoint for the API, and then press **Enter**.

+ Ensure that the endpoint is a valid http(s) URL. Teams Toolkit adds the endpoint to the project's local app settings, and it's the base URL for API requests.

+ :::image type="content" source="images/api-endpoint_1-v4.png" alt-text="api endpoint":::

+7. Select the component that needs to connect to the API, and then select **OK**.

+ :::image type="content" source="images/api-invoke_1-v4.png" alt-text="api invoke":::

+9. Enter an alias for the API, and then press **Enter**.

+ The alias generates an app setting name for the API. Teams Toolkit adds the alias to the project's local app setting.

+ :::image type="content" source="images/api-alias_1-v4.png" alt-text="api alias":::

+11. Select the required authentication for the API request from the **API authentication type**.

+ :::image type="content" source="images/myAPI connection-v4.png" alt-text="api auth":::

+ Teams Toolkit generates appropriate sample code and adds corresponding local application settings based on authentication that you select. To configure authentication:

+# [Basic](#tab/basic)

+For implementing basic authentication using username and password:

+* Select **Basic**.

+* Enter the username for basic Auth.

+Teams Toolkit generates the sample code to call your API at bot\myAPI.js.

+# [Certification](#tab/certification)

+* Select **Certification** to authenticate requests using certificates.

+Teams Toolkit generates the sample code to call your API at bot\myAPI.js.

+# [Azure Active Directory (Azure AD)](#tab/AAD)

+* Select **Azure Active Directory (Azure AD)** to authenticate requests using Azure AD access tokens.

+Teams Toolkit generates the sample code to call your API at bot\myAPI.js.

+# [API Key](#tab/apikey)

+* Select **API Key** to implement authentication using an API key.

+* Select the required API key position in request.

+* Enter an API key name.

+Teams Toolkit generates the sample code to call your API at bot\myAPI.js.

+# [Custom Auth Implementation](#tab/CustomAuthImplementation)

+* Select **Custom Auth Implementation** to customize authentication according to your app requirement.

+Teams Toolkit generates the sample code to call your API at bot\myAPI.js.

+You've successfully added a connection in your Teams app to an existing API.

+## Add API connection using TeamsFx CLI

+The base command of this feature is `teamsfx add api-connection [authentication type]`. The following table provides a list of different authentication types and their corresponding sample commands:

+ > [!TIP]

+ > You can use `teamsfx add api-connection [authentication type] -h` to get help document.

+ |**Authentication type**|**Sample command**|

+ |--||

+ |**Basic**|teamsfx add api-connection basic--endpoint <https://example.com> --component bot--alias example--user-name example user--interactive false|

+ |**API Key**|teamsfx add api-connection apikey--endpoint <https://example.com> --component bot--alias example--key-location header--key-name example-key-name--interactive false|

+ |**Azure AD**|teamsfx add api-connection aad--endpoint <https://example.com> --component bot--alias example--app-type custom--tenant-id your_tenant_id--app-id your_app_id--interactive false|

+ |**Certificate**|teamsfx add api-connection cert--endpoint <https://example.com> --component bot--alias example--interactive false|

+ |**Custom**|teamsfx add api-connection custom--endpoint <https://example.com> --component bot--alias example--interactive false|

+## Directory structure updates to your project

+ Teams Toolkit modifies `bot` or `api` folder based on your selection:

+1. Generate `{your_api_alias}.js\ts` file. The file initializes an API client for your API and exports the API client.

+2. Add `@microsoft\teamsfx` package to `package.json`. The package provides support for the common API authentication methods.

+3. Add environment variables to `.env.teamsfx.local`. You must configure environment variables for the selected authentication type. The generated code reads values from the environment variables.

+## See also

+* [Teams Toolkit Overview](teams-toolkit-fundamentals-v4.md)

+* [Publish Teams apps using Teams Toolkit](publish-v4.md)

+ Title: Add Capabilities of Teams Toolkit v4 to Your Teams apps

+description: In this module, learn how to add Capabilities of Teams Toolkit v4

+ms.localizationpriority: medium

+# Add capabilities of Teams Toolkit v4 to Microsoft Teams app

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

+Adding capabilities with Teams Toolkit allows you to extend the functionality of your existing Microsoft Teams app. The advantage of adding more capabilities is that you can add more functions to your app by using Teams Toolkit to automatically add necessary code and project files. You can select different capabilities based on the app project you've created for your Teams app. The following table lists the Teams app capabilities:

+|Capability|Description|Other supported capabilities|

+|--|-|--|

+|**Basic Teams app**|&nbsp;|&nbsp;|

+| **Tab** | Basic tabs are simple HTML tags that refer to domains declared in the app manifest. You can add tabs as a part of channel inside a team, group chat, or personal app for an individual user.|Basic tab, notification bot, command bot, basic bot, and basic message extension|

+| **Bot** | Bots help to interact with your web service through text, interactive cards, and task modules.|Basic message extension, SSO-enabled tab, and basic tab|

+| **Message extension** | Message extensions help to interact with your web service through buttons and forms in the Microsoft Teams client.|Basic bot, SSO-enabled tab, and basic tab|

+|**Scenario-based Teams app**|&nbsp;|&nbsp;|

+| **Notification bot** | Notification bot proactively sends messages in Teams channel or group chat, or personal chat. You can trigger the notification bot with an HTTP request, such as cards or texts. |SSO-enabled tab and basic tab|

+| **Command bot** | Command bot allows you to automate repetitive tasks using a command bot. It responds to simple commands sent in chats with the Adaptive Cards. |SSO-enabled tab and basic tab|

+| **Workflow bot** | Workflow bot allows users to interact with an Adaptive Card enabled by the Adaptive Card action handler in the workflow bot app.|SSO-enabled tab and basic tab|

+| **SPFx tab** | Microsoft 365 hosts the SPFx tab apps and supports developing and hosting your client-side SharePoint Framework (SPFx) solution.|None|

+| **SSO-enabled tab** |You can build SSO-enabled tab app that allows the user access to your app with single sign-on (SSO).|SSO-enabled tab, notification bot, command bot, basic bot, and basic message extension|

+> [!NOTE]

+> You can add tabs up to 16 instances. You can add one bot and one message extension to each instance at a time.

+## Add capabilities

+You can add capabilities in the following ways:

+* [Use Teams Toolkit pane](#use-teams-toolkit-pane)

+* [Use the Command Palette](#use-the-command-palette)

+* [Use TeamsFx CLI](#use-teamsfx-cli)

+### Use Teams Toolkit pane

+ 1. Open your app project in **Visual Studio Code**.

+ 1. Select **Teams Toolkit** from the Visual Studio Code activity bar.

+ 1. Select **Add features** in the **DEVELOPMENT** section.

+ :::image type="content" source="images/select-feature123_1-v4.png" alt-text="Add capabilities from Teams Toolkit":::

+ 1. From the dropdown list that appears, select the capability you want to add to your app.

+ :::image type="content" source="images/notification-add-capabilities_1-v4.png" alt-text="notification":::

+ Teams Toolkit adds the selected capability to your app and updates the app directory structure for the new capability. After successfully adding the capability to your Teams app, you need to provision for each environment.

+### Use the Command Palette

+ 1. Open your app project in **Visual Studio Code**.

+ 1. Select **View** > **Command Palette...** or **Ctrl+Shift+P**.

+ :::image type="content" source="images/add-capabilities-command-palette_1-v4.png" alt-text="Add capabilities from command palette":::

+ 1. Select **Teams: Add features**.

+ :::image type="content" source="images/teams-add-features_1-v4.png" alt-text="To add capabilities by using command palette.":::

+ 1. From the dropdown list that appears, select the capability you want to add to your app.

+ :::image type="content" source="images/notification-add-capabilities_1-v4.png" alt-text="notification":::

+ Teams Toolkit adds the selected capability to your app and updates the app directory structure for the new capability. After successfully adding the capability to your Teams app, you need to provision for each environment.

+### Use TeamsFx CLI

+You can use TeamsFx CLI as an alternative way for adding capabilities to your Teams app project.

+This section lists the capabilities you can add to your Teams app using TeamsFx CLI commands. Before you add capabilities to your app, ensure that youΓÇÖve changed the directory to your project directory.

+The following table lists the capabilities and the TeamsFx CLI commands for adding them:

+ |Capability and Scenario| Command|

+ |--|-|

+ |To add notification bot |`teamsfx add notification`|

+ |To add command bot |`teamsfx add command-and-response`|

+ |To add SSO-enabled tab |`teamsfx add sso-tab`|

+ |To add tab |`teamsfx add tab`|

+ |To add bot |`teamsfx add bot`|

+ |To add message extension |`teamsfx add message extension`|

+## Changes after adding capabilities

+The following table shows the changes that you can see in the files of your app after adding capabilities:

+|Add capability|Description| Changes|

+||||

+|Basic bot, basic message extension, and basic tab|Includes a basic bot or basic tab app template into your project.|Teams Toolkit adds a front-end bot or tab template code into a subfolder with path `yourProjectFolder\bot` or `yourProjectFolder\tab`, respectively.|

+|Basic bot, message extension, and basic tab |Includes necessary scripts for Visual Studio Code and is executed when you want to debug your app locally. |Teams Toolkit updates the `launch.json` and `task.json` files under the `.vscode` folder. |

+|Basic bot and basic message extension|Updates the manifest file for a basic bot or basic tab app. This information represents your app in the Teams Platform.|Teams Toolkit updates the file `manifest.template.json` under `templates\appPackage` folder. The manifest file includes tab-related information that represents your app in the Teams Platform. The changes are visible in the ID of your bot, the scopes of your bot, and the commands that your bot or tab app can respond to.|

+|Basic tab|Includes information in the manifest file for a basic bot or basic tab. This information represents your app in the Teams Platform.|Teams Toolkit updates `manifest.template.json` under `templates\appPackage` folder. The manifest file includes tab-related information that represents your app in the Teams Platform. The changes are visible in the configurable and static tabs and scopes of the tabs.|

+|Basic bot, basic message extension, and basic tab|Includes information in TeamsFx for a basic bot or tab app. It also includes provision files that are for integrating Azure Functions.|Files under `templates\azure\teamsfx` are updated and `templates\azure\provision\xxx.bicep` files are regenerated.|

+|Basic bot, basic message extension, and basic tab|Ensures that you've set up your project with the right configuration for the newly added capability.|Teams Toolkit regenerates the files under `.fx\config`.|

+## Step-by-step guides

+* Follow the [step-by-step](~/sbs-gs-commandbot.yml) guide to build command bot in Teams.

+* Follow the [step-by-step](~/sbs-gs-notificationbot.yml) guide to build notification bot in Teams.

+* Follow the [step-by-step](~/sbs-gs-workflow-bot.yml) guide to build workflow bot in Teams.

+## See also

+* [Teams Toolkit Overview](teams-toolkit-fundamentals-v4.md)

+* [Build bots for Teams](~/bots/what-are-bots.md)

+* [Build tabs for Teams](~/tabs/what-are-tabs.md)

+* [Build message extensions for Teams](~/messaging-extensions/what-are-messaging-extensions.md)

+* [App manifest schema](~/resources/schem)

+* [Authenticate users in Microsoft Teams](~/concepts/authentication/authentication.md)

+* [Provision cloud resources](provision-v4.md)

+* [Create new Teams project](create-new-project-v4.md)

+* [Combine bots with tabs](~/resources/bot-v3/bots-with-tabs.md)

+ Title: Add Resources of Teams Toolkit v4 to Teams apps

+description: Learn how to add resources of Teams Toolkit v4, advantages, limitations, and capabilities.

+ms.localizationpriority: medium

+# Add cloud resources of Teams Toolkit v4 to Teams app

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

+Teams Toolkit allows you to provision the cloud resources for hosting your app. You can add the cloud resources according to your development needs. The advantage of adding more cloud resources in TeamsFx is that you can autogenerate all configuration files and connect to Teams app by using Teams Toolkit.

+> [!NOTE]

+> If you've created SharePoint Framework (SPFx) based tab project, you can't add Azure cloud resources.

+## Add cloud resources

+You can add cloud resources in the following ways:

+### To add cloud resources by using Teams Toolkit in Microsoft Visual Studio Code

+ 1. Open your Teams app project in **Visual Studio Code**.

+ 1. Select **Teams Toolkit** from the Visual Studio Code activity bar.

+ 1. Select **Add features** in the **DEVELOPMENT** section.

+ :::image type="content" source="images/select-feature-updated_1-v4.png" alt-text="Add feature from Teams Toolkit":::

+### To add cloud resources by using Command Palette

+ 1. Open your Teams app project in Visual Studio Code.

+ 1. Select **View** > **Command Palette...** or **Ctrl+Shift+P**.

+ :::image type="content" source="images/Teams-add-features-v4.png" alt-text="Add feature from command palette":::

+ 1. Select **Teams: Add features**.

+ :::image type="content" source="images/Teams-add-features1_1-v4.png" alt-text="Type add feature and enter":::

+ A list of cloud resources appears.

+ 1. Select the **Cloud resources** to add to your project.

+ :::image type="content" source="images/updated-final-cloud_1-v4.png" alt-text="final":::

+ You need to provision for each environment after you have successfully added the resource in your Teams app.

+### Add cloud resources using TeamsFx CLI

+* Before you add cloud resources, ensure that you change the directory to your **project directory**.

+* The following table lists the capabilities and required commands:

+ |Cloud Resource|Command|

+ ||-|

+ | **Azure Functions**|`teamsfx add azure-function`|

+ | **Azure SQL Database**|`teamsfx add azure-sql`|

+ | **Azure API Management**|`teamsfx add azure-apim`|

+ | **Azure Key Vault**|`teamsfx add azure-keyvault`|

+## Types of cloud resources

+In the following scenarios, TeamsFx integrates the Azure services with your Teams app:

+* [Azure Functions](/azure/azure-functions/functions-overview): A serverless solution to meet your on-demand requirements, such as creating web APIs for your Teams app back-end.

+* [Azure SQL Database](/azure/azure-sql/database/sql-database-paas-overview): A platform as a service (PaaS) database engine to serve as your Teams app data store.

+* [Azure API Management](deploy-v4.md): An API gateway can be used to administer APIs created for Teams apps and publish them so other apps can consume them, such as Power app.

+* [Azure Key Vault](/azure/key-vault/general/overview): Safeguard cryptographic keys and other secrets used by cloud apps and services.

+## Changes after adding Azure resources

+The following changes appear after adding Azure cloud resources in your project:

+* New parameters added to `azure.parameter.{env}.json` to provide the required information for provision.

+* New content is included to ARM template under `templates\azure`. The files are in `templates\azure\teamsfx` folder for the Azure resources.

+* Teams Toolkit regenerates the files under `templates\azure\teamsfx` folder to ensure configuration required for TeamsFx is up to date for added Azure resources.

+* `.fx\configs\projectSettings.json` is updated to track the available resources in your project.

+The following additional changes appear after adding resources in your project:

+|Resources|Changes|Description|

+|||--|

+|**Azure Functions**|The Azure Functions template code is added into a subfolder with path `yourProjectFolder\api`</br></br>`launch.json` and `task.json` are updated under `.vscode` folder.| Includes a hello world http trigger template into your project.</br></br> Includes necessary scripts for Visual Studio Code to be executed when you want to debug your app locally.|

+|**Azure API Management**|An open API specification file added into a subfolder with path `yourProjectFolder\openapi`.|Defines your API after publishing. It's the API specification file.|

+## See also

+* [Teams Toolkit Overview](teams-toolkit-fundamentals-v4.md)

+* [Provision cloud resources](provision-v4.md)

+* [Create a new Teams app](create-new-project-v4.md)

+* [Add capabilities to Teams apps](add-capability-v4.md)

+* [Deploy to the cloud](deploy-v4.md)

+ Title: Add single sign-on of Teams Toolkit v4 to your Teams apps

+description: In this module, learn how to add single sign-on (SSO) of Teams Toolkit v4, enable SSO support, update your application to use SSO

+ms.localizationpriority: medium

+zone_pivot_groups: teams-app-platform

+# Add single sign-on of Teams Toolkit v4 to Teams app

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

+Microsoft Teams provides single sign-on (SSO) function for an app to obtain signed in Teams user token to access Microsoft Graph and other APIs. Teams Toolkit facilitates the interaction by abstracting some of the Microsoft Azure Active Directory (Azure AD) flows and integrations behind some simple APIs. This enables you to add SSO features easily to your Teams app.

+## Add SSO to Teams app for Microsoft Visual Studio Code

+For apps that interact with the user in a chat, Team, or channel, SSO manifests as an Adaptive Card, which the user can interact with to invoke the Azure AD consent flow.

+## Enable SSO support

+Teams Toolkit helps you to add SSO to the following Teams capabilities in Visual Studio Code:

+* Tab

+* Bot

+* Notification bot: restify server

+* Command bot

+* Workflow bot

+* Message extension

+### Add SSO using Visual Studio Code

+You can perform the following steps to add SSO using Teams Toolkit in Visual Studio Code:

+1. Open **Visual Studio Code**.

+2. Select **Teams Toolkit** from the Visual Studio Code activity bar.

+3. Select **Add features** under **DEVELOPMENT**.

+ :::image type="content" source="images/sso-add features_1-v4.png" alt-text="Screenshot shows the Add features option under the Development option in the Visual Studio Code.":::

+ * You can select **View** > **Command Palette...** to view **Add features** window.

+4. Select **Single Sign-On**.

+ :::image type="content" source="images/sso-select features_1-v4.png" alt-text="Screenshot shows the Single Sign-on feature highlighted in red in the Visual Studio Code.":::

+### Add SSO using TeamsFx CLI

+You can run `teamsfx add sso` command in your **project root directory**.

+> [!NOTE]

+> The feature enables SSO for all existing applicable capabilities. Follow the same steps to enable SSO if you add capability later to the project.

+## Customize your project using Teams Toolkit

+The following table lists the changes Teams Toolkit makes to your project:

+| **Type** | **File** | **Purpose** |

+| -- | - | -- |

+| Create | `aad.template.json` under `template\appPackage` | Azure AD application manifest represents your Azure AD app. `template\appPackage` helps to register an Azure AD app during local debug or provision stage. |

+| Modify | `manifest.template.json` under `template\appPackage` | A `webApplicationInfo` object is added into your Teams app manifest template. Teams requires this field to enable SSO. The change is in effect when you trigger local debugging or provisioning. |

+| Create | `auth\tab` | Reference code, auth redirect pages, and `README.md` files are generated in this path for a tab project. |

+| Create | `auth\bot` | Reference code, auth redirect pages, and `README.md` files are generated in this path for a bot project. |

+> [!NOTE]

+> By adding SSO, Teams Toolkit doesn't change anything in the cloud until you trigger local debug. Update your code to ensure that SSO is working in the project.

+## Update your application to use SSO

+To enable SSO in your application, follow these steps:

+> [!NOTE]

+> These changes are based on the templates you scaffold.

+<br>

+<br><details>

+<summary><b>Tab project

+</b></summary>

+1. Copy `auth-start.html` and `auth-end.htm` in `auth\public` folder to `tabs\public\`. Teams Toolkit registers these two endpoints in Azure AD for Azure AD's redirect flow.

+2. Copy `sso` folder under `auth\tab` to `tabs\src\sso\`.

+ * `InitTeamsFx`: The file implements a function that initializes TeamsFx SDK and opens `GetUserProfile` component after SDK is initialized.

+ * `GetUserProfile`: The file implements a function that calls Microsoft Graph API to get user info.

+3. Execute `npm install @microsoft/teamsfx-react` under `tabs\`.

+4. Add the following lines to `tabs\src\components\sample\Welcome.tsx` to import `InitTeamsFx`:

+ ```Bash

+ import { InitTeamsFx } from "../../sso/InitTeamsFx";

+ ```

+5. Replace the following line:

+ `<AddSSO />` with `<InitTeamsFx />` to replace the `AddSso` component with `InitTeamsFx` component.

+</details>

+<details>

+<summary><b>Bot project

+</b></summary>

+#### Set up the Azure AD redirects

+1. Move the `auth\bot\public` folder to `bot\src`. This folder contains HTML pages that the bot app hosts. When SSO flow is initiated with Azure AD, it redirects you to the HTML pages.

+1. Modify your `bot\src\index` to add the appropriate `restify` routes to HTML pages.

+ ```ts

+ const path = require("path");

+ server.get(

+ "/auth-*.html",

+ restify.plugins.serveStatic({

+ directory: path.join(__dirname, "public"),

+ })

+ );

+ ```

+#### Update your app

+SSO command handler `ProfileSsoCommandHandler` uses an Azure AD token to call Microsoft Graph. This token is obtained by using the signed in Teams user token. The flow is brought together in a dialog that displays a consent dialog if necessary.

+1. Move `profileSsoCommandHandler` file under `auth\bot\sso` folder to `bot\src`. `ProfileSsoCommandHandler` class is an SSO command handler to get user info with SSO token, follow this method and create your own SSO command handler.

+1. Open `package.json` file and ensure that TeamsFx SDK version >= 1.2.0.

+1. Execute the `npm install isomorphic-fetch --save` command in the `bot` folder.

+1. For ts script, execute the `npm install copyfiles --save-dev` command in the `bot` folder and replace following lines in `package.json`:

+ ```json

+ "build": "tsc --build && shx cp -r ./src/adaptiveCards ./lib/src",

+ ```

+ with

+ ```json

+ "build": "tsc --build && shx cp -r ./src/adaptiveCards ./lib/src && copyfiles src/public/*.html lib/",

+ ```

+ This copies the HTML pages used for auth redirect when building the bot project.

+1. To make SSO consent flow work, replace the following code in `bot\src\index` file:

+ ```ts

+ server.post("/api/messages", async (req, res) => {

+ await commandBot.requestHandler(req, res);

+ });

+ ```

+ with

+ ```ts

+ server.post("/api/messages", async (req, res) => {

+ await commandBot.requestHandler(req, res).catch((err) => {

+ // Error message including "412" means it is waiting for user's consent, which is a normal process of SSO, shouldn't throw this error.

+ if (!err.message.includes("412")) {

+ throw err;

+ }

+ });

+ });

+ ```

+1. Replace the following options for `ConversationBot` instance in `bot\src\internal\initialize` to add the SSO config and SSO command handler:

+ ```ts

+ export const commandBot = new ConversationBot({

+ ...

+ command: {

+ enabled: true,

+ commands: [new HelloWorldCommandHandler()],

+ },

+ });

+ ```

+ with

+ ```ts

+ import { ProfileSsoCommandHandler } from "../profileSsoCommandHandler";

+ export const commandBot = new ConversationBot({

+ ...

+ // To learn more about ssoConfig, please refer teamsfx sdk document: https://docs.microsoft.com/microsoftteams/platform/toolkit/teamsfx-sdk

+ ssoConfig: {

+ aad :{

+ scopes:["User.Read"],

+ },

+ },

+ command: {

+ enabled: true,

+ commands: [new HelloWorldCommandHandler() ],

+ ssoCommands: [new ProfileSsoCommandHandler()],

+ },

+ });

+ ```

+1. Register your command in the Teams app manifest. Open `templates\appPackage\manifest.template.json`, and add the following lines under `commands` in `commandLists` of your bot:

+ ```json

+ {

+ "title": "profile",

+ "description": "Show user profile using Single Sign On feature"

+ }

+ ```

+#### Add a new SSO command to the bot (Optional)

+After successfully adding SSO in your project, you can add a new SSO command:

+1. Create a new file such as `photoSsoCommandHandler.ts` or `photoSsoCommandHandler.js` in `bot\src\` and add your own SSO command handler to call Graph API:

+ ```TypeScript

+ // for TypeScript:

+ import { Activity, TurnContext, ActivityTypes } from "botbuilder";

+ import "isomorphic-fetch";

+ import {

+ CommandMessage,

+ TriggerPatterns,

+ TeamsFx,

+ createMicrosoftGraphClient,

+ TeamsFxBotSsoCommandHandler,

+ TeamsBotSsoPromptTokenResponse,

+ } from "@microsoft/teamsfx";

+ export class PhotoSsoCommandHandler implements TeamsFxBotSsoCommandHandler {

+ triggerPatterns: TriggerPatterns = "photo";

+ async handleCommandReceived(

+ context: TurnContext,

+ message: CommandMessage,

+ tokenResponse: TeamsBotSsoPromptTokenResponse,

+ ): Promise<string | Partial<Activity> | void> {

+ await context.sendActivity("Retrieving user information from Microsoft Graph ...");

+ const teamsfx = new TeamsFx().setSsoToken(tokenResponse.ssoToken);

+ const graphClient = createMicrosoftGraphClient(teamsfx, ["User.Read"]);

+ let photoUrl = "";

+ try {

+ const photo = await graphClient.api("/me/photo/$value").get();

+ const arrayBuffer = await photo.arrayBuffer();

+ const buffer=Buffer.from(arrayBuffer, 'binary');

+ photoUrl = "data:image/png;base64," + buffer.toString("base64");

+ } catch {

+ // Could not fetch photo from user's profile, return empty string as placeholder.

+ }

+ if (photoUrl) {

+ const photoMessage: Partial<Activity> = {

+ type: ActivityTypes.Message,

+ text: 'This is your photo:',

+ attachments: [

+ {

+ name: 'photo.png',

+ contentType: 'image/png',

+ contentUrl: photoUrl

+ }

+ ]

+ };

+ return photoMessage;

+ } else {

+ return "Could not retrieve your photo from Microsoft Graph. Please make sure you have uploaded your photo.";

+ }

+ }

+ }

+ ```

+ ```javascript

+ // for JavaScript:

+ const { ActivityTypes } = require("botbuilder");

+ require("isomorphic-fetch");

+ const {

+ createMicrosoftGraphClient,

+ TeamsFx,

+ } = require("@microsoft/teamsfx");

+ class PhotoSsoCommandHandler {

+ triggerPatterns = "photo";

+ async handleCommandReceived(context, message, tokenResponse) {

+ await context.sendActivity(

+ "Retrieving user information from Microsoft Graph ..."

+ );

+ const teamsfx = new TeamsFx().setSsoToken(tokenResponse.ssoToken);

+ const graphClient = createMicrosoftGraphClient(teamsfx, ["User.Read"]);

+ let photoUrl = "";

+ try {

+ const photo = await graphClient.api("/me/photo/$value").get();

+ const arrayBuffer = await photo.arrayBuffer();

+ const buffer = Buffer.from(arrayBuffer, "binary");

+ photoUrl = "data:image/png;base64," + buffer.toString("base64");

+ } catch {

+ // Could not fetch photo from user's profile, return empty string as placeholder.

+ }

+ if (photoUrl) {

+ const photoMessage = {

+ type: ActivityTypes.Message,

+ text: "This is your photo:",

+ attachments: [

+ {

+ name: "photo.png",

+ contentType: "image/png",

+ contentUrl: photoUrl,

+ },

+ ],

+ };

+ return photoMessage;

+ } else {

+ return "Could not retrieve your photo from Microsoft Graph. Please make sure you have uploaded your photo.";

+ }

+ }

+ }

+ module.exports = {

+ PhotoSsoCommandHandler,

+ };

+ ```

+1. Add `PhotoSsoCommandHandler` instance to `ssoCommands` array in `bot\src\internal\initialize.ts`:

+ ```ts

+ // for TypeScript:

+ import { PhotoSsoCommandHandler } from "../photoSsoCommandHandler";

+ export const commandBot = new ConversationBot({

+ ...

+ command: {

+ ...

+ ssoCommands: [new ProfileSsoCommandHandler(), new PhotoSsoCommandHandler()],

+ },

+ });

+ ```

+ ```javascript

+ // for JavaScript:

+ ...

+ const { PhotoSsoCommandHandler } = require("../photoSsoCommandHandler");

+ const commandBot = new ConversationBot({

+ ...

+ command: {

+ ...

+ ssoCommands: [new ProfileSsoCommandHandler(), new PhotoSsoCommandHandler()]

+ },

+ });

+ ...

+ ```

+1. Register your command in the Teams app manifest. Open `templates\appPackage\manifest.template.json`, and add following lines under `commands` in `commandLists` of your bot:

+ ```JSON

+ {

+ "title": "photo",

+ "description": "Show user photo using Single Sign On feature"

+ }

+ ```

+</details>

+<details>

+<summary><b>Message extension project

+</b></summary>

+The sample business logic provides a handler `TeamsBot` extends `TeamsActivityHandler` and override `handleTeamsMessagingExtensionQuery`.

+You can update the query logic in the `handleMessageExtensionQueryWithToken` with token, which is obtained by using the signed in Teams user token.

+To make this work in your app:

+1. Move the `auth\bot\public` folder to `bot`. This folder contains HTML pages that the bot app hosts. When SSO flows are initiated with Azure AD, Azure AD redirects you to these pages.

+1. Modify your `bot\index` to add the appropriate `restify` routes to these pages.

+ ```ts

+ const path = require("path");

+ server.get(

+ "/auth-*.html",

+ restify.plugins.serveStatic({

+ directory: path.join(__dirname, "public"),

+ })

+ );

+ ```

+1. Override `handleTeamsMessagingExtensionQuery` interface under `bot\teamsBot`. You can follow the sample code in the `handleMessageExtensionQueryWithToken` to do your own query logic.

+1. Open `bot\package.json`, ensure that `@microsoft/teamsfx` version >= 1.2.0

+1. Install `isomorphic-fetch` npm packages in your bot project.

+1. For ts, install `copyfiles` npm packages in your bot project, add or update the `build` script in `bot\package.json` as follows:

+ ```json

+ "build": "tsc --build && copyfiles ./public/*.html lib/",

+ ```

+ As you do it, the HTML pages used for auth redirect are copied when you build this bot project.

+1. Update `templates\appPackage\aad.template.json` your scopes, which used in `handleMessageExtensionQueryWithToken`.

+ ```json

+ "requiredResourceAccess": [

+ {

+ "resourceAppId": "Microsoft Graph",

+ "resourceAccess": [

+ {

+ "id": "User.Read",

+ "type": "Scope"

+ }

+ ]

+ }

+ ]

+ ```

+</details>

+## Debug your app

+Press **F5** to debug your application. Teams Toolkit uses the Azure AD manifest file to register an Azure AD app for SSO. For Teams Toolkit local debug functionalities, see [how to debug your Teams app locally](debug-local-v4.md).

+## Customize Azure AD app registration

+The [Azure AD app manifest](/azure/active-directory/develop/reference-app-manifest) allows you to customize various aspects of app registration. You can update the manifest as needed. If you need to include more API permissions to access your desired APIs, see [API permissions to access your desired APIs](https://github.com/OfficeDev/TeamsFx/wiki/#customize-aad-manifest-template).

+To view your Azure AD app in Azure portal, see [view Azure AD app in Azure portal](https://github.com/OfficeDev/TeamsFx/wiki/Manage-AAD-application-in-Teams-Toolkit#How-to-view-the-AAD-app-on-the-Azure-portal).

+## SSO authentication concepts

+The following concepts help you with SSO authentication:

+### Working of SSO in Teams

+SSO authentication in Azure AD silently refreshes the authentication token to minimize the number of times users need to enter their sign in credentials. If users agree to use your app, they don't have to provide consent again on another device, as they're signed in automatically.

+Teams tabs and bots have similar flow for SSO support. For more information, see:

+1. [SSO authentication in Tabs](~/tabs/how-to/authentication/tab-sso-overview.md)

+1. [SSO authentication in Bots](~/bots/how-to/authentication/auth-aad-sso-bots.md)

+### Simplified SSO with TeamsFx

+TeamsFx helps to reduce the developer tasks by using SSO and accessing cloud resources down to single-line statements with zero configuration.

+With TeamsFx SDK, you can write user authentication code in a simplified way using following credentials:

+1. User identity in browser environment: `TeamsUserCredential` represents Teams current user's identity.

+1. User identity in Node.js environment: `OnBehalfOfUserCredential` uses On-Behalf-Of flow and SSO token.

+1. Application Identity in Node.js environment: `AppCredential` represents the application identity.

+For more information about TeamsFx SDK, see:

+* [TeamsFx SDK](../TeamsFx-SDK.md) or [API reference](/javascript/api/@microsoft/teamsfx/?view=msteams-client-js-latest&preserve-view=true)

+* [Microsoft Teams Framework (TeamsFx) Sample Gallery](https://github.com/OfficeDev/TeamsFx-Samples/tree/v2)

+## Add SSO to Teams app for Visual Studio

+For applications that interact with the user in a chat, Team, or channel, SSO manifests as an Adaptive Card, which the user can interact with to invoke the Azure AD consent flow.

+**Advantages**

+The following are the advantages of SSO in Teams:

+* SSO with Azure AD refreshes the authentication token in the background, which minimizes the number of times users need to enter their sign in credentials.

+* SSO signs in the user in different devices automatically, while using the app.

+Teams tabs and bots have similar flow for SSO support, for more information, see:

+1. [SSO authentication in Tabs](~/tabs/how-to/authentication/tab-sso-overview.md)

+2. [SSO authentication in Bots](~/bots/how-to/authentication/auth-aad-sso-bots.md)

+## Enable SSO support

+Teams Toolkit helps you add SSO to the following Teams capabilities in Visual Studio:

+* Tab

+* Notification bot: Restify server

+* Command bot

+### Add SSO using Visual Studio

+You can perform the following steps to add SSO using Teams Toolkit in Visual Studio:

+1. Open **Visual Studio**.

+1. Select **Create a new project** under **Get started**.

+ :::image type="content" source="images/vs-2022-preview-create-proj_1-v4.png" alt-text="open visual studio code to create a new project" lightbox="images/vs-2022-preview-create-proj-v4.png":::

+1. Enter **Teams** in the search box and from the list, select **Microsoft Teams app**.

+1. Select **Next**.

+ :::image type="content" source="images/vs-2022-preview-select-teams_1-v4.png" alt-text="Select a Microsoft Teams project by searching for teams." lightbox="images/vs-2022-preview-select-teams-v4.png":::

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

+1. Enter your **Project name**.

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

+ > [!NOTE]

+ > You can change the default location of your project by selecting &#x25CF;&#x25CF;&#x25CF;.

+ :::image type="content" source="images/vs-2022-preview-create-teamsapp_1-v4.png" alt-text="enter project and solution name" lightbox="images/vs-2022-preview-create-teamsapp-v4.png":::

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

+1. Select the required application type under **Create a new Teams application**, clear the **Configure with single sign-on** check box.

+1. Select **Create**.

+ :::image type="content" source="images/vs-2022-preview-create-teamsapp-sso-uncheck_1-v4.png" alt-text="select the teams app to be created and uncheck sso check box" lightbox="images/vs-2022-preview-create-teamsapp-sso-uncheck-v4.png":::

+1. After the project is created, select **Project** > **Teams Toolkit** > **Add Authentication Code**.

+ :::image type="content" source="images/vs-2022-preview-add-auth-code_1-v4.png" alt-text="Add authentication code" lightbox="images/vs-2022-preview-add-auth-code-v4.png":::

+## Customize your project using Teams Toolkit

+The following table lists the changes by Teams Toolkit:

+ |**Type**|**File**|**Purpose**|

+ |--|--|--|

+ |Create|`aad.template.json` under `template\appPackage`|Azure AD application manifest represents your Azure AD app. `template\appPackage` helps you to register an Azure AD app during local debug or provision.|

+ |Modify|`manifest.template.json` under `template\appPackage`|`webApplicationInfo` object is added into your Teams app manifest template. Teams requires this field to enable SSO. When local debugging or provisioning is triggered, you can see the change.|

+ |Modify|`appsettings.json` and `appsettings.Development.json`|Configs are added and used by TeamsFx SDK to your app settings. You can update and add the `TeamsFx` object if you have other `appsettings` files.|

+ |Create|`Auth\tab`|Reference code, auth redirect pages and a `README.md` file are generated in the folder `Auth\tab` for a tab project.|

+ |Create|`Auth\bot`|Reference code, auth redirect pages and a `README.md` file are generated in the folder `Auth\bot` for a bot project.|

+> [!NOTE]

+> Teams Toolkit makes no changes in the cloud by adding SSO, until you trigger a local debug. You can update your code to ensure SSO is working in the project.

+## Update your app to use SSO

+The following steps help you to enable SSO in your app:

+> [!NOTE]

+> The changes are based on the scaffold templates.

+<br>

+<br><details>

+<summary><b>Tab project

+</b></summary>

+1. You can move `GetUserProfile.razor` file from the `Auth\tab` folder to the`Components\` folder. `GetUserProfile` file implements a function that uses TeamsFx SDK to call Microsoft Graph API to get the user info.

+1. After getting the user info, you can replace `<AddSSO />` with `<GetUserProfile />` in the `Components/Welcome.razor` file.

+</details>

+<details>

+<summary><b>Bot project

+</b></summary>

+1. Ensure to upgrade your SDK version to:

+ * TeamsFx, version 1.1.0 or later.

+ * `Microsoft.Bot.Builder`, version 4.17.1 or later.

+2. Create a `Pages` folder, and move files to the `Auth\bot\Pages`, which contains HTML pages that are hosted by bot app. When SSO authentication process is initiated with Azure AD, they redirect user to the HTML pages.

+3. After the user is redirected to the HTML pages, you can create `SSO` folder and move files in `Auth\bot\SSO`. This folder contains three files as a reference for SSO implementation:

+ * `SsoDialog.cs`: This file creates a `ComponentDialog` that is used for SSO.

+ * `SsoOperations.cs`: This file implements a class in the function to get user info with SSO token. You can follow the method defined in `SsoOperations.cs` and create your own method that requires SSO token.

+ * `TeamsSsoBot.cs`: This file creates a `TeamsActivityHandler` with `SsoDialog` that adds and triggers a command `showUserInfo`.

+ > [!NOTE]

+ > Ensure to replace `{Your_NameSpace}` with your project namespace in the three files (`SsoDialog.cs`, `SsoOperations.cs`, and `TeamsSsoBot.cs`).

+ :::image type="content" source="images/vs-2022-preview-replace-namespace_1-v4.png" alt-text="Replace name space with the your name space":::

+4. You can now update `Program.cs`.

+ 1. You can find the following code in the file `Program.cs`, and add the code blocks in step b:

+ ```csharp

+ builder.Services.AddSingleton<BotFrameworkAuthentication, ConfigurationBotFrameworkAuthentication>();

+ ```

+ 1. Add the following code blocks:

+ ```csharp

+ builder.Services.AddRazorPages();

+ // Create the Bot Framework Adapter with error handling enabled.

+ builder.Services.AddSingleton<IBotFrameworkHttpAdapter, AdapterWithErrorHandler>();

+ builder.Services.AddSingleton<IStorage, MemoryStorage>();

+ // Create the Conversation state. (Used by the Dialog system itself.)

+ builder.Services.AddSingleton<ConversationState>();

+ // The Dialog that will be run by the bot.

+ builder.Services.AddSingleton<SsoDialog>();

+ // Create the bot as a transient. In this case the ASP Controller is expecting an IBot.

+ builder.Services.AddTransient<IBot, TeamsSsoBot<SsoDialog>>();

+ builder.Services.AddOptions<AuthenticationOptions>().Bind(builder.Configuration.GetSection("TeamsFx").GetSection(AuthenticationOptions.Authentication)).ValidateDataAnnotations();

+ builder.Services.AddOptions<BotAuthenticationOptions>().Configure<IOptions<AuthenticationOptions>>((botAuthOption, authOptions) => {

+ AuthenticationOptions authOptionsValue = authOptions.Value;

+ botAuthOption.ClientId = authOptionsValue.ClientId;

+ botAuthOption.ClientSecret = authOptionsValue.ClientSecret;

+ botAuthOption.OAuthAuthority = authOptionsValue.OAuthAuthority;

+ botAuthOption.ApplicationIdUri = authOptionsValue.ApplicationIdUri;

+ botAuthOption.InitiateLoginEndpoint = authOptionsValue.Bot.InitiateLoginEndpoint;

+ }).ValidateDataAnnotations();

+ ```

+ 1. After you've added the code blocks, you can find and delete the following code in the file:

+ ```csharp

+ // Create the bot as a transient. In this case the ASP Controller is expecting an IBot.

+ builder.Services.AddTransient<IBot, TeamsBot>();

+ ```

+ 1. Find the following code and replace it with the codes given in step e:

+ ```csharp

+ app.UseEndpoints(endpoints =>

+ {

+ endpoints.MapControllers();

+ });

+ ```

+ 1. Replace the codes in step d with the following codes:

+ ```csharp

+ app.UseEndpoints(endpoints =>

+ {

+ endpoints.MapControllers();

+ endpoints.MapRazorPages();

+ });

+ ```

+5. You can open `Templates\appPackage\manifest.template.json`, and add the following lines under `command` in `commandLists` of your bot to register your command in the Teams app manifest:

+ ```JSON

+ {

+ "title": "show",

+ "description": "Show user profile using Single Sign On feature"

+ }

+ ```

+</details>

+<details>

+<summary><b>Add a new command to the bot

+</b></summary>

+The following steps help to add a new command, after you've added SSO in your project:

+> [!NOTE]

+> The instructions apply only to command bot.

+1. You can create a new method in class `SsoOperations` in `SSO/SsoOperations` and add your own business logic to call Graph API:

+ ```csharp

+ public static async Task GetUserImageInfo(ITurnContext stepContext, string token, BotAuthenticationOptions botAuthOptions)

+ {

+ await stepContext.SendActivityAsync("Retrieving user information from Microsoft Graph ...");

+ var authProvider = new DelegateAuthenticationProvider((request) =>

+ {

+ request.Headers.Authorization =

+ new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", token);

+ return Task.CompletedTask;

+ });

+ var graphClient = new GraphServiceClient(authProvider);

+ // You can add following code to get your photo size:

+ // var photo = await graphClient.Me.Photo.Request().GetAsync();

+ // await stepContext.SendActivityAsync($"Size of your photo is: {photo.Width} * {photo.Height}");

+ }

+ ```

+1. Find the following line to register a new command:

+ ```csharp

+ ((SsoDialog)_dialog).addCommand("showUserInfo", "show", SsoOperations.ShowUserInfo);

+ ```

+1. You can register the new command `"photo"` to configure the method `'GetUserImageInfo'` by adding the following code:

+ ```csharp

+ ((SsoDialog)_dialog).addCommand("getUserImageInfo", "photo", SsoOperations.GetUserImageInfo);

+ ```

+1. Open the file `templates\appPackage\manifest.template.json`, and add the following lines under `command` in `commandLists` of your bot to register your command in the Teams app manifest:

+ ```JSON

+ {

+ "title": "photo",

+ "description": "Show user photo size using Single Sign On feature"

+ }

+ ```

+</details>

+<br>

+ > [!NOTE]

+ > Teams Toolkit uses the Azure AD manifest file to register an Azure AD app for SSO. You need to press **F5** to debug your app and test your SSO configuration.

+## Customize Azure AD app registration

+The [Azure AD app manifest](/azure/active-directory/develop/reference-app-manifest) allows you to customize various aspects of app registration. You can update the manifest file as needed. If you need to include more API permissions to access your required APIs, see [API permissions to access your desired APIs](https://github.com/OfficeDev/TeamsFx/wiki/#customize-aad-manifest-template).

+For more information on viewing your Azure AD app in Azure portal, see [how to view Azure AD application in Azure portal](https://github.com/OfficeDev/TeamsFx/wiki/Manage-AAD-application-in-Teams-Toolkit#How-to-view-the-AAD-app-on-the-Azure-portal).

+### Simplified SSO with TeamsFx

+TeamsFx helps to reduce your tasks by using SSO and accessing cloud resources down to single-line statements with zero configuration. With TeamsFx SDK, you can write user authentication code with the user identity `TeamsUserCredential`, such as in a browser environment.

+For more information on TeamsFx SDK, see:

+* [TeamsFx SDK](../TeamsFx-SDK.md) or [API reference](/javascript/api/@microsoft/teamsfx/?view=msteams-client-js-latest&preserve-view=true)

+* [Microsoft Teams Framework (TeamsFx) Sample Gallery](https://github.com/OfficeDev/TeamsFx-Samples/tree/v2)

+## How to use an existing Azure AD app

+For more information about how to use an existing Azure AD app in your TeamsFx project, see the [steps](https://github.com/OfficeDev/TeamsFx/wiki/Using-existing-Azure-AD-app-in-TeamsFx-project).

+## See also

+* [Teams Toolkit Overview](teams-toolkit-fundamentals-v4.md)

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

+* [Enable SSO for tab app](~/tabs/how-to/authentication/tab-sso-overview.md)

+* [Enable SSO for your bot and message extension](~/bots/how-to/authentication/bot-sso-overview.md)

+* [Prepare Accounts to build your Teams app](tools-prerequisites-v4.md#accounts-to-build-your-teams-app)

+ Title: Prepare to build apps with Teams Toolkit v4

+description: Learn about build environments such as SPFx of Teams Toolkit v4 in Visual Studio Code. Toolkit integrates Azure Functions capabilities for building apps.

+ms.localizationpriority: medium

+# Prepare to build apps using Teams Toolkit v4

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

+Teams Toolkit supports different build environments for creating apps. It helps to integrate Azure Functions capabilities and cloud services in the Teams app that you've built.

+## Build environments

+Teams Toolkit in Visual Studio Code offers a set of environments to build your Teams app. You can choose any of the following environments:

+* JavaScript or TypeScript

+* SharePoint Framework (SPFx)

+* C# using Blazor framework

+### Create your Teams app using JavaScript or TypeScript

+The apps built with JavaScript or TypeScript have the following advantages:

+* App comes with its own UI and UX capabilities that are rich and user friendly.

+* Provides quick upgrades to the existing apps.

+* Distributes apps on multiple platforms, such as Android and iOS.

+* Compatible for creating an app with the existing APIs.

+Teams Toolkit in Visual Studio Code supports building the following apps using JavaScript or TypeScript:

+* Tab app: Your tab app can have web-based content. You can have a custom tab for your web content in Teams or add Teams-specific functionality to your web content.

+* Bot app: A bot can be chatbot or conversational bot that allows you to do simple and repetitive tasks, such as customer service or support staff.

+* Notification bot: You can send messages in Teams channel or group or personal chat by notification bots with HTTP request.

+* Command bot: You can automate repetitive tasks using a command bot. Command bot helps you to respond simple queries or commands sent in chats.

+* Workflow bot: You can interact with an Adaptive Card enabled by the Adaptive Card action handler feature in the workflow bot app.

+* Message extension: You can interact with your web service through buttons and forms in the Microsoft Teams client.

+### Create your Teams app using SPFx

+Teams Toolkit in Visual Studio Code allows you to create tab apps using SPFx. These apps have the following advantages:

+* Provides easy integration with data residing in SPFx to your Teams.

+* Integrates your SPFx solution with your business APIs secured with Microsoft Azure Active Directory (Azure AD).

+* Gives access to various open-source tools.

+* Creates powerful applications that can deliver a great UX.

+* Integrates with other Microsoft 365 workloads easily.

+* Delivers flexibility to host applications wherever needed.

+### Create your Teams app using C# and Blazor

+* Teams Toolkit in Visual Studio allows you to create a Teams app using C# using the Blazor framework. You can create tab app, bot app, and message extension app in a C# build environment.

+## Support for Azure Functions

+You can use Teams Toolkit to integrate [Azure Functions](/azure/azure-functions/functions-overview) capabilities while building apps. You can focus on the pieces of code that matter, and Azure Functions handles the rest.

+Azure Functions provides "compute on-demand" in two significant ways:

+1. Allows implementing system's logic into your readily available blocks of code. These blocks are called functions.

+1. Meets the requirement with as many resources and function instances as necessary as the requests increase.

+Azure Functions integrates with an array of [cloud services](add-resource-v4.md#types-of-cloud-resources) to provide feature-rich implementations. The following are the common scenarios for Azure Functions:

+* Building a web API

+* Processing to database changes

+* Processing IoT data streams

+* Managing message queues

+## See also

+* [Teams Toolkit Overview](teams-toolkit-fundamentals-v4.md)

+* [Developer Portal for Teams](~/concepts/build-and-test/teams-developer-portal.md)

+* [Create a new Teams project](create-new-project-v4.md)

+* [Build your first Teams app](~/get-started/get-started-overview.md#build-your-first-teams-app)

+ Title: Create a new Teams app using Teams Toolkit v4

+description: In this module, learn how to create a new Teams app using Teams Toolkit v4.

+ms.localizationpriority: high

+zone_pivot_groups: teams-app-platform

+# Create a new Teams project using Teams Toolkit v4

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

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

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

+You can build a new Teams project by selecting **Create a new Teams app** in Teams Toolkit. You can create the following types of apps in Teams Toolkit:

+| App Types | Definition |

+| | |

+| **Basic Teams apps** | Basic Teams apps are tab, bot, or message extension that you can create and customize based on your requirement. |

+| **Scenario-based Teams apps** | Scenario-based Teams apps are notification bot, command bot, workflow bot, SSO-enabled tab, or SPFx tab app and these are suitable for one particular scenario. For example, a notification bot is suitable to send notifications and not used for chat. |

+## Create a new Teams app

+The process to create a new Teams app is similar for all types of apps except SPFx tab app, workflow bot, and notification bot.

+**To create a basic Teams app**:

+1. Open **Visual Studio Code**.

+1. Select the **Teams Toolkit** > **Create a new Teams app**.

+ :::image type="content" source="images/create-project-v4.png" alt-text="screenshot shows the Create New Project button in the Teams Toolkit sidebar.":::

+1. Select **Start with a Teams capability**.

+ :::image type="content" source="images/select-app-type-v4.png" alt-text="Screenshot shows the option to select app type." lightbox="images/select-app-type-v4.png":::

+1. Ensure that **Tab** is selected as app capability.

+ :::image type="content" source="images/select-capabilities-tabapp_1-v4.png" alt-text="Select App Capability":::

+1. Select **JavaScript** as the programming language.

+ :::image type="content" source="images/select-language-tab_1-v4.png" alt-text="Screenshot showing how to select the programming language.":::

+1. Select **Default folder** to store your project root folder in the default location.

+ :::image type="content" source="images/select-default-location-v4.png" alt-text="Select default location":::

+ <details>

+ <summary>Learn to change the default folder:</summary>

+ 1. Select **Browse**.

+ :::image type="content" source="images/select-browse_1-v4.png" alt-text="Select browse for storage":::

+ 1. Select the location for project workspace.

+ :::image type="content" source="images/select-folder_1-v4.png" alt-text="select-folder for storage":::

+ The folder you select is the location for your project workspace.

+ </details>

+1. Enter a suitable name for your app, such as helloworld, as the application name. Ensure that you use only alphanumeric characters. Press **Enter**.

+ :::image type="content" source="images/enter-name-tab1-v4.png" alt-text="Screenshot showing where to enter the app name.":::

+ By default, your app project opens in a new window. You can open your app project in the current window as well.

+ :::image type="content" source="images/new-window-notification-v4.png" alt-text="New window notification":::

+ The Teams tab app is created in a few seconds.

+ :::image type="content" source="images/tab-app-created-v4.png" alt-text="Screenshot showing the app created." lightbox="images/tab-app-created-v4.png":::

+### Directory structure for different app types

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

+<br>

+<details>

+<summary><b>Directory structure for basic Teams app</b></summary>

+The following example shows a basic Teams tab app directory structure:

+| Folder name | Contents |

+| | |

+| `.fx\configs` | Configuration files that you can customize for the Teams app. |

+| - `.fx\configs\azure.parameters.<envName>.json` | Parameters file for Azure bicep provision for every environment. |

+| - `.fx\configs\config.<envName>.json` | Configuration file for every environment. |

+| - `.fx\configs\projectSettings.json` | Global project settings that apply to all environments. |

+| `tabs` | Code for the Tab capability needed at runtime, such as the privacy notice, terms of use, and configuration tabs. |

+| - `tabs\src\index.jsx` | Entry point for the front-end app, where the main app component is rendered with `ReactDOM.render()`. |

+| - `tabs\src\components\App.jsx` | Code for handling URL routing in the app. It calls the [Microsoft Teams JavaScript client library](~/tabs/how-to/using-teams-client-library.md) to establish communication between your app and Teams. |

+| - `tabs\src\components\Tab.jsx` | Code to implement the UI of your app. |

+| - `tabs\src\components\TabConfig.jsx` | Code to implement the UI that configures your app. |

+| `templates\appPackage` | App manifest template files, and the app icons: color.png and outline.png. |

+| - `templates\appPackage\manifest.template.json` | App manifest for running the app in local or remote environment. |

+| `templates\azure` | `bicep` template files. |

+> [!NOTE]

+> If you have a bot or message extension app, relevant folders are added to the directory structure.

+To learn more about the directory structure of different types of basic Teams apps, see the following table:

+| App Type | Links |

+| | |

+| For tab app | [Build your first tab app using JavaScript](~/sbs-gs-javascript.yml) |

+| For bot app | [Build your first bot app using JavaScript](~/sbs-gs-bot.yml) |

+| For message extension app | [Build your first message extension app using JavaScript](~/sbs-gs-msgext.yml) |

+</details>

+<br>

+<details>

+<summary><b>Directory structure for scenario-based Teams app</b></summary>

+The following example shows a scenario-based notification bot Teams app directory structure:

+The new project folder contains the following content:

+| Folder name | Contents |

+| | |

+| `.fx` | Project level settings, configuration, and environment information. |

+| `.vscode` | VS code files for local debug. |

+| `bot` | The bot source code. |

+| `templates` | Templates for Teams app manifest and corresponding Azure resources. |

+The core notification implementation is stored in the **bot** folder, and it contains:

+| File name | Contents |

+| | |

+| `src\adaptiveCards\` | Templates for Adaptive Card. |

+| `src\internal\` | Generated initialize code for notification functionality. |

+| `src\index.ts` | The entry point to handle bot messages and send notifications. |

+| `.gitignore` | File to exclude local files from the bot project. |

+| `package.json` | The npm package file for the bot project. |

+> [!NOTE]

+> If you have a command bot, workflow bot, SSO-enabled tab, or SPFx tab app, relevant folders are added to the directory structure.

+To learn more about the directory structure of different types of scenario-based Teams apps, see the following table:

+| App Type | Links |

+| | |

+| For notification bot app | [Send notification to Teams](~/sbs-gs-notificationbot.yml) |

+| For command bot app | [Build command bot](~/sbs-gs-commandbot.yml) |

+| For workflow bot app | [Create Teams workflow bot](~/sbs-gs-workflow-bot.yml) |

+| For SPFx tab app | [Build a Teams app with SPFx](~/sbs-gs-spfx.yml) |

+</details>

+<br>

+<details>

+<summary><b>Directory structure for multi-capability app</b></summary>

+You can add more features to your existing Teams app by using **Add features**. For example, if you add a bot app to the existing tab app, Teams Toolkit adds the bot folder with relevant files and code.

+The following image shows the directory structure of a tab app:

+ :::image type="content" source="images/tabapp-directory-v4.png" alt-text="Tab app directory structure":::

+The following image shows the directory structure of tab app with bot feature:

+ :::image type="content" source="images/tab-app-with-bot-app-v4.png" alt-text="Tab app with bot app directory structure":::

+</details>

+## Create new Teams app in Visual Studio

+Teams Toolkit provides Microsoft Teams app templates in Visual Studio to create Teams apps. You can search and select the Teams app template that you require when you create a new project. Teams Toolkit for Visual Studio provides 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 latest version | You can install the enterprise edition of Visual Studio, and then select the **ASP.NET and web development** workload and **Microsoft Teams Development Tools** for installing.|

+| &nbsp; | Teams Toolkit | A Visual Studio workload 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 sideload your Teams app into local Teams environment for testing app behavior. |

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

+## Create a new Teams app

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

+1. Open Visual Studio.

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

+ * Select **Create a new project** under **Get started** to select a project template.

+ * Select **Continue without Code** to open Visual Studio without selecting a Teams Toolkit template.

+ :::image type="content" source="images/vs-create-new-project1_1_2-v4.png" alt-text="Create new project with code from get started":::

+ * If your open Visual Studio code without selecting a Teams Toolkit template, select **File > New > Project** in Visual Studio to create a Teams app.

+ :::image type="content" source="images/vs-create-new-project2_1_2-v4.png" alt-text="Create new project from file menu":::

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

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

+ :::image type="content" source="images/visual-studio-v4.png" alt-text="Search and choose microsoft teams app":::

+1. Select **Next**.

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

+ :::image type="content" source="images/vs-ms-teams-app-project-name_1_2-v4.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**. If you want, you can change the solution name with no effect on the project name.

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

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

+ 1. If required, select the checkbox to save the project and solution in the same folder. For this tutorial, you don't need this option.

+ 1. Select **Create**.

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

+1. Ensure **Tab** is selected, then select **Create**.

+ > [!NOTE]

+ > If you want to add single sign-on capability to your Teams app, select the Configure with single sign-on checkbox. For more information on single sign-in in Teams app created using Teams Toolkit, see [Add single sign-on to your Teams apps](/microsoftteams/platform/toolkit/add-single-sign-on?pivots=visual-studio).

+ :::image type="content" source="images/vs-ms-teams-app-type_3_1-v4.png" alt-text="Select the teams app type":::

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

+ The **GettingStarted .txt** window appears.

+ :::image type="content" source="images/vs-getting-started-page_1-v4.png" alt-text="Select the Getting Started teams toolkit":::

+You have created the app project scaffolding for your Teams app using Teams Toolkit template.

+### Directory Structure

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

+* **Directory structure for basic Teams apps**

+ :::image type="content" source="images/vs-create-new-project-solution-explorer_1_3-v4.png" alt-text="Select the tab Solution Explorer teams toolkit":::

+* **Directory structure for scenario-based Teams apps**

+ :::image type="content" source="images/vs-create-new-project-solution-explorer_2-v4.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 types. The following table lists all the templates available:

+|Teams app templates |Description |

+|||

+|**Notification Bot** |Notification bot app can send notifications 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 select triggered notification based on your business scenario. |

+|**Command Bot** |You 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 (SSO) using Teams account. |

+|**Message Extension** |Message extension app implements simple features like creating an Adaptive Card, searching Nugget packages, unfurling links for the `dev.botframework.com` domain. |

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

+## See also

+* [Teams Toolkit Overview](teams-toolkit-fundamentals-v4.md)

+* [Build a Teams app with Blazor](~/sbs-gs-blazorupdate.yml)

+* [Build a Teams app with C# or .NET](~/sbs-gs-csharp.yml)

+* [Prerequisites for all types of environment and create your Teams app](tools-prerequisites-v4.md)

+* [Prepare to build apps using Microsoft Teams Toolkit](build-environments-v4.md)

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

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

+ Title: Debug background processes v4

+description: In this module, learn how Visual Studio Code and Teams Toolkit work during local debug process. Also learn how to register and configure your Teams app in Teams toolkit v4.

+ms.localizationpriority: high

+# Debug background process v4

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

+The local debug process involves the `.vscode/launch.json` and `.vscode/tasks.json` files to configure the debugger in Microsoft Visual Studio Code. The Visual Studio Code launches the debuggers, and Microsoft Edge or Google Chrome launches a new browser instance.

+The debug process workflow is as follows:

+1. `launch.json` file configures the debugger in Visual Studio Code.

+2. Visual Studio Code runs the compound **preLaunchTask**, **Start Teams App Locally** in `.vscode/tasks.json` file.

+3. Visual Studio Code then launches the debuggers specified in the compound configurations, such as **Attach to Bot**, **Attach to Backend**, **Attach to Frontend**, and **Launch Bot**.

+4. Microsoft Edge or Google Chrome launches a new browser instance and opens a web page to load Teams client.

+## Verification of prerequisites

+Teams Toolkit checks the following prerequisites during the debug process:

+* Node.js, applicable for the following project types:

+ |Project type|Node.js LTS version|

+ |-|--|

+ |Tab | 14, 16 (recommended) |

+ |SPFx Tab | 14, 16 (recommended)|

+ |Bot | 14, 16 (recommended)|

+ |Message extension | 14, 16 (recommended) |

+For more information, see [Node.js version compatibility table for project type](tools-prerequisites-v4.md#nodejs-version-compatibility-table-for-project-type).

+* Teams Toolkit prompts you to sign in to Microsoft 365 account, if you haven't signed in with your valid credentials.

+* Custom app uploading or sideloading for your developer tenant is turned on, to prevent local debug termination.

+* Teams Toolkit installs Ngrok npm package `ngrok@4.2.2` in `~/.fx/bin/ngrok`, if Ngrok isn't installed or the version doesn't match the requirement. Ngrok binary version 2.3 is applicable for bot and message extension. The Ngrok binary is managed by Ngrok npm package in `/.fx/bin/ngrok/node modules/ngrok/bin`.

+* Teams Toolkit installs Azure Functions Core Tools npm package. `azure-functions-core-tools@3` for **Windows** and **MacOs** in `~/.fx/bin/func`, if Azure Functions Core Tools version 4 isn't installed or the version doesn't match the requirement. The Azure Functions Core Tools npm package in `~/.fx/bin/func/node_modules/azure-functions-core-tools/bin` manages Azure Functions Core Tools binary. For Linux, the local debug terminates.

+* Teams Toolkit installs .NET Core SDK for **Windows** and **MacOS** in `~/.fx/bin/dotnet`.NET Core SDK version applicable for Azure Functions, if .NET Core SDK isn't installed or the version doesn't match the requirement. For Linux, the local debug terminates.

+ The following table lists the .NET Core versions:

+ | Platform | Software|

+ | | |

+ |Windows, macOS (x64), and Linux | **3.1 (recommended)**, 5.0, 6.0 |

+ |macOS (arm64) |6.0 |

+* Development certificate, if the development certificate for localhost isn't installed for tab in **Windows** or **MacOS**, then Teams Toolkit prompts you to install it.

+* Azure Functions binding extensions defined in `api/extensions.csproj`, if Azure Functions binding extensions isn't installed, then Teams Toolkit installs Azure Functions binding extensions.

+* npm packages, applicable for tab app, bot app, message extension, and Azure Functions. If npm packages aren't installed, then Teams Toolkit installs all npm packages.

+* Bot and message extension, Teams Toolkit starts Ngrok to create an HTTP tunnel for bot and message extension.

+* Ports available, if tab, bot, message extension, and Azure Functions ports are unavailable, the local debug terminates.

+ The following table lists the ports available for components:

+ | Component | Port |

+ | | |

+ | Tab | 53000 |

+ | Bot or message extension | 3978 |

+ | Node inspector for bot or message extension | 9239 |

+ | Azure Functions | 7071 |

+ | Node inspector for Azure Functions | 9229 |

+<!-- The following table lists the limitations if the required software is unavailable for debugging:

+|Project type|Installation| Limitation|

+|-|--|--|

+|Tab without Azure functions | Node.js LTS versions 10, 12, **14 (recommended)**, 16 | The local debug terminates, if Node.js isn't installed or the version doesn't match the requirement.|

+|Tab with Azure functions | Node.js LTS versions 10, 12, **14 (recommended)** |The local debug terminates, if Node.js isn't installed or the version doesn't match the requirement.|

+|Bot | Node.js LTS versions 10, 12, **14 (recommended)**, 16|The local debug terminates, if Node.js isn't installed or the version doesn't match the requirement.|

+|Message extension | Node.js LTS versions 10, 12, **14 (recommended)**, 16 |The local debug terminates, if Node.js isn't installed or the version doesn't match the requirement.|

+|Sign-in to Microsoft 365 account | Microsoft 365 credentials |Teams Toolkit prompts you to sign-in to Microsoft 365 account, if you haven't signed in. |

+|Bot, message extension | Ngrok version 2.3| ΓÇó If Ngrok isn't installed or the version doesn't match the requirement, the Teams Toolkit installs Ngrok NPM package `ngrok@4.2.2` in `~/.fx/bin/ngrok`. </br> ΓÇó The Ngrok binary is managed by Ngrok NPM package in `/.fx/bin/ngrok/node modules/ngrok/bin`.|

+|Azure functions | Azure Functions Core Tools version 3| ΓÇó If Azure Functions Core Tools isn't installed or the version doesn't match the requirement, the Teams Toolkit installs Azure Functions Core Tools NPM package, azure-functions-core-tools@3 for **Windows** and for **macOs** in `~/.fx/bin/func`. </br> ΓÇó The Azure Functions Core Tools NPM package in `~/.fx/bin/func/node_modules/azure-functions-core-tools/bin` manages Azure Functions Core Tools binary. For Linux, the local debug terminates.|

+|Azure functions |.NET Core SDK version|ΓÇó If .NET Core SDK isn't installed or the version doesn't match the requirement, the Toolkit installs .NET Core SDK for Windows and macOS in `~/.fx/bin/dotnet`.</br> ΓÇó For Linux, the local debug terminates.|

+|Azure functions | Azure functions binding extensions defined in `api/extensions.csproj`| If Azure functions binding extensions isn't installed, the Toolkit installs Azure functions binding extensions.|

+|NPM packages| NPM packages for tab app, bot app, message extension app, and Azure functions|If NPM isn't installed, the Toolkit installs all NPM packages.|

+|Bot and message extension | Ngrok |Toolkit starts Ngrok to create a HTTP tunnel for bot and message extension. |

+> [!NOTE]

+> If tab, bot, message extension, and Azure functions ports are unavailable, the local debug terminates.

+Use the following .NET Core versions:

+| Platform | Software|

+| | |

+|Windows, macOs (x64), Linux | **3.1 (recommended)**, 5.0, 6.0 |

+|macOs (arm64) |6.0 |

+> [!NOTE]

+> If the development certificate for localhost isn't installed for tab in Windows or MacOS, the Teams Toolkit prompts you to install it.</br> -->

+When you select **Start Debugging (F5)**, Teams Toolkit output channel displays the progress and result after checking the prerequisites.

+ :::image type="content" source="images/prerequisites-debugcheck1-v4.png" alt-text="Prerequisites check summary" lightbox="images/prerequisites-debugcheck1-v4.png":::

+## Register and configure Teams app

+In the set-up process, Teams Toolkit prepares the following registrations and configurations for your Teams app:

+1. [Registers and configures Microsoft Azure Active Directory(Azure AD) app](#registers-and-configures-microsoft-azure-active-directoryazure-ad-app)

+1. [Registers and configures bot](#registers-and-configures-bot)

+1. [Registers and configures Teams app](#registers-and-configures-teams-app)

+### Registers and configures Microsoft Azure Active Directory(Azure AD) app

+1. Registers an Azure AD app.

+2. Creates a Client Secret.

+3. Exposes an API.

+ a. Configures Application ID URI. For tab, `api://localhost/{appId}`. For bot or message extension, `api://botid-{botid}`.

+ b. Adds a scope named `access_as_user`. Enables it for **Admin and users**.

+4. Configures API permissions. Adds Microsoft Graph permission to **User.Read**.

+ The following table lists the configuration of the authentication:

+ | Project type | Redirect URIs for web | Redirect URIs for single-page application |

+ | | | |

+ | Tab | `https://localhost:53000/auth-end.html` | `https://localhost:53000/auth-end.html?clientId={appId>}` |

+ | Bot or message extension | `https://ngrok.io/auth-end.html` | NA |

+ The following table lists the configurations of Microsoft 365 client application with the client IDs:

+ | Microsoft 365 client application | Client ID |

+ | | |

+ | Teams desktop, mobile | 1fec8e78-bce4-4aaf-ab1b-5451cc387264 |

+ | Teams web | 5e3ce6c0-2b1f-4285-8d4b-75ee78787346 |

+ | microsoft365.com (formerly office.com) | 4345a7b9-9a63-4910-a426-35363201d503 |

+ | microsoft365.com (formerly office.com) | 4765445b-32c6-49b0-83e6-1d93765276ca |

+ | Microsoft 365 desktop app | 0ec893e0-5785-4de6-99da-4ed124e5296c |

+ | Outlook desktop | d3590ed6-52b3-4102-aeff-aad2292ab01c |

+ | Outlook Web Access | 00000002-0000-0ff1-ce00-000000000000 |

+ | Outlook Web Access | bc59ab01-8403-45c6-8796-ac3ef710b3e3 |

+### Registers and configures bot

+For tab app or message extension:

+1. Registers an Azure AD application.

+1. Creates a Client Secret for the Azure AD application.

+1. Registers a bot in [Microsoft Bot Framework](https://dev.botframework.com/) using the Azure AD application.

+1. Adds Teams channel.

+1. Configures messaging endpoint as `https://{ngrokTunnelId}.ngrok.io/api/messages`.

+### Registers and configures Teams app

+Registers a Teams app in [Developer Portal](https://dev.teams.microsoft.com/home) using the manifest template in `templates/appPackage/manifest.template.json`.

+After registration and configuration of the app, local debug files generates.

+## Take a tour of your app source code

+You can view the project folders and files under **Explorer** in Visual Studio Code after the Teams Toolkit registers and configures your app. The following table lists the local debug files and the configuration types:

+| Folder name| Contents| Debug configuration type |

+| | | |

+| `.fx/configs/config.local.json` | Local debug configuration file | The values of each configuration generate and saves during local debug. |

+| `templates/appPackage/manifest.template.json` | Teams app manifest template file for local debug | The placeholders in the file during local debug. |

+| `tabs/.env.teams.local` | Environment variables file for tab | The values of each environment variable generate and saves during local debug. |

+| `bot/.env.teamsfx.local` | Environment variables file for bot and message extension| The values of each environment variable generate and saves during local debug. |

+| `api/.env.teamsfx.local` | Environment variables file for Azure Functions | The values of each environment variable generate and saves during local debug. |

+## See also

+* [Teams Toolkit Overview](teams-toolkit-fundamentals-v4.md)

+* [Debug your Teams app using Teams Toolkit](debug-local-v4.md)

+* [Use Teams Toolkit to provision cloud resources](provision-v4.md)

+* [Deploy to the cloud](deploy-v4.md)

+* [Preview and customize Teams app manifest](TeamsFx-preview-and-customize-app-manifest-v4.md)

+ Title: Debug your Teams app locally v4

+description: In this module, learn how to debug your Teams app locally in Teams Toolkit v4.

+ms.localizationpriority: high

+zone_pivot_groups: teams-app-platform

+# Debug your Teams app locally v4

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

+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 in Microsoft Visual Studio Code gives you the features to automate debugging of your Teams app locally. Visual Studio Code allows you to debug tab, bot, and message extension. You need to set up Teams Toolkit before you debug your app.

+> [!NOTE]

+> You can upgrade your old Teams Toolkit project to use new tasks, for more information, see [debug settings doc](https://aka.ms/teamsfx-debug-upgrade-new-tasks)

+## Set up your Teams Toolkit for debugging

+The following steps help you set up your Teams Toolkit before you initiate the debug process:

+# [Windows](#tab/Windows)

+1. Select **Debug (Edge)** or **Debug (Chrome)** from the **RUN AND DEBUG Γû╖** drop down.

+ :::image type="content" source="images/debug-run-v4.png" alt-text="Browser option":::

+1. Select **Run** > **Start Debugging (F5)**.

+ :::image type="content" source="images/start-debugging-v4.png" alt-text="Start debugging":::

+3. Select **Sign in** to Microsoft 365 account.

+ :::image type="content" source="images/microsoft365-signin-v4.PNG" alt-text="Sign in":::

+ > [!TIP]

+ > You can select **Read more** to learn about Microsoft 365 Developer Program. Your default web browser opens to let you sign-in to your Microsoft 365 account with your credentials.

+4. Select **Install** to install the development certificate for localhost.

+ :::image type="content" source="images/install-certificate-v4.PNG" alt-text="certificate":::

+ > [!TIP]

+ > You can select **Learn More** to know about the development certificate.

+5. Select **Yes** in the **Security Warning** dialog box:

+ :::image type="content" source="images/development-certificate-v4.PNG" alt-text="certification authority":::

+Toolkit launches a new Microsoft Edge or Chrome browser instance based on your selection and opens a web page to load Teams client.

+# [macOS](#tab/macOS)

+1. Select **Debug Edge** or **Debug Chrome** from the **RUN AND DEBUG Γû╖** drop down.

+ :::image type="content" source="images/debug-run-v4.png" alt-text="Browser lists":::

+1. Select **Start Debugging (F5)** or **Run** to run your Teams app in debug mode.

+ :::image type="content" source="images/start-debugging-v4.png" alt-text="Debug your app":::

+3. Select **Sign in** to Microsoft 365 account.

+ :::image type="content" source="images/microsoft365-signin-v4.PNG" alt-text="Sign into M365 account":::

+ > [!TIP]

+ > You can select **Read more** to learn about Microsoft 365 Developer Program. Your default web browser opens to let you sign-in to your Microsoft 365 account using your credentials.

+4. Select **Install** to install the development certificate for localhost.

+ :::image type="content" source="images/install-certificate-v4.PNG" alt-text="certificate":::

+ > [!TIP]

+ > You can select **Learn More** to know about the development certificate.

+5. Enter your **User Name** and **Password**, then select **Update Settings**.

+ :::image type="content" source="images/mac-settings-v4.png" alt-text="mac sign in":::

+Teams Toolkit launches your browser instance and opens a web page to load Teams client.

+## Debug your app

+After the initial setup process, Teams Toolkit starts the following processes:

+* [Starts app services](#starts-app-services)

+* [Launches debug configurations](#launches-debug-configurations)

+* [Sideloads the Teams app](#sideloads-the-teams-app)

+### Starts app services

+Runs tasks as defined in `.vscode/tasks.json`.

+| Component | Task name | Folder |

+| | | |

+| Tab | **Start Frontend** | tabs |

+| Bot or message extensions | **Start Bot** | bot |

+| Azure Functions | **Start Backend** | API |

+The following image displays task names in the **OUTPUT** and **TERMINAL** tabs of the Visual Studio Code while running tab, bot or message extension, and Azure Functions.

+### Launches debug configurations

+Launches the debug configurations as defined in `.vscode/launch.json`.

+The following table lists the debug configuration names and types for project with tab, bot or message extension app, and Azure Functions:

+| Component | Debug configuration name | Debug configuration type |

+| | | |

+| Tab | **Attach to Frontend (Edge)** or **Attach to Frontend (Chrome)** | pwa-msedge or pwa-chrome |

+| Bot or message extensions | **Attach to Bot** | pwa-node |

+| Azure Functions | **Attach to Backend** | pwa-node |

+The following table lists the debug configuration names and types for project with bot app, Azure Functions and without tab app:

+| Component | Debug configuration name | Debug configuration type |

+| | | |

+| Bot or message extension | **Launch Bot (Edge)** or **Launch Bot (Chrome)** | pwa-msedge or pwa-chrome |

+| Bot or message extension | **Attach to Bot** | pwa-node |

+| Azure Functions | **Attach to Backend** | pwa-node |

+### Sideloads the Teams app

+The configuration **Attach to Frontend** or **Launch Bot** launches Microsoft Edge or Chrome browser instance to load Teams client in web page. After the Teams client is loaded, Teams side-loads the Teams app that is controlled by the sideloading URL defined in the launch configurations [Microsoft Teams](https://teams.microsoft.com/l/app/>${localTeamsAppId}?installAppPackage=true&webjoin=true&${account-hint}). When Teams client loads in the web browser, select **Add** or select an option from the dropdown as per your requirement.

+ :::image type="content" source="images/hello-local-debug-v4.png" alt-text="Add local debug" lightbox="images/hello-local-debug-v4.png":::

+ Your app is added to Teams!

+## Debug your 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 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="images/vs-localdebug-teamsappdependencies-v4.png" alt-text="Teams app dependencies for local debug" lightbox="images/vs-localdebug-teamsappdependencies-v4.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="images/vs-localdebug-signin-m365-v4.png" alt-text="Sign in to Microsoft 365 account":::

+ > [!Note]

+ > Learn more about sideloading permission by visiting [Prepare your Microsoft 365 tenant](~/concepts/build-and-test/prepare-your-o365-tenant.md).

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

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

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

+ > [!Note]

+ > Learn more by visiting [Teams Toolkit Overview](teams-toolkit-fundamentals-v4.md).

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

+ :::image type="content" source="images/vs-localdebug-add-loadapp-v4.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, or any other API tool.

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

+## Next step

+> [!div class="nextstepaction"]

+> [Debug background process](debug-background-process-v4.md)

+## See also

+* [Teams Toolkit Overview](teams-toolkit-fundamentals-v4.md)

+* [Introduction to Azure Functions](/azure/azure-functions/functions-overview)

+* [Use Teams Toolkit to provision cloud resources](provision-v4.md)

+* [Add capabilities to your Teams apps](add-capability-v4.md)

+* [Deploy to the cloud](deploy-v4.md)

+* [Manage multiple environments in Teams Toolkit](TeamsFx-multi-env-v4.md)

+ Title: Debug your Teams app v4

+description: In this module, learn how to debug your Teams app, and key features of Teams Toolkit v4.

+ms.localizationpriority: high

+zone_pivot_groups: teams-app-platform

+# Debug your Teams app v4

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

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

+During the debug process:

+* Teams Toolkit automatically starts app services, launches debuggers, and sideloads the Teams app.

+* Teams Toolkit checks the prerequisites during the debug background process.

+* Your Teams app is available for preview in Teams web client locally after debugging.

+* You can also customize debug settings to use your bot endpoints, development certificate, or debug partial component to load your configured app.

+* Visual Studio Code allows you to debug tab, bot, message extension, and Azure Functions.

+## Key debug features of Teams Toolkit

+Teams Toolkit supports the following debug features:

+* [Start debugging](#start-debugging)

+* [Multi-target debugging](#multi-target-debugging)

+* [Toggle breakpoints](#toggle-breakpoints)

+* [Hot reload](#hot-reload)

+* [Stop debugging](#stop-debugging)

+Teams Toolkit performs background functions during debug process, which include verifying the prerequisites required for debug. You can see the progress of the verification process in the output channel of Teams Toolkit. In the setup process you can register and configure your Teams app.

+### Start debugging

+You can press **F5** as a single operation to start debugging. Teams Toolkit starts to check prerequisites, registers Microsoft Azure Active Directory (Azure AD) app, Teams app, and registers bot, starts services, and launches browser.

+### Multi-target debugging

+Teams Toolkit utilizes multi-target debugging feature to debug tab, bot, message extension, and Azure Functions at the same time.

+### Toggle breakpoints

+You can toggle breakpoints on the source codes of tabs, bots, message extensions, and Azure Functions. The breakpoints execute when you interact with the Teams app in a web browser. The following image shows toggle breakpoint:

+ :::image type="content" source="images/toggle-points-v4.png" alt-text="toggle breakpoints":::

+### Hot reload

+You can update and save the source codes of tab, bot, message extension, and Azure Functions at the same time when you're debugging the Teams app. The app reloads and the debugger reattach to the programming languages.

+ :::image type="content" source="images/hot-reload-v4.png" alt-text="hot-reload for source codes" lightbox="images/hot-reload-v4.png":::

+### Stop debugging

+When you complete local debug, you can select **Stop (Shift+F5)** or **[Alt] Disconnect (Shift+F5)** from the floating debugging toolbar to stop all debug sessions and terminate tasks. The following image shows the stop debug action:

+ :::image type="content" source="images/stop-debug-v4.png" alt-text="stop debugging":::

+## Prepare for debug

+The following steps help you to prepare for debug:

+### Sign in to Microsoft 365

+If you've signed up for Microsoft 365 already, sign in to Microsoft 365. For more information, see [Microsoft 365 developer program](tools-prerequisites-v4.md#microsoft-365-developer-program)

+### Toggle breakpoints

+Ensure that you can toggle breakpoints on the source codes of tabs, bots, message extensions, and Azure Functions for more information, see [Toggle breakpoints](#toggle-breakpoints)

+## Customize debug settings

+Teams Toolkit allows you to customize the debug settings to create your tab or bot. For more information on the full list of customizable options, see [debug settings doc](https://aka.ms/teamsfx-debug-tasks).

+You can also customize debug settings for your existing bot app.

+<br>

+<details>

+<summary><b>Learn how to use an existing bot for debugging</b></summary>

+To use an existing bot, you can set it up using its `botId` and `botPassword` arguments in Set up bot task. This task is to register resources and prepare local launch information for Bot.

+Use the following code snippet example to setup an existing bot for debugging:

+```json

+{

+ "label": "Set up Bot",

+ "type": "teamsfx",

+ "command": "debug-set-up-bot",

+ "args": {

+ //// Use your own AAD App for bot

+ // "botId": "",

+ // "botPassword": "", // use plain text or environment variable reference like ${env:BOT_PASSWORD}

+ "botMessagingEndpoint": "api/messages"

+ }

+}

+```

+1. Update `botId` with the Azure AD app client id for your existing bot.

+1. Update `botPassword` with the Azure AD app client secret for your bot.

+</details>

+### Customize Scenarios

+Here's a list of debug scenarios that you can use:

+<br>

+<details>

+<summary><b>Skip prerequisite checks</b></summary>

+In `.fx/configs/tasks.json` under `"Validate & install prerequisites"` > `"args"` > `"prerequisites"`, update the prerequisite checks you wish to skip.

+ :::image type="content" source="images/skip-prerequisite-checks-v4.png" alt-text="skip the prerequisite checks":::

+</details>

+<details>

+<summary><b>Use your development certificate</b></summary>

+1. In `.fx/configs/tasks.json`, uncheck `"devCert"` under `"Validate & install prerequisites"` > `"args"` > `"prerequisites"`.

+1. Set "SSL_CRT_FILE" and "SSL_KEY_FILE" in `.env.teamsfx.local` to your certificate file path and key file path.

+</details>

+<details>

+<summary><b>Customize npm install args</b></summary>

+In `.fx/configs/tasks.json`, set npmInstallArgs under `"Install npm packages"`.

+

+ :::image type="content" source="images/customize-npm-install-v4.png" alt-text="Install npm package":::

+</details>

+<details>

+<summary><b>Modify ports</b></summary>

+* Bot

+ 1. Search for `"3978"` across your project and look for appearances in `tasks.json`, `ngrok.yml` and `index.js`.

+ 1. Replace it with your port.

+ :::image type="content" source="images/modify-ports-bot-v4.png" alt-text="Replace your port for bot":::

+* Tab

+ 1. In `.fx/configs/tasks.json`, search for `"53000"`.

+ 1. Replace it with your port.

+ :::image type="content" source="images/modify-ports-tab-v4.png" alt-text="Replace your port for tab":::

+</details>

+<details>

+<summary><b>Use your own app package</b></summary>

+In `.fx/configs/tasks.json`, set `"appPackagePath"` under `"Build & upload Teams manifest"` to your app package's path.

+ :::image type="content" source="images/app-package-path-v4.png" alt-text="use your own app package path":::

+</details>

+<details>

+<summary><b>Use your own tunnel</b></summary>

+1. In `.fx/configs/tasks.json` under `"Start Teams App Locally"`, you can update `"Start Local tunnel"`.

+ :::image type="content" source="images/start-local-tunnel-v4.png" alt-text="Use your own tunnel":::

+1. Launch your own tunnel service then update `"botMessagingEndpoint"` to your own message endpoint in `.fx/configs/tasks.json` under `"Set up bot"`.

+ :::image type="content" source="images/set-up-bot-v4.png" alt-text="update messaging endpoint":::

+</details>

+<details>

+<summary><b>Add environment variables</b></summary>

+You can add environment variables to `.env.teamsfx.local` file for tab, bot, message extension, and Azure Functions. Teams Toolkit loads the environment variables you added to start services during local debug.

+ > [!NOTE]

+ > Ensure to start a new local debug after you add new environment variables, as the environment variables don't support hot reload.

+</details>

+<details>

+<summary><b>Debug partial component</b></summary>

+Teams Toolkit utilizes Visual Studio Code multi-target debugging to debug tab, bot, message extension, and Azure Functions at the same time. You can update `.vscode/launch.json` and `.vscode/tasks.json` to debug partial component. If you want to debug tab only in a tab plus bot with Azure Functions project, use the following steps:

+1. Update `"Attach to Bot"` and `"Attach to Backend"` from debug compound in `.vscode/launch.json`.

+ ```json

+ {

+ "name": "Debug (Edge)",

+ "configurations": [

+ "Attach to Frontend (Edge)",

+ // "Attach to Bot",

+ // "Attach to Backend""

+ ],

+ "preLaunchTask": "Pre Debug Check & Start All",

+ "presentation": {

+ "group": "all",

+ "order": 1

+ },

+ "stopAll": true

+ }

+ ```

+2. Update `"Start Backend"` and `"Start Bot"` from Start All task in .vscode/tasks.json.

+ ```json

+ {

+

+ "label": "Start All",

+ "dependsOn": [

+ "Start Frontend",

+ // "Start Backend",

+ // "Start Bot"

+ ]

+

+ }

+ ```

+</details>

+## Debug your 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.md) | 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 automates 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 launches the 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 (Shift+F5)** 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 the `.fx/configs/config.local.json` file to your endpoint.

+```JSON

+"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="images/vs-localdebug-launch-teamsapp-webapp-v4.png" alt-text="Launch teams as a web app by removing launchurl" lightbox="images/vs-localdebug-launch-teamsapp-webapp-v4.png":::

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

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

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

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

+1. Select **OK**.

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

+## Next

+> [!div class="nextstepaction"]

+> [Debug your app locally](debug-local-v4.md)

+## See also

+* [Teams Toolkit Overview](teams-toolkit-fundamentals-v4.md)

+* [Debug background process](debug-background-process-v4.md)

+* [Use Teams Toolkit to provision cloud resources](provision-v4.md)

+* [Deploy to the cloud](deploy-v4.md)

+* [Preview and customize Teams app manifest](TeamsFx-preview-and-customize-app-manifest-v4.md)

+ Title: Deploy to the cloud v4

+description: Learn how to deploy app to the cloud, Azure, or SharePoint using Teams Toolkit v4 in Visual Studio Code and Visual Studio.

+ms.localizationpriority: medium

+zone_pivot_groups: teams-app-platform

+# Deploy Teams app to the cloud v4

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

+Teams Toolkit helps to deploy or upload the front-end and back-end code in your app to your provisioned cloud resources in Azure.

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

+You can deploy the following to the cloud:

+* The tab, such as front-end apps are deployed to Azure Storage and configured for static web hosting or a SharePoint site.

+* The back-end APIs are deployed to Azure Functions.

+* The bot or message extension is deployed to Azure App Service.

+ > [!NOTE]

+ > Before you deploy app code to Azure cloud, you need to successfully complete the [provisioning of cloud resources](provision-v4.md).

+## Deploy Teams apps using Teams Toolkit

+The Get started guide helps to deploy using Teams Toolkit. You can use the following to deploy your Teams app:

+* [Deploy your app to Azure](/microsoftteams/platform/sbs-gs-javascript?tabs=vscode%2Cvsc%2Cviscode%2Cvcode&tutorial-step=4)

+* [Deploy your app to SharePoint](/microsoftteams/platform/sbs-gs-spfx?tabs=vscode%2Cviscode&tutorial-step=4)

+## Details on Teams app workload

+| Teams app workload | Source code | Build artifact| Target resource |

+|-|-|||

+|Tabs with React </br> The front-end workload| `yourProjectFolder/tabs`| `tabs/build` |Azure Storage |

+|Tabs with SharePoint </br> The front-end workload | `yourProjectFolder/SPFx`| `SPFx/sharepoint/solution` |SharePoint app catalog |

+|APIs on Azure Functions </br> The back-end workload | `yourProjectFolder/api`| Not applicable |Azure Functions |

+|Bots and message extensions </br> The back-end workload | `yourProjectFolder/bot` | Not applicable | Azure App Service |

+> [!NOTE]

+> When you include Azure API Management resource in your project and trigger deploy, you can publish your APIs in Azure Functions to Azure API Management service.

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

+You can deploy the following to the cloud:

+* The tab app, such as front-end apps are deployed to Azure Storage, configured for static web hosting.

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

+* The bot app or message extension is deployed to Azure App Services.

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

+## 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 **MyTeamsApp4** > **Teams Toolkit** > **Deploy to the cloud...**.

+ :::image type="content" source="images/vs-deploy-cloud_1-v4.png" alt-text="deploy to cloud":::

+ > [!NOTE]

+ > In this scenario the project name is MyTeamsApp4.

+1. In the pop-up window that appears, select **Deploy**.

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

+ After the deploy process completes, 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="images/VS-deploy-popup-v4.png" alt-text="deploy to cloud popup":::

+### Preview your app

+To preview your app, you need to create a **Zip App Package** and sideload into the Teams client.

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

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

+ :::image type="content" source="images/vs-deploy-ZipApp-package1-v4.png" alt-text="deploy to cloud popup.":::

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

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

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

+ Now your app is sideloaded into Teams.

+ :::image type="content" source="images/sideload-teams_1-v4.PNG" alt-text="Sideload Teams app in teams client":::

+The other way to preview your app:

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

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

+ :::image type="content" source="images/vs-deploy-preview-teams2-v4.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="images/sideload-teams_1-v4.PNG" alt-text="Sideload Teams app in teams client":::

+## See also

+* [Teams Toolkit Overview](teams-toolkit-fundamentals-v4.md)

+* [Create and deploy an Azure cloud service](/azure/cloud-services/cloud-services-how-to-create-deploy-portal)

+* [Create multi-capability Teams apps](add-capability-v4.md)

+* [Add cloud resources to Microsoft Teams app](add-resource-v4.md)

+* [Create new Teams app in Visual Studio](create-new-project-v4.md#create-new-teams-app-in-visual-studio)

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

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

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

+ Title: Explore Teams Toolkit v4

+description: Learn about Teams Toolkit v4 UI elements and task pane for Visual Studio Code, and different functions for Visual Studio.

+ms.localizationpriority: medium

+zone_pivot_groups: teams-app-platform

+# Explore Teams Toolkit v4

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

+You can explore the Teams Toolkit v4 look and feel within the Visual Studio Code or Visual Studio.

+This section gives you a tour of Teams Toolkit v4 and its features.

+## Take a tour of Teams Toolkit v4

+Teams Toolkit appears within Visual Studio Code as an extension. After you install Teams Toolkit, it opens within the Visual Studio Code window.

+| Serial No. | UI Elements | Definition |

+| | | |

+| 1 | **Documentation** | Access the Microsoft Teams Developer documentation. |

+| 2 | **How-to guides** | Access how-to guides for app scenario and app development. |

+| 3 | **Create a new Teams app** | Create a new Teams app based on your requirement. |

+| 4 | **View samples** | Select and build existing app samples based on common use cases for a Teams app. |

+| 5 | ΓÇó **New File** <br> ΓÇó **Open File** <br> ΓÇó **Open Folder** <br> ΓÇó **Clone Git Repository** | ΓÇó Create a new file. <br> ΓÇó Open the existing file. <br> ΓÇó Open the existing folder. <br> ΓÇó Clone the Git repository of your app project. |

+| 6 | **Recent** | View the recent files. |

+| 7 | **Get Started** | Explore Teams Toolkit and get an overview of the fundamentals. |

+### Explore the Teams Toolkit task pane

+You can explore the available functionalities from the Teams Toolkit task pane. The task pane appears only after you've created an app project using Teams Toolkit. The following video helps you to learn about the process of creating a new Teams app:

+ :::image type="content" source="images/javascript-bot-app1_1-v4.gif" alt-text="Create a Teams app":::

+After you create a new Teams app project, the directory structure of the app appears in the left panel and the **`README`** file in the right panel.

+Let's take a tour of Teams Toolkit.

+ In Visual Studio Code activity bar, the following icons are relevant to Teams Toolkit:

+| Select | To... |

+| | |

+| **Explorer** :::image type="icon" source="images/file-explorer-icon-v4.png" border="false"::: | View the directory structure of the app. |

+| **Run and Debug** :::image type="icon" source="images/run-debug-icon-v4.png" border="false"::: | Start the local or remote debug process. |

+| **Teams Toolkit** :::image type="icon" source="images/teams-toolkit-sidebar-icon-v4.PNG" border="false"::: | View the task pane in the Teams Toolkit. |

+From the task pane, you can see the following sections:

+ :::column span="":::

+ :::image type="content" source="images/accounts1_1-v4.png" alt-text="accounts section":::

+ :::column-end:::

+ :::column span="":::

+ To develop a Teams app, you need the following accounts:

+

+ * **Sign in to Microsoft 365**: Use your Microsoft 365 account with a valid E5 subscription for building your app.

+ * **Sign in to Azure**: Use your Azure account for deploying your app on Azure. You can [create a free Azure account](https://azure.microsoft.com/free/) before you start.

+ :::column-end:::

+ :::column span="":::

+ :::image type="content" source="images/environment1-v4.png" alt-text="Environment section"::::::

+ :::column-end:::

+ :::column span="":::

+ To deploy your Teams app, you need the following environments:

+

+ * **local**: Deploy your app in the default local environment with local environment configurations.

+ * **dev**: Deploy your app in the default dev environment with remote or cloud environment configurations.

+ You can create more environments, such as production or test, as you need.

+ :::column-end:::

+ :::column span="":::

+ :::image type="content" source="images/development-vsc-v4.png" alt-text="Development section":::

+ :::column-end:::

+ :::column span="":::

+ To create, customize, and debug your Teams app, you need the following features:

+

+ * **Create a new Teams app**: Use the Teams Toolkit wizard to prepare project scaffolding for app development.

+ * **View samples**: Select any of the Teams Toolkit's sample apps. The toolkit downloads the app code from GitHub and you can build the sample app.

+ * **View how-to-guides**: Select to view Teams app scenario guides and development guides.

+ * **Add features**: Add other Teams capabilities to the Teams app during the development process and add optional cloud resources suitable for your app.

+

+ * **Preview your Teams app (F5)**: Press **F5** to debug and preview your Teams app.

+ * **Edit manifest file**: Edit the Teams app manifest file with the Teams client.

+ :::column-end:::

+ :::column span="":::

+ :::image type="content" source="images/deployment1-v4.png" alt-text="Deployment section":::

+ :::column-end:::

+ :::column span="":::

+ To provision, deploy, and publish your Teams app, you need the following features:

+

+ * **Provision in the cloud**: Allocate Azure resources for your application. Teams Toolkit is integrated with Azure Resource Manager, and it registers your app with Azure AD automatically.

+ * **Zip Teams metadata package**: Create the app package that can be uploaded to Teams or Developer Portal. It contains the app manifest and app icons.

+

+ * **Deploy to the cloud**: Deploy the source code to Azure.

+

+ * **Publish to Teams**: Publish your developed app and distribute it to scopes, such as personal, team, channel, or organization.

+

+ * **Developer Portal for Teams**: Use Developer Portal to configure and manage your Teams app.

+ :::column-end:::

+ :::column span="":::

+ :::image type="content" source="images/help-and-feedback1-v4.png" alt-text="Help and feedback section":::

+ :::column-end:::

+ :::column span="":::

+ To access more information on Teams Toolkit, you need the following documentation and resources:

+

+ * **Documentation**: Select to access the Microsoft Teams Developer documentation.

+ * **Get started**: View Teams Toolkit Get started help within Visual Studio Code.

+ * **Report issues on GitHub**: Select to access GitHub page and raise any issues.

+ :::column-end:::

+### To view how-to guides

+1. Select **View how-to guides** from the Teams Toolkit task pane under Development section.

+ The **View how-to guides** menu appears.

+2. Select the type of how-to guide that you want to view.

+ :::image type="content" source="images/view-how-to-guides-v4.png" alt-text="Screenshot showing the how-to guides menu options." lightbox="images/view-how-to-guides-v4.png":::

+ * Select any one of the Teams app scenario guides to view the guide to develop an app for a common app scenario, such as sending notifications using a bot.

+ * Select any one of the Teams app development guides to view a guide that helps in app development, such as embedding a dashboard tab in a Teams app.

+## Explore Teams Toolkit for Visual Studio

+Teams Toolkit appears within Visual Studio as a workload. When you've created a Teams Toolkit app, you can see Teams Toolkit options in the following ways:

+# [Project](#tab/prj)

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

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

+1. You can access different Teams Toolkit options:

+ :::image type="content" source="images/teams-toolkit-project-menu-v4.png" alt-text="Teams toolkit project menu" lightbox="images/teams-toolkit-project-menu-v4.png":::

+# [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 app project name.

+1. Select **Teams Toolkit** to see the menu items.

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

+ > [!NOTE]

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

+After you've created your Teams app project, you can use the following options to develop and build your app:

+|Function |Description |

+|||

+|Prepare Teams App Dependencies |Before you debug locally, ensure that you prepare your app for dependencies. This option helps you to set up the local debug dependencies and register Teams app in the Teams platform. You must have a Microsoft 365 account. For more information, see [how to debug your Teams app locally using Visual Studio](debug-local-v4.md). |

+|Open Manifest File | This option helps you to open Teams app manifest file. Hover over the parameters to preview the values. For more information, see [how to edit Teams app manifest using Visual Studio](TeamsFx-preview-and-customize-app-manifest-v4.md). |

+|Update Manifest in Teams Developer Portal | This option helps you to update the manifest file. 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 [how to edit Teams app manifest using Visual Studio](TeamsFx-preview-and-customize-app-manifest-v4.md). |

+|Add Authentication Code | This option helps you obtain signed-in Teams user token to access Microsoft Graph and other APIs. Teams Toolkit facilitates the interaction by abstracting from the Microsoft Azure Active Directory (Azure AD) which flows and integrates with simple APIs. For more information, see [how to add single sign-on to Teams app](add-single-sign-on-v4.md). |

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

+|Deploy to the Cloud | This option helps you to copy your code to the cloud resources that you provisioned in Azure AD. For more information, see [how to deploy Teams app to the cloud using Visual Studio](deploy-v4.md#deploy-teams-app-to-the-cloud-using-visual-studio). |

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

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

+## See also

+* [Teams Toolkit Overview](teams-toolkit-fundamentals-v4.md)

+* [Create a new Teams app using Teams Toolkit](create-new-project-v4.md)

+* [App manifest schema](~/resources/schem)

+* [Prepare to build apps using Teams Toolkit](build-environments-v4.md)

+<!--

+|Section|Features|Details

+|||--|

+| **1. ACCOUNTS** | &nbsp; | &nbsp; |

+| &nbsp; |Microsoft 365 account| Use your Microsoft 365 account with a valid E5 subscription for building your app.|

+| &nbsp; | Azure Account | Use your Azure account for deploying app on Azure. You can [create a free Azure account](https://azure.microsoft.com/free/) before you start.|

+|**2.ENVIRONMENT** | &nbsp; | &nbsp;|

+| &nbsp; |Local |Deploy your app in the default local environment with local machine environment configurations.|

+| &nbsp; | Dev |Deploy your app in the default dev environment with remote or cloud environment configurations. You can create more environments, as you need.|

+| **3.DEVELOPMENT** | &nbsp; | &nbsp; |

+| &nbsp; | Create a new Teams app | Teams Toolkit helps you to create and customize your Teams app project that makes the Teams app development work simpler. Create a new Teams app helps you to start with Teams app development by creating new Teams project using Teams Toolkit either by using **Create new project**|

+| &nbsp; | View Samples | Select any of Teams Toolkit's sample apps. The toolkit downloads the app code from GitHub, and you can build the sample app.|

+| &nbsp; | Add Features | It helps you to add additional Teams capabilities such as **Tab** or **Bot** or **Message extension** or **Command bot** or **Notification bot**, or **SSO enabled tab** optionally add Azure resources such as **Azure SQL Database** or **Azure Key Vault**, or **Azure function** or **Azure API Management** which fits your development needs to your current Teams app. You can also add **API connection** or **Single Sign-on** or **CI/CD workflows** for your Teams app.

+| &nbsp; | Edit Manifest file | It helps you customize manifest file based on the app requirements |

+| **4.DEPLOYMENT** | &nbsp; | &nbsp; |

+| &nbsp;| Provision in the cloud | Allocate Azure resources for your application. Teams Toolkit is integrated with Azure Resource Manager.|

+| &nbsp; | Zip Teams metadata package| Create the app package that can be uploaded to Teams or Developer Portal. It contains the app manifest and app icons. |

+| &nbsp; | Deploy to the cloud| Deploy the source code to Azure.|

+| &nbsp; | Publish to Teams| Publish your developed app and distribute it to scopes, such as personal, team, channel, or organization.|

+| &nbsp; | Developer Portal for Teams| It is the primary tool for configuring, distributing, and managing your Microsoft Teams apps. You can collaborate with colleagues on your app, set up runtime environments, and much more. |

+| **5.HELP AND FEEDBACK** | &nbsp; | &nbsp; |

+| &nbsp; | Get Started | View the Teams Toolkit Get started help within Visual Studio Code.|

+| &nbsp; | Tutorials| Select to access different tutorials.|

+| &nbsp; | Documentation| Select to access the Microsoft Teams Developer Documentation.|

+| &nbsp; | Report issues on GitHub| It helps to get **Quick support** from product expert. Browse the existing issues before you create a new one, or visit [StackOverflow tag `teams-toolkit`](https://stackoverflow.com/questions/tagged/teams-toolkit) to submit feedback.|

+| **6.Explorer** | &nbsp; | &nbsp; |

+ &nbsp; | &nbsp; | It helps to view the directory structure of your app.|

+| **7.Run and Debug** | &nbsp; | &nbsp; |

+ &nbsp; | &nbsp; | To start the local or remote debug process.|

+-->

+ Title: FAQ v4

+description: In this module, See FAQ for Teams Toolkit v4 using Visual Studio Code

+ms.localizationpriority: medium

+# FAQ for Teams Toolkit v4

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

+You can see the FAQ for all the sections of Teams Toolkit for Visual Studio Code.

+FAQ for [Provision cloud resources using Teams Toolkit](provision-v4.md)

+<br>

+<details>

+<summary><b>How to troubleshoot?</b></summary>

+If you get errors with Teams Toolkit in Visual Studio Code, you can select **Get Help** on the error notification to go to the related document. If you're using TeamsFx CLI, there will be a hyperlink at the end of error message that points to the help doc. You can also view [provision help doc](https://aka.ms/teamsfx-arm-help) directly.

+<br>

+</details>

+<details>

+<summary><b>How can I switch to another Azure subscription while provisioning?</b></summary>

+1. Switch subscription in current account or log out and select a new subscription.

+2. If you have already provisioned current environment, you need to create a new environment and perform provision because ARM doesn't support moving resources.

+3. If you didn't provision current environment, you can trigger provision directly.

+<br>

+</details>

+<details>

+<summary><b>How can I change resource group while provisioning?</b></summary>

+Before provision, the tool asks you if you want to create a new resource group or use an existing one. You can provide a new resource group name or choose an existing one in this step.

+<br>

+</details>

+<details>

+<summary><b>How can I provision SharePoint-based app?</b></summary>

+You can follow [provision SharePoint-based app](/microsoftteams/platform/sbs-gs-spfx?tabs=vscode%2Cviscode&tutorial-step=4).

+> [!NOTE]

+> Currently, the building Teams app with SharePoint framework with Teams Toolkit doesn't have direct integration with Azure, the contents in the doc doesn't apply to SPFx based apps.

+<br>

+</details>

+ Title: Install Teams Toolkit v4

+description: Learn about installation of Teams Toolkit v4 of different versions in Visual Studio Code, Visual Studio, and marketplace.

+ms.localizationpriority: medium

+zone_pivot_groups: teams-app-platform

+# Install Teams Toolkit v4

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

+The Microsoft Azure Active Directory (Azure AD) manifest contain definitions of all the attributes of an Azure AD application object in the Microsoft identity platform.

+## Prerequisites

+Before installing Teams Toolkit for Visual Studio Code, you need to [download and install Visual Studio Code](https://code.visualstudio.com/Download).

+Before installing Teams Toolkit for Visual Studio, you need to [download and install Visual Studio 2022](https://aka.ms/VSDownload) using the Visual Studio Installer.

+## Install Teams Toolkit for Visual Studio Code

+You can install Teams Toolkit using **Extensions** in Visual Studio Code, or install it from the Visual Studio Code Marketplace.

+# [Visual Studio Code](#tab/vscode)

+1. Launch Visual Studio Code.

+1. Select **View > Extensions** or **Ctrl+Shift+X**. You can also open extensions by selecting the extensions :::image type="icon" source="images/vsc-ext-icon-v4.png" border="false":::icon from the Visual Studio Code activity bar.

+ The extensions marketplace pane appears.

+1. Enter **Teams Toolkit** in the search box.

+ :::image type="content" source="images/install-toolkit-2_2_1-v4.png" alt-text="Screenshot show the Toolkit.":::

+ Teams Toolkit appears in the search result list.

+1. Select **Teams Toolkit**, and then from the Teams Toolkit extension page that appears in the right pane, select **Install**.

+ After successful installation of Teams Toolkit in Visual Studio Code, the Teams Toolkit icon appears in the Visual Studio Code activity bar.

+ :::image type="content" source="images/after-install_2-v4.PNG" alt-text="Screenshot shows after install view.":::

+# [Marketplace](#tab/marketplace)

+1. Go to [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension) in a web browser.

+ :::image type="content" source="images/install-ttk-marketplace_1-v4.png" alt-text="Screenshot shows the installation of TTK Marketplace.":::

+1. Select **Install**.

+ :::image type="content" source="images/Install-ttk_1-v4.png" alt-text="Screenshot shows how to install TTK.":::

+1. In the pop-up window that appears, select **Open**.

+ :::image type="content" source="images/select-open_1-v4.png" alt-text="Screenshot shows a pop-up window to open Visual Studio Code.":::

+ Visual Studio Code opens with the Teams Toolkit extension page.

+ :::image type="content" source="images/ttk-in-vsc_1-v4.PNG" alt-text="Screenshot shows how to select TTK in VSC." lightbox="images/ttk-in-vsc_1-v4.PNG":::

+1. Select **Install**.

+ :::image type="content" source="images/select-install-ttk_2-v4.png" alt-text="Screenshot shows how to select Install TTK in VSC.":::

+ After successful installation of Teams Toolkit in Visual Studio Code, the Teams Toolkit icon appears in the Visual Studio Code activity bar.

+ :::image type="content" source="images/after-install_2-v4.PNG" alt-text="Screenshot shows the after installation view.":::

+## Install a different release version

+By default, Visual Studio Code automatically keeps Teams Toolkit up-to-date. If you want to install a different release version, follow these steps:

+1. Select **Extensions** :::image type="icon" source="images/extension icon-v4.png" border="false"::: from the Visual Studio Code activity bar.

+1. Enter **Teams Toolkit** in the search box.

+ :::image type="content" source="images/TeamsToolkit-search-v4.png" alt-text="Search for Teams Toolkit.":::

+1. Select **Teams Toolkit**.

+1. On the Teams Toolkit page, select the dropdown next to **Uninstall**.

+1. Select **Install Another Version...** from the dropdown.

+ :::image type="content" source="images/InstallAnotherVersion-v4.png" alt-text="Select other version of Visual Studio Code.":::

+1. Select the required version to install.

+ :::image type="content" source="images/Olderversions of VS Code-v4.png" alt-text="Screenshot shows versions other than the latest version of Visual Studio Code.":::

+ Teams Toolkit installs the version youΓÇÖve selected.

+## Install a pre-release version

+The Teams Toolkit for Visual Studio Code extension is available in a pre-release version. To install a Teams Toolkit pre-release version, follow these steps:

+1. Open **Visual Studio Code**.

+1. Select **Extensions** :::image type="icon" source="images/extension icon-v4.png" border="false"::: from the Visual Studio Code activity bar.

+1. Enter **Teams Toolkit** in the search box.

+1. On the Teams Toolkit page, select the dropdown arrow next to **Install**.

+1. Select **Install Pre-Release Version**.

+## Install Teams Toolkit for Visual Studio

+ > [!IMPORTANT]

+ > It's recommend you use Visual Studio 2022 version 17.4.1 or later for Teams Toolkit. It is the latest release to fix several known issues in previous versions of Visual Studio.

+1. Download the [Visual Studio installer](https://aka.ms/VSDownload), or open it if already installed.

+1. Select **Install** or select **Modify** if you've already installed Visual Studio.

+ Visual Studio installer shows all workloads, whether installed or available for installation.

+ :::image type="content" source="images/visual-studio-install_1_2-v4.png" alt-text="Screenshot shows how to install Visual studio.":::

+ Select the following options to install Teams Toolkit:

+ 1. Select the **Workloads** tab, then select the **ASP.NET and web development** workload.

+ 1. On the right, select the **Microsoft Teams development tools** in the **Optional** section of the **Installation details** panel.

+ 1. Select **Install**.

+1. After the installation completes, select **Launch** to open Visual Studio.

+ :::image type="content" source="images/visual-studio-launch_1_2-v4.png" alt-text="Screenshot shows how to launch visual studio.":::

+Teams Toolkit menu options are available in Visual Studio only when an app project created using Teams Toolkit is open.

+## Next steps

+> [!div class="nextstepaction"]

+> [Explore Teams Toolkit](explore-Teams-Toolkit-v4.md)

+## See also

+* [Teams Toolkit Overview](teams-toolkit-fundamentals-v4.md)

+* [Prepare to build apps](build-environments-v4.md)

+* [Provision cloud resources](provision-v4.md)

+* [Deploy Teams app to the cloud](deploy-v4.md)

+* [Create new Teams app](create-new-project-v4.md#create-new-teams-app-in-visual-studio)

+ Title: Use Teams Toolkit to provision cloud resources v4

+description: Learn how to do provision cloud resources using Teams Toolkit v4 in Visual Studio Code and Visual Studio, resource creation and customize resource provision.

+ms.localizationpriority: medium

+zone_pivot_groups: teams-app-platform

+# Provision cloud resources v4

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

+TeamsFx integrates with Azure and the Microsoft 365 cloud, which allows to place your app in Azure with a single command. TeamsFx integrates with Azure Resource Manager (ARM), which enables to provision Azure resources that your application needs for code approach.

+> [!NOTE]

+> Teams toolkit doesn't provide support to deploy resources to other cloud platforms except Azure, however, the user can deploy manually.

+## Provision using Teams Toolkit in Microsoft Visual Studio Code

+Provision Azure resources with a single command in Teams Toolkit for Visual Studio Code or TeamsFx CLI. For more information, see [how to provision Azure-based app](/microsoftteams/platform/sbs-gs-javascript?tabs=vscode%2Cvsc%2Cviscode%2Cvcode&tutorial-step=8).

+## Create Resources

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

+* Microsoft Azure Active Directory (Azure AD) app 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 ARM template defines all the Azure resources and helps to create required Azure resources during provision. When you [add a new capability resource](./add-resource-v4.md) to an existing project, the updated ARM template reflects the latest change.

+> [!NOTE]

+> Azure services incur costs in your subscription. For more information on cost estimation, see [pricing calculator](https://azure.microsoft.com/pricing/calculator/).

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

+<br>

+<details>

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

+|Resource|Purpose|Description |

+|-|--|--|

+| Azure storage | Hosts your tab app. | Enables static web app feature to host your tab app. |

+| User assigned identity | Authenticates Azure service-to-service requests. | Shares across different capabilities and resources. |

+</details>

+<br>

+<details>

+<summary><b>Resource creation for Teams bot or message extension app</b></summary>

+|Resource|Purpose| Description |

+|-|--|--|

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

+| App service plan for bot | Hosts the web app of bot. |Not applicable |

+| Web app for bot | Hosts your bot app. | - Adds user assigned identity to access other Azure resources. <br />- Adds app settings required by [TeamsFx SDK](https://www.npmjs.com/package/@microsoft/teamsfx). |

+| User assigned identity | Authenticates Azure service-to-service requests. | Shares across different capabilities and resources. |

+</details>

+<br>

+<details>

+<summary><b>Resource creation for Azure Functions in the project</b></summary>

+|Resource|Purpose| Description|

+|-|--|--|

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

+| Function app | Hosts your Azure Functions APIs. | - 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 an authentication setting that allows requests from your Teams app. <br />- Adds app settings required by [TeamsFx SDK](https://www.npmjs.com/package/@microsoft/teamsfx). |

+| Azure storage for function app | Requires to create function app. |Not applicable|

+| User assigned identity | Authenticates Azure service-to-service requests. | Shares across different capabilities and resources. |

+</details>

+<br>

+<details>

+<summary><b>Resource creation for Azure SQL in the project</b></summary>

+|Resource|Purpose | Description |

+|-|--|--|

+| Azure SQL server | Hosts the Azure SQL database instance. | Allows all Azure services to access the server. |

+| Azure SQL database | Stores data for your app. | Grants user assigned identity, read or write permission to the database. |

+| User assigned identity | Authenticates Azure service-to-service requests. | Shares across different capabilities and resources. |

+</details>

+<br>

+<details>

+<summary><b>Resource creation for Azure API Management in the project</b></summary>

+|Resource|Purpose|

+|-|--|

+| Azure AD app for API management service | Allows Microsoft Power Platform access APIs managed by API management service. |

+| API management service | Manages your APIs hosted in function app. |

+| API management product | Group your APIs, define terms of use, and runtime policies. |

+| API management OAuth server | Enables Microsoft Power Platform to access your APIs hosted in function app. |

+| User assigned identity | Authenticates Azure service-to-service requests. |

+</details>

+<br>

+<details>

+<summary><b>Resource created when including Azure Key Vault in the project</b></summary>

+|Resource|Purpose of this resource|

+|-|--|

+| Azure Key Vault Service | Manage secrets (for example, Azure AD app client secret) used by other Azure services. |

+| User Assigned Identity | Authenticates Azure service-to-service requests. |

+</details>

+<br>

+## Customize resource provision

+Teams Toolkit enables you to use an infrastructure-as-code approach to define the Azure resources that you want to provision and how you want to configure. Teams toolkit uses the 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 at `.fx\configs` folder, for passing parameters to templates.

+* ARM template files located at `templates\azure`, this folder contains following files:

+ | File | Function | Allow customization |

+ | | | |

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

+ | provision.bicep | Creates and configures Azure resources. | Yes |

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

+ | provision\xxx.bicep | Creates and configures each Azure resource consumed by `provision.bicep`. | Yes |

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

+> [!NOTE]

+> When you add resources or capabilities to your project, `teamsfx\xxx.bicep` is regenerated, you can't customize the same. To modify the `bicep` files, you can use Git to track your changes to `teamsfx\xxx.bicep` files, which helps you not lose changes while adding resources or capabilities.

+### Azure AD parameters

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

+There are two types of parameters:

+* [Azure AD application-related parameters](#azure-ad-application-related-parameters)

+* [Azure resource-related parameters](#azure-resource-related-parameters)

+##### Azure AD application-related parameters

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

+| | | | |

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

+| Microsoft 365 ClientSecret | `{{state.fx-resource-aad-app-for-teams.clientSecret}}` | Your app's Azure AD app client secret is 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 is created during provision. | [Use an existing Azure AD app for your bot](#use-an-existing-azure-ad-app-for-your-bot). |

+##### Azure resource-related parameters

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

+| | | | |

+| azureSqlAdmin | `{{state.fx-resource-azure-sql.admin}}` | Azure SQL Server admin account you provided during provision. | Delete the placeholder and fill the actual value. |

+| azureSqlAdminPassword | `{{state.fx-resource-azure-sql.adminPassword}}` | Azure SQL Server admin password you provided during provision. | Delete the placeholder and fill the actual value. |

+#### 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 the syntax `{{$env.YOUR_ENV_VARIABLE_NAME}}` in parameter values for the tool to resolve the current environment variable.

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

+```json

+...

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

+...

+```

+#### Customize ARM template files

+If the predefined templates don't meet your app requirements, 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 the bicep language, which is used to author an ARM template. You can get started with bicep at [bicep documentation](/azure/azure-resource-manager/bicep/).

+> [!NOTE]

+> The ARM template is shared by all environments. You can use [conditional deployment](/azure/azure-resource-manager/bicep/conditional-resource-deployment) if the provision behavior varies between the environments.

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

+> [!NOTE]

+> If you use other tool for further development, you can ignore these requirements.

+* 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 names of the auto-generated parameters and its property names remain unchanged. The auto-generated parameters may be used when you add more resources or capabilities to your project.

+* Ensure that the output of the auto-generated ARM template remains unchanged. You can add more outputs to the 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 apps

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

+* [Use an existing Azure AD app for your Teams app](#use-an-existing-azure-ad-app-for-your-teams-app)

+* [Use an existing Azure AD app for your bot](#use-an-existing-azure-ad-app-for-your-bot-1)

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

+You can add the following configuration snippet to `.fx\configs\config.{env}.json` file to use an Azure AD app created for your Teams app. If you don't have an Azure AD app yet or you already have one but don't know where to find the correct value, see [how to use existing Azure AD app in TeamsFx project](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/fx-core/using-existing-aad.md):

+```json

+"$schema": "https://aka.ms/teamsfx-env-config-schema",

+"description": "...",

+"manifest": {

+ ...

+},

+// Add code below. Note you need to replace the placeholders with real values.

+"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 for Teams Toolkit to 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 about how to manually update the Azure AD app. Follow the instructions to update your Azure AD app after provision.

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

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

+```json

+"$schema": "https://aka.ms/teamsfx-env-config-schema",

+"description": "...",

+"manifest": {

+ ...

+},

+// Add code below. Note you need to replace the placeholders with real values.

+"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 related environment variable for Teams Toolkit to resolve the actual client secret during provision.

+> [!NOTE]

+>

+> * Add the configuration snippet in the `.vscode/tasks.json` file. A Teams Toolkit generated project has a pre-defined set of Visual Studio Code debugging tasks in the `.vscode/tasks.json` file. These pre-defined tasks are generated by Teams Toolkit version 4.1.0 or later. You can use the `.vscode/tasks.json` file for customizing debugging tasks and the `.fx\configs\config.{env}.json` file for cloud environments.

+>

+> * To find the correct values for `appId` and `appPassword`, see [how to use existing Azure AD app in TeamsFx project](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/fx-core/using-existing-aad.md).

+#### Skip adding user for SQL database

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

+```json

+"skipAddingSqlUser": true

+```

+### Specify the name of function app instance

+You can use `contosoteamsappapi` for function app instance instead of using the default name.

+> [!NOTE]

+> If you have already provisioned the environment, specifying the name can create a new function app instance for you, instead of renaming the instance created previously.

+Follow the steps to specify the name of the function app instance:

+1. Open `.fx\configs\azure.parameters.{env}.json` for your current environment.

+2. Add a new property, for example, `functionAppName` under the `provisionParameters` section.

+3. Enter a value of `functionAppName`, for example `contosoteamsappapi`.

+4. Final parameter file is shown in the following snippet:

+ ```json

+ {

+ "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentParameters.json#",

+ "contentVersion": "1.0.0.0",

+ "parameters": {

+ "provisionParameters": {

+ "value": {

+ "functionAppName": "contosoteamsappapi"

+ ...

+ }

+ }

+ }

+ }

+ ```

+To add other Azure resource or storage to the app, consider the following scenario:

+Add Azure storage to your Azure function back-end to store blob data. There's no auto flow to update the `bicep` template with the Azure storage support. However, you can edit the `bicep` file and add the resource. Follow these steps:

+1. Create a tab project.

+2. Add function to the project. For more information, see [how to add resources](./add-resource-v4.md).

+3. Declare the new storage account in ARM template. You can declare the resource at `templates\azure\provision\function.bicep` directly. You can declare the resources in other places.

+ `````````bicep

+ var applicationStorageAccountName = 'myapp${uniqueString(resourceGroup().id)}'

+ resource applicationStorageAccount 'Microsoft.Storage/storageAccounts@2021-06-01' = {

+ name: applicationStorageAccountName

+ location: resourceGroup().location

+ kind: 'Storage'

+ sku: {

+ name: 'Standard_LRS'

+ }

+ }

+ `````````

+4. Update the Azure Functions app settings with Azure storage connection string in `templates\azure\provision\function.bicep`. Add the following snippet to `functionApp` resource's `appSettings` array:

+ ``````````````````bicep

+ {

+ name: 'MyAppStorageAccountConnectionString'

+ value: 'DefaultEndpointsProtocol=https;AccountName=${applicationStorageAccount.name};AccountKey=${listKeys(applicationStorageAccount.id, '2021-06-01').keys[0].value}'

+ }

+ ```````````````````

+5. You can update your function with Azure storage output bindings.

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

+1. Open the Microsoft Teams app project.

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

+ :::image type="content" source="images/teams-toolkit-vs-prepare-app-dependencies1_1-v4.png" alt-text="Prepare teams app dependencies":::

+1. Select **Sign in...** to sign in to Microsoft 365 account.

+ :::image type="content" source="images/teams-toolkit-vs-prepare1_1-v4.png" alt-text="Sign in to Microsoft 365":::

+ > [!NOTE]

+ > If you are already singed in, your username displays, or you have an option to **Add an 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 in to your account.

+ :::image type="content" source="images/teams-toolkit-vs-signin-M365_1-v4.png" alt-text="Confirm by selecting continue":::

+### Sign in to your Azure account

+1. Open **Visual Studio**.

+1. Open the Teams App project.

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

+ :::image type="content" source="images/teams-toolkit-vs-provision-in-cloud2-v4.png" alt-text="Sign in to Azure account":::

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

+ :::image type="content" source="images/teams-toolkit-vs-provision-start_1-v4.png" alt-text="Sign in to your Azure account":::

+ > [!NOTE]

+ > If you're already signed in, your username is displayed, or you have an option to **Add an 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="images/teams-toolkit-vs-provision-in-cloud2-v4.png" alt-text="Provision in cloud":::

+ **Provision** window appears.

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

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

+ 1. Select your **Resource group** from the dropdown menu or you can create new **Resource group** by selecting **New...**.

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

+ 1. Select **Provision**.

+ :::image type="content" source="images/teams-toolkit-vs-provision-select-subscription1_1-v4.png" alt-text="Select resource group":::

+1. In the pop-up window that appears, Select **Provision**.

+ :::image type="content" source="images/teams-toolkit-vs-provision-warning_1-v4.png" alt-text="Provision warning":::

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

+1. In the pop-up window that appears, Select **View Provisioned Resources** to view all the resources that were provisioned.

+ :::image type="content" source="images/teams-toolkit-vs-provision-provision-success_1-v4.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) app 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 ARM templates define all the Azure resources and help you to create the 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 app</b></summary>

+| Resource | Purpose | Description |

+| | | |

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

+| App service | Hosts your Blazor tab app. | Not applicable |

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

+</details>

+<br>

+<details>

+<summary><b>Resource creation for Teams message extension app</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 | Authenticates Azure service-to-service requests. | Shares across different capabilities and resources. |

+</details>

+<br>

+<details>

+<summary><b>Resource creation for Teams command bot app</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 | Authenticates 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) app</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. |

+| Managed Identity | Authenticates 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 Functions) app</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. | 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 an 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 Functions) app</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. | 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 an 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 Functions) app</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 an 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 a 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 contents.

+## Customize resource provision

+Teams Toolkit enables you to use an infrastructure-as-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 | Provides an entry point for Azure resource provision. | Yes |

+ | provision.bicep | Creates and configures Azure resources. | Yes |

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

+ | provision\xxx.bicep | Creates and configures each Azure resource consumed by `provision.bicep`. | Yes |

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

+> [!NOTE]

+> When you add resources or capabilities to your project, `teamsfx\xxx.bicep` is regenerated, you can't customize the same. 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 a new environment. The actual values are resolved from `.fx\states\state.{env}.json` file.

+### Azure AD app related parameters

+| Parameter name | Default value placeholder | Meaning of the placeholder | 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 is 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 is 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 is 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 the environment variables. You can use this syntax `{{$env.YOUR_ENV_VARIABLE_NAME}}` in the parameter values for Teams Toolkit to resolve from the current environment variable.

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

+```json

+...

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

+...

+```

+### Customize ARM template files

+If the predefined templates don't meet your app requirements, 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 requirements:

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

+### Customize Teams app

+You can customize your bot or the Teams app by adding configuration snippets to use an Azure AD app created for your Teams app.

+Perform in the following ways to customize the Teams app:

+* [Use an existing Azure AD app for your Teams app](#use-an-existing-azure-ad-app-for-your-teams-app)

+* [Use an existing Azure AD app for your bot](#use-an-existing-azure-ad-app-for-your-bot)

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

+You can add the following configuration snippet to `.fx\configs\config.{env}.json` file to use an Azure AD app created for your Teams app. If you don't have an Azure AD app yet or you already have one but don't know where to find the correct value, see [how to use existing Azure AD app in TeamsFx project](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/fx-core/using-existing-aad.md):

+```json

+"$schema": "https://aka.ms/teamsfx-env-config-schema",

+"description": "...",

+"manifest": {

+ ...

+},

+// Add code below. Note you need to replace the placeholders with real values.

+"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 for Teams Toolkit to resolve the actual client secret during provision.

+> [!NOTE]

+> Ensure that 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 bot

+You can add the following configuration snippet to `.fx\configs\config.{env}.json` file 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, add the following configuration snippet to `.fx\configs\config.{env}.json` file to skip adding SQL database user:

+```json

+"skipAddingSqlUser": true

+```

+## See also

+* [Teams Toolkit Overview](teams-toolkit-fundamentals-v4.md)

+* [Deploy Teams app to the cloud](deploy-v4.md)

+* [Manage multiple environments](TeamsFx-multi-env-v4.md)

+* [Collaborate with other developers on Teams project](TeamsFx-collaboration-v4.md)

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

+ Title: Publish Teams apps using Teams Toolkit v4

+description: In this module, learn how to publish Teams apps using Teams Toolkit v4 and publish to individual scope or sideload permission.

+ms.localizationpriority: medium

+# Publish Teams apps using Teams Toolkit v4

+> [!IMPORTANT]

+>

+> We've introduced the Teams Toolkit v5 extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> [Teams Toolkit v4](~/toolkit/toolkit-v4/teams-toolkit-fundamentals-v4.md) extension will soon be deprecated.

+After creating the app, you can distribute your app to different scopes, such as an individual, a team, or an organization. The distribution depends on multiple factors such as needs, business and technical requirements, and your goal for the app. Distribution to different scope may need different review process. In general, the bigger the scope, the more review the app needs to go through for security and compliance concerns.

+Here's what you'll learn in this section:

+* [Publish to individual scope or sideload permission](#publish-to-individual-scope-or-sideload-permission)

+* [Publish to your organization](#publish-to-your-organization)

+* [Publish to Microsoft Teams store](#publish-to-microsoft-teams-store)

+## Prerequisites

+* Ensure to create your [app package](~/concepts/build-and-test/apps-package.md) and [validate it](https://dev.teams.microsoft.com/appvalidation.html) for errors.

+* [Enable custom app uploading](~/concepts/build-and-test/prepare-your-o365-tenant.md#enable-custom-teams-apps-and-turn-on-custom-app-uploading) in Teams.

+* Ensure that your app is running and accessible using HTTPs.

+* Ensure you have followed set of guidelines in the publish your app to the Microsoft Teams store to publish your app.

+## Publish to individual scope or sideload permission

+You can add a custom app to Teams by uploading an [app package](~/concepts/build-and-test/apps-package.md) in `.zip` file directly to a team or in personal context. Adding a custom app by uploading an app package is known as sideloading. It allows you to test app while being uploaded in Teams. You can build and test app in the following scenarios:

+* Test and debug an app locally.

+* Build an app for yourself, such as to automate a workflow.

+* Build an app for small set of users, such as, your work group.

+You can build an app for internal use and share it with your team without submitting it to the Microsoft Teams app catalog in the Teams app store. For more information, see [how to upload your app in Teams](~/concepts/deploy-and-publish/apps-upload.md).

+### Build app package

+You need to run **Provision in the cloud** before you build the app package. The following step helps you to build the app package:

+* Select **Zip Teams metadata package** under **DEPLOYMENT**.<br>

+ The generated app package is located in `{your project folder}\build\appPackage\appPackage.{env}.zip`.

+### Upload app package

+Perform the following steps to upload app package:

+1. In the Teams client, select **Apps** > **Manage your apps** > **Upload an app**.

+ :::image type="content" source="images/publish1_1-v4.png" alt-text="publish an app":::

+ **Upload an app** window appears.

+2. Select **Upload a custom app**.

+ :::image type="content" source="images/upload_1-v4.png" alt-text="upload an app":::

+ Now the app is sideloaded into the Teams client and you can add and view.

+## Publish to your organization

+When the app is ready for use in production, you can submit the app using the Teams app submission API, called from Microsoft Graph API. Teams app submission API is an integrated development environment (IDE) such as Microsoft Visual Studio Code installed with Teams toolkit. The following steps help you to publish the app to your organization:

+* [Publish from Teams Toolkit](#publish-from-teams-toolkit)

+* [Approve on Admin Center](#approve-on-admin-center)

+### Publish from Teams Toolkit

+The following steps help you to publish the app from Teams Toolkit:

+1. You can publish your Teams app in one of the following ways:

+ * Select **Publish to Teams** under **DEPLOYMENT**.

+ * Select **View** > **Command Palette...** > **Teams: Publish to Teams**.

+ :::image type="content" source="images/select-publish_1-v4.png" alt-text="Select Publish":::

+1. Select **Install for your organization**.

+ :::image type="content" source="images/installforyourorganization_1-v4.png" alt-text="Install for your organization":::

+ Now the app is successfully published to the admin portal and you see the following notice:

+ :::image type="content" source="images/confirm-publish_1-v4.png" alt-text="Confirm Publish":::

+Now the app is available on the **Manage apps** of Microsoft Teams admin center, where you and the admin can review and approve it.

+> [!NOTE]

+> The app doesn't publish to your organization's app store yet. The step submits the app to the Teams admin center where you can approve it for publishing to your organization's app store.

+### Approve on Admin Center

+Teams toolkit for Visual Studio Code built on top of the Teams App Submission API and it allows you to automate the submission-to-approval process for custom apps on Teams.

+ > [!NOTE]

+ > Ensure that you have Teams app project in Visual Studio code. As an admin, **Manage apps** in the [Microsoft Teams admin center](https://admin.teams.microsoft.com/policies/manage-apps) is where you can view and manage all Teams apps for your organization. You can do the following activities in the admin center:

+ >

+ > * See the org level status and properties of apps.

+ > * Approve or upload new custom apps to your organization's app store.

+ > * Block or allow apps at the org level.

+ > * Add apps to Teams.

+ > * Purchase services for third-party apps.

+ > * View permissions requested by apps.

+ > * Grant admin consent to apps.

+ > * [Manage org wide app settings](https://admin.teams.microsoft.com/policies/manage-apps).

+The following steps help you to approve from Admin Center:

+1. Select **Go to admin portal**.

+1. Select the :::image type="icon" source="images/Showall-v4.png"::: icon > **Teams apps** > **Manage apps**.

+ :::image type="content" source="images/select-manage-apps-v4.png" alt-text="Select Manage apps":::

+ You can view all Teams app for your organization.

+ In the **Pending approval** widget at the top of the page lets you know when a custom app is submitted for approval. In the table, a newly submitted app automatically publishes the status of submitted and blocked apps. You can sort the publishing status column in descending order to find the app.

+ :::image type="content" source="images/admin-approval-for-teams-app-1-v4.png" alt-text="approval":::

+1. Select the app name to go to the app details page. On the **About** tab, you can view details about the app, including description, status, and app ID.

+ :::image type="content" source="images/about-submitted-app-1-v4.png" alt-text="submitted app":::

+1. Select the status dropdown and change from **Submitted** to **Publish**.

+ After you publish the app, the publishing status changes to published and the status automatically changes to allowed.

+ For more information, see [Publish to your org](/microsoftteams/manage-apps?toc=%2Fmicrosoftteams%2Fplatform%2Ftoc.json&bc=%2Fmicrosoftteams%2Fplatform%2Fbreadcrumb%2Ftoc.json)

+## Publish to Microsoft Teams store

+You can distribute your app directly to the store inside Microsoft Teams and reach millions of users around the world. If your app is also featured in the store, you can instantly reach potential customers. The apps published to the Teams store also automatically list on Microsoft AppSource, which is the official marketplace for Microsoft 365 apps and solutions.

+For more information, see [how to publish to the Teams store](~/concepts/deploy-and-publish/appsource/publish.md#publish-your-app-to-the-microsoft-teams-store).

+## See also

+* [Teams Toolkit Overview](teams-toolkit-fundamentals-v4.md)

+* [Distribute your Microsoft Teams app](~/concepts/deploy-and-publish/apps-publish-overview.md)

+* [Create Teams app package](~/concepts/build-and-test/apps-package.md)

+* [Prepare your Microsoft 365 tenant](~/concepts/build-and-test/prepare-your-o365-tenant.md)

+* [Manage Teams app in the Microsoft Teams admin center](/microsoftteams/manage-apps?toc=%2Fmicrosoftteams%2Fplatform%2Ftoc.json&bc=%2Fmicrosoftteams%2Fplatform%2Fbreadcrumb%2Ftoc.json)

+ Title: Publish your Teams apps using Developer Portal v4

+description: Learn how to integrate with Developer Portal in Teams Toolkit v4.

+ms.localizationpriority: medium

+# Publish your Teams apps using Developer Portal v4

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

+You can configure and manage your app in Developer Portal within Teams Toolkit.

+## To Publish app using Developer Portal

+You can publish your app, which is created in Visual Studio and Visual Studio Code using Developer Portal:

+# [Visual Studio Code](#tab/visualstudiocode)

+The following are the steps to publish your app in Teams Developer Portal:

+1. In **Teams Toolkit**, under **DEPLOYMENT** select **Developer Portal for Teams**.

+ :::image type="content" source="images/dev-portal-ttk_1-v4.png" alt-text="Developer Portal for Teams":::

+ Developer Portal opens in a browser.

+1. Sign in to [Developer Portal for Teams](https://dev.teams.microsoft.com) using the corresponding account.

+1. To import your app package in zip format, select **Apps** > **Import app**.

+ :::image type="content" source="images/Select_Import_app-v4.png" alt-text="Select Import app":::

+1. Select **Publish** > **Publish to your org**.

+ :::image type="content" source="images/select_publish_1_v4.png" alt-text="Select to publish the app to your organization.":::

+# [Visual Studio](#tab/visualstudio)

+The following are the steps to publish your app in Teams Developer Portal:

+1. Select **Project** > **Teams Toolkit** > **Open Teams Developer Portal to Publish**.

+ :::image type="content" source="images/tdp-vs-v4.png" alt-text="Screenshot shows you how to open developer portal from visual studio.":::

+1. Select the app package.

+1. Teams Toolkit opens your app in **Teams Developer Portal** and direct you to the **Publish to your org** page, from there you can select **Publish your app** to continue with your publishing process.

+ :::image type="content" source="images/vs-tdp-v4.png" alt-text="Screenshot shows you the app open in Teams Developer Portal.":::

+## To update Manifest file and app package

+If there are any changes related to Teams app's manifest file, you can update the manifest and publish the Teams app again. To publish Teams app manually, you can use [Developer Portal for Teams](https://dev.teams.microsoft.com/home).

+1. Sign in to [Developer Portal for Teams](https://dev.teams.microsoft.com) using the corresponding account.

+1. Select **Apps** > **Import app** to import your app package in zip format.<br>

+ You need to replace the app, that you previously uploaded to the Developer Portal.

+1. Select **Publish** > **Publish to your org**.

+You can do the following configuration for your app in the Developer Portal:

+* **Basic information**: This section shows and allows you to edit the **App names**, **App ID**, **Descriptions**, **Version**, **Developer information**, **App URLs**, **Application (client) ID**, and **Microsoft Partner Network ID**.

+* **Branding**: This section allows you to add **Color icon** and **Outline icon** in `.png` format.

+* **App features**: This section allows you to add the following features to your app:

+ * Personal app

+ * Bot

+ * Connector

+ * Scene

+ * Group and channel app

+ * Messaging extension

+ * Meeting extension

+ * Activity feed notification

+* **Permissions**: This section allows you to give **Device permissions**, **Team Permissions**, **Chat/Meeting Permissions**, and **User Permissions** for your app.

+* **Single sign-on**: This section allows you to configure your app to authenticate users with single sign-on (SSO) and to specify your app's resource for getting authorization tokens.

+* **Languages**: This section allows you to set up or change the language of your app.

+* **Domain**: This section allows you to add the domains to load your apps in the Teams client, such as *.example.com.

+## See also

+* [Teams Toolkit Overview](teams-toolkit-fundamentals-v4.md)

+* [Developer Portal for Teams](~/concepts/build-and-test/teams-developer-portal.md)

+* [Manage your apps in Developer Portal](~/concepts/build-and-test/manage-your-apps-in-developer-portal.md)

+* [Develop your apps with Teams Toolkit](~/concepts/build-and-test/develop-your-apps-with-teams-toolkit.md)

+ Title: Sideload and test app in Teams environment v4

+description: In this module, learn how to sideload and test app in different environment using Teams toolkit v4.

+ms.localizationpriority: high

+# Sideload and test app in Teams environment v4

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

+After adding API connection, you can test API connection in the Teams Toolkit local environment and deploy your application to the cloud. In CI/CD pipeline, after set-up with different platform, you need to create Azure service principal to provision and deploy resources.

+In this section, you'll learn:

+* [Test API connection in local environment](#test-api-connection-in-local-environment)

+* [Deploy your application to Azure](#deploy-your-application-to-azure)

+* [Provision and deploy CI/CD resources](#provision-and-deploy-cicd-resources)

+## Test API connection in local environment

+The following steps help to test the API connection in the Teams Toolkit local environment:

+ 1. **Run npm install**

+ Run `npm install` under `bot` or `api` folder to install added packages.

+ 2. **Add API credentials to the local application settings**

+ Teams Toolkit doesn't ask for credentials, but it leaves placeholders in the local application settings file. Replace the placeholders with the appropriate credentials to access the API. The local application settings file is the `.env.teamsfx.local` file in the `bot` or `api` folder.

+ 3. **Use the API client to make API requests**

+ Import the API client from the source code that needs access to the API:

+ ```BASH

+ import { yourApiClient } from '{relative path to the generated file}'

+ ```

+ 4. **Generate http(s) requests to target API (with Axios)**

+ The generated API client is an Axios API client. Use the Axios client to make requests to the API.

+ > [!Note]

+ > [Axios](https://www.npmjs.com/package/axios) is a popular nodejs package that helps you with http(s) requests. For more information on how to make http(s) requests, see [Axios example documentation](https://axios-http.com/docs/example) to learn how to make http(s).

+## Deploy your application to Azure

+To deploy your application to Azure, you need to add the authentication to the application settings for the appropriate environment. For example, your API might have different credentials for `dev` and `prod`. Based on environment needs, configure Teams Toolkit.

+Teams Toolkit configures your local environment. The bootstrapped sample code contains comments that tell you what app settings you need to configure. For more information on application settings, see [Add app settings](https://github.com/OfficeDev/TeamsFx/wiki/%5BDocument%5D-Add-app-settings)

+## Provision and deploy CI/CD resources

+To provision and deploy resources targeting Azure inside CI/CD, you must create an Azure service principal for use.

+Perform the following steps to create Azure service principals:

+1. Register an Microsoft Azure Active Directory (Azure AD) application in single tenant.

+2. Assign a role to your Azure AD application to access your Azure subscription. The `Contributor` role is recommended.

+3. Create a new Azure AD application secret.

+> [!TIP]

+> Save your tenant id, application id (AZURE_SERVICE_PRINCIPAL_NAME), and the secret (AZURE_SERVICE_PRINCIPAL_PASSWORD) for future use.

+For more information, see [Azure service principals guidelines](/azure/active-directory/develop/howto-create-service-principal-portal). The following are the three ways to create service principals:

+* [Microsoft Azure portal](/azure/active-directory/develop/howto-create-service-principal-portal)

+* [Windows PowerShell](/azure/active-directory/develop/howto-authenticate-service-principal-powershell)

+* [Microsoft Azure CLI](/cli/azure/create-an-azure-service-principal-azure-cli)

+## See also

+* [Teams Toolkit Overview](teams-toolkit-fundamentals-v4.md)

+* [Publish Teams apps using Teams Toolkit](publish-v4.md)

+ Title: Teams Toolkit v4 Overview

+description: Learn about Teams Toolkit v4, it's installation, navigation, and user journey. Teams Toolkit is available for Visual Studio code and Visual Studio.

+ms.localizationpriority: medium

+zone_pivot_groups: teams-app-platform

+# Teams Toolkit v4 Overview

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

+Teams Toolkit makes it simple to get started with app development for Microsoft Teams using Visual Studio Code.

+* Start with a project templates for common line-of-business app scenarios or from a sample.

+* Save setup time with automated app registration and configuration.

+* Run and debug to Teams directly from familiar tools.

+* Smart defaults for hosting in Azure using infrastructure-as-code and Bicep.

+* Create unique configurations like dev, test, and prod using the environments feature.

+* Bring your app to your organization or the Teams App Store using built-in publishing tools.

+## Available for Visual Studio Code

+Teams Toolkit v4 is available for free for Visual Studio Code. For more information about installation and setup, see [install Teams Toolkit](./install-Teams-Toolkit-v4.md).

+| Teams Toolkit | Visual Studio Code |

+| - | |

+| Installation | Available in the VS Code Marketplace |

+| Build with | JavaScript, TypeScript, React, SPFx |

+Teams Toolkit makes it simple to get started with app development for Microsoft Teams using Visual Studio.

+* Start with a project templates for common line-of-business app scenarios or from a sample.

+* Save setup time with automated app registration and configuration.

+* Run and debug to Teams directly from familiar tools.

+* Smart defaults for hosting in Azure using infrastructure-as-code and Bicep.

+* Bring your app to your organization or the Teams App Store using built-in publishing tools.

+## Available for Visual Studio

+Teams Toolkit v4 is available for free for Visual Studio 2022 Community, Professional, and Enterprise. For more information about installation and setup, see [install Teams Toolkit](./install-Teams-Toolkit-v4.md).

+| Teams Toolkit | Visual Studio |

+| - | - |

+| Installation | Available in the Visual Studio Installer |

+| Build with | C#, .NET, ASP.NET, Blazor |

+## Features

+The following list provides the key features of Teams Toolkit:

+* [Project templates](#project-templates)

+* [Automatic registration and configuration](#automatic-registration-and-configuration)

+* [Multiple environments](#multiple-environments)

+* [Quick access to Teams Developer Portal](#quick-access-to-teams-developer-portal)

+* [Project templates](#project-templates)

+* [Automatic registration and configuration](#automatic-registration-and-configuration)

+### Project templates

+You can start directly with the capability-focused templates such as tabs, bots, and message extensions or by following existing samples if you're already familiar with Teams app development. Teams Toolkit reduces the complexity of getting started with templates for common line-of-business app scenarios and smart defaults to accelerate your time to production.

+### Automatic registration and configuration

+You can save time and let the toolkit automatically register the app in Teams Developer Portal. When you first run or debug the app, configure settings, such as Azure Active Directory (Azure AD) automatically. Sign in with your Microsoft 365 account to control where the app is configured and customized the included Azure AD manifest when you need flexibility.

+### Multiple environments

+You can create different groupings of cloud resources to run and test your app. Use the **dev** environment with your Azure subscription or create a new app with a different subscription for staging, test, and production.

+### Quick access to Teams Developer Portal

+You can access Teams Developer Portal quickly, where you can configure, distribute, and manage your app. For more information, see [manage your Teams apps using Developer Portal](~/concepts/build-and-test/manage-your-apps-in-developer-portal.md).

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

+* [Build tabs for Teams](~/tabs/what-are-tabs.md)

+* [Build bots for Teams](~/bots/what-are-bots.md)

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

+* [Create a new Teams app](create-new-project-v4.md)

+* [Provision cloud resources](provision-v4.md)

+* [Deploy Teams app to the cloud](deploy-v4.md)

+* [Publish Teams apps](publish-v4.md)

+ Title: Teams toolkit tutorial v4

+description: This tutorial helps you to select the app that you want to build and lists the associated guides.

+ms.localizationpriority: medium