+ :::image type="content" source="../../../assets/images/adaptive-cards/multi-tenant.png" alt-text="This screenshot shows how to select multi tenant for Microsoft AppID.":::

+ :::image type="content" source="../../../assets/images/adaptive-cards/create-azure-bot.png" alt-text="This screenshot show how to create Azure bot.":::

+ :::image type="content" source="../../../assets/images/adaptive-cards/validation-pane.png" alt-text="This screenshot show how Azure bot validation passes.":::

+ :::image type="content" source="../../../assets/images/adaptive-cards/go-to-resource-card.png" alt-text="This screenshot shows how to select resources group.":::

+ :::image type="content" source="../../../assets/images/adaptive-cards/azure-bot-ui.png" alt-text="This screenshot shows how to create Azure bot resources.":::

+ :::image type="content" source="../../../assets/images/adaptive-cards/config-microsoft-app-id.png" alt-text="This screenshot shows how to add Microsoft App ID to create client secret.":::

+ :::image type="content" source="~/assets/images/manage-bot-label.png" alt-text="This screenshot shows how to create manage bot.":::

+ :::image type="content" source="../../../assets/images/meetings-side-panel/newclientsecret.PNG" alt-text="This screenshot shows how to create new client secret.":::

+ :::image type="content" source="../../../assets/images/adaptive-cards/client-secret.png" alt-text="The screenshot shows how to enter description for the client secret.":::

+ :::image type="content" source="../../../assets/images/adaptive-cards/client-secret-value.png" alt-text="The screenshot shows how to save the client secret ID for future reference.":::

+ :::image type="content" source="../../../assets/images/adaptive-cards/bot-home-page.png" alt-text="This screenshot shows you the bot home page.":::

+ :::image type="content" source="../../../assets/images/adaptive-cards/channel-teams.png" alt-text="This screenshot shows how to select Teams in channels.":::

+ :::image type="content" source="../../../assets/images/adaptive-cards/select-terms-of-service.png" alt-text="This screenshot shows how to set the terms if service.":::

+ :::image type="content" source="../../../assets/images/adaptive-cards/select-teams.png" alt-text="This screenshot shows how to add Microsoft Teams channel.":::

+ The following image displays the corresponding selection in the resource page:

+ 

+ :::image type="content" source="../../../assets/images/authentication/auth-bot-identity-connection-adv1.PNG" alt-text="This screenshot shows how to add Teams bot auth bot identity connection adv1.":::

+ The following image displays the corresponding selection in the resource page:

+ :::image type="content" source="../../../assets/images/authentication/sample-app-demo-bot-configuration.png" alt-text="This screenshot shows the corresponding selection in the resource page.":::

+ :::image type="content" source="../../../assets/images/authentication/auth-bot-connection-test-accept.PNG" alt-text="The screenshot shows how to add Teams bot auth connection string adv1.":::

+ :::image type="content" source="../../../assets/images/authentication/auth-bot-connection-test-token.PNG" alt-text="The screenshot shows how to add Teams app auth connection string adv1.":::

+ :::image type="content" source="../../../assets/images/authentication/auth-bot-app-service.png" alt-text="This screenshot shows how to enter required information for auth app service.":::

+ :::image type="content" source="../../../assets/images/authentication/auth-bot-app-service-in-group.png" alt-text="This screenshot shows how to check resource group and bot.":::

+ :::image type="content" source="../../../assets/images/authentication/auth-bot-login-emulator.PNG" alt-text="This screenshot shows an example of the bot UI after you've logged in.":::

+ :::image type="content" source="../../../assets/images/authentication/auth-bot-login-emulator-token.png" alt-text="This screenshot shows how to select the consent.":::

+ :::image type="content" source="../../../assets/images/authentication/auth-bot-login-deployed.PNG" alt-text="This screenshot shows an example of the Teams bot UI after you've logged in.":::

+ :::image type="content" source="../../../assets/images/authentication/auth-bot-login-deployed-token.PNG" alt-text="This screenshot shows how to select Yes button to display your authentication token.":::

+ :::image type="content" source="../../../assets/images/authentication/auth-bot-deployed-logout.PNG" alt-text="This screenshot shows how to enter logout to sign out.":::

+ :::image type="content" source="../../../assets/images/authentication/auth-bot-teams-upload.png" alt-text="This screenshot shows an example of the bot after it is uploaded into Teams.":::

+ :::image type="content" source="../../../assets/images/authentication/auth-bot-ngrok-start.PNG" alt-text="This screenshot shows the Teams bot app auth connection string adv1":::

+ :::image type="content" source="../../../assets/images/authentication/auth-bot-teams-ngrok-testing.png" alt-text="This screenshot shows auth bot teams ngrok testing.":::

+protected override async Task OnInstallationUpdateActivityAsync(ITurnContext<IInstallationUpdateActivity> turnContext, CancellationToken cancellationToken)

+{

+ var activity = turnContext.Activity;

+ if (string.Equals(activity.Action, "Add", StringComparison.InvariantCultureIgnoreCase))

+ {

+ // TO:DO Installation workflow

+ }

+ else

+ {

+ // TO:DO Uninstallation workflow

+ }

+ return;

+}

+protected override async Task OnInstallationUpdateAddAsync(ITurnContext<IInstallationUpdateActivity> turnContext, CancellationToken cancellationToken)

+{

+ // TO:DO Installation workflow return;

+* [Shared channels in Microsoft Teams](/MicrosoftTeams/shared-channels)

+* [Retention policy for Teams locations](/microsoft-365/compliance/create-retention-policies)

+| [Dev environment](../toolkit/TeamsFx-multi-env.md#create-new-environment) | 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-new-environment) | A default development environment created by Teams Toolkit. <br>**See also**: [Environment](#e); [Dev environment](#d) |

+You'll install the Collaboration controls into your dataverse environment via [Microsoft AppSource.](https://appsource.microsoft.com/en-us/product/dynamics-365/mscm.collaboration-toolkit-preview?flightCodes=collaborationcontrols&signInModalType=2&ctaType=1)

+You'll be able to configure and use the components within your own model-driven app only after browsing to [Microsoft AppSource](https://appsource.microsoft.com/en-us/product/dynamics-365/mscm.collaboration-toolkit-preview?flightCodes=collaborationcontrols&signInModalType=2&ctaType=1) and installing Collaboration controls into your dataverse environment.

+To install the solutions, browse to [Microsoft AppSource](https://appsource.microsoft.com/en-us/product/dynamics-365/mscm.collaboration-toolkit-preview?flightCodes=collaborationcontrols&signInModalType=2&ctaType=1) and complete the following steps:

+ Title: Edit Azure Active Directory manifest in Teams Toolkit

+# Edit Azure AD manifest

+The [Azure Active Directory (Azure AD) manifest](/azure/active-directory/develop/reference-app-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.

+This section covers:

+* [Customize Azure AD manifest template](#customize-azure-ad-manifest-template)

+* [Azure AD manifest template placeholders](#azure-ad-manifest-template-placeholders)

+* [Author and preview Azure AD manifest with code lens](#author-and-preview-azure-ad-manifest-with-code-lens)

+* [Deploy Azure AD application changes for local environment](#deploy-azure-ad-application-changes-for-local-environment)

+* [Deploy Azure AD application changes for remote environment](#deploy-azure-ad-application-changes-for-remote-environment)

+* [View Azure AD application on the Azure portal](#view-azure-ad-application-on-the-azure-portal)

+* [Use an existing Azure AD application](#use-an-existing-azure-ad-application)

+* [Azure AD application in Teams application development lifecycle](#azure-ad-application-in-teams-application-development-lifecycle)

+ * [Add an application permission](#add-an-application-permission)

+ * [Preauthorize a client application](#preauthorize-a-client-application)

+ * [Update redirect URL for authentication response](#update-redirect-url-for-authentication-response)

+### Add an application permission

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

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

+### Preauthorize a client application

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

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

+### Update redirect URL for authentication response

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

+The state file is located in `.fx\states\state.xxx.json` (xxx represents different environment). The following example shows typical state file:

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

+The config file is located in `.fx\configs\config.xxx.json` (xxx represents different environment). The following example shows config file:

+There's a preview code lens at the beginning of the Azure AD manifest template file. Select the code lens to generate an Azure AD manifest based on your selected environment.

+It's different from official [Azure AD manifest schema](/azure/active-directory/develop/reference-app-manifest) that `resourceAppId` and `resourceAccess` ID in `requiredResourceAccess` property only supports UUID. Azure AD manifest template in Teams Toolkit also supports user readable strings for `Microsoft Graph` and `Office 365 SharePoint Online` permissions. If you enter UUID, code lens shows user readable strings, otherwise, it shows UUID.

+Code lens shows the application name for the pre-authorized application ID for the `preAuthorizedApplications` property.

+2. Select **local** environment.

+1. Copy the Azure AD application client ID from `state.xxx.json` () file in the `fx-resource-aad-app-for-teams` property.

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

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

+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 Active Directory application manifest](/azure/active-directory/develop/reference-app-manifest).

+ You can create a project with Teams Toolkit that comes with SSO support by default such as `SSO-enabled tab`. For more information on 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 `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.

+ After you create a Teams application without SSO built-in, Teams Toolkit incrementally 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 performs the following functions during local development or it's known as F5:

+ * 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 debug endpoint) during the creation of a new Azure AD application with the manifest file.

+ * After the local dev environment startup 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 debug session. You can see [Azure AD application changes](https://github.com/OfficeDev/TeamsFx/wiki/) to apply changes manually Azure AD application changes.

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

+ * Initially ignores some properties in the manifest file that requires more context (such as replyUrls property requires frontend or bot endpoint) during the creation of a new Azure AD application with the manifest file.

+ Title: Integrate with Developer Portal in Teams Toolkit

+description: In this module, learn how to integrate with Developer Portal in Teams Toolkit

+ms.localizationpriority: medium

+# Integrate with Developer Portal

+You can configure and manage your app in developer portal within Teams Toolkit.

+## To Publish app using Developer Portal

+The following steps help you to publish your app in Developer Portal:

+1. Select **Developer Portal for Teams** under **DEPLOYMENT**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/dev-portal-ttk.png" alt-text="Developer Portal for Teams":::

+ Now Developer Portal opens in a browser.

+1. Sign-in to [Developer portal for Teams](https://dev.teams.microsoft.com) using the corresponding account.

+1. Import your app package in zip, select **App** > **Import app**.

+1. Select **Publish** > **Publish to your org**.

+## 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 may leverage [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. Import your app package in zip, select **App** > **Import app**.<br>

+ You need to replace the app, that you previously uploaded to the Developer Portal.

+1. To publish your app, select **Publish** > **Publish to your org**.

+You can do the following configuration in the Developer Portal:

+* **Basic information**: This section shows and allows you to edit the App name, App ID, Descriptions, Version, Developer Information, App URLs, Application (client) ID, and Microsoft Partner Network ID.

+* **Branding**: This page shows the app icon details.

+* **App features**: You can 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 or Meeting permissions, and User Permissions for your app.

+* **Single sign-on**: You can configure your app to authenticate users with single sign-on (SSO).

+* **Languages**: You can set up or change the language of your app.

+* **Domain**: You can add the domains to load your apps in the Teams client (For example: *.example.com).

+## See also

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

+TeamsFx helps to reduce your tasks by using Microsoft Teams Single-Sign-On (Teams SSO) and accessing cloud resources down to single line statements with zero configuration. You can use TeamsFx SDK in browser and Node.js environment. TeamsFx core functionalities can be accessed in client as well as server environment. You can write user authentication code in a simplified way for:

+* Teams tab

+* Azure Function

+You need to install the following tools and set up your development environment:

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

+ | | | |

+ | &nbsp; | [Visual Studio Code](https://code.visualstudio.com/download) | JavaScript, TypeScript, or SharePoint Framework (SPFx) build environments. Use version 1.55 or later. |

+ | &nbsp; | [Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension)| A Microsoft Visual Studio Code extension that creates a project scaffolding for your app. Use 4.0.0 version. |

+ | &nbsp; | [Node.js](https://nodejs.org/en/download/) | Back-end JavaScript runtime environment. Use the latest v16 LTS release.|

+ | &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; | [Microsoft&nbsp;Edge](https://www.microsoft.com/edge) (recommended) or [Google Chrome](https://www.google.com/chrome/) | A browser with developer tools. |

+> [!NOTE]

+> If your project has installed `botbuilder` related [packages](https://github.com/Microsoft/botbuilder-js#packages) as dependencies, ensure they are of the same version.

+You must have working knowledge of:

+## TeamsFx core functionalities

+* **User Identity**: Represents the current user of Teams.

+* **Application Identity**: Represents the application itself.

+ > [!NOTE]

+ > For these two identity types, the TeamsFx constructors and methods aren't the same.

+You can learn more about user identity and application identity in the following section:

+<details>

+<summary><b> User identity </b></summary>

+</details>

+<details>

+<summary><b> Application identity </b></summary>

+</details>

+To initialize TeamsFx, you must choose the required identity type. Post specifying the identity type SDK uses different type of credential class. These help represent the identity and get access token by corresponding auth flow. Credential classes implement `TokenCredential` interface that is broadly used in Azure library APIs designed to provide access tokens for specific scopes. Other APIs rely on credential call `TeamsFx:getCredential()` to get an instance of `TokenCredential`. For more information on credential and auth flow related classes, see [credential folder](https://github.com/OfficeDev/TeamsFx/tree/main/packages/sdk/src/credential).

+There are three credential classes to simplify authentication. Here's the corresponding scenarios for each credential class target.

+<details>

+<summary><b> User Identity in browser environment </b></summary>

+`TeamsUserCredential` represents Teams current user's identity. For the first time user's credentials are authenticated, then Teams SSO does the On-Behalf-Of flow for token exchange. SDK uses this credential when you choose user identity in browser environment.

+The required configurations are: `initiateLoginEndpoint` and `clientId`.

+</details>

+<details>

+<summary><b> User Identity in Node.js environment </b></summary>

+`OnBehalfOfUserCredential` uses On-Behalf-Of flow and require Teams SSO token, in Azure function or bot scenarios. TeamsFx SDK uses the following credential when you choose user identity in Node.js environment.

+</details>

+<details>

+<summary><b> App Identity in Node.js environment </b></summary>

+`AppCredential` represents the app identity. You can use app identity when user isn't involved, for example in a time-triggered automation job. TeamsFx SDK uses the following credential when you choose app identity in Node.js environment.

+</details>

+`TeamsBotSsoPrompt` integrates with bot framework. It simplifies the authentication process when you develop bot application and want to use the bot SSO.

+* If you want to use user identity then `sqlServerEndpoint`, `sqlUsername` and `sqlPassword` are required.

+* If you want to use MSI identity then `sqlServerEndpoint`and `sqlIdentityId` are required.

+### Override configuration

+You can pass custom config when creating a new `TeamsFx` instance to override default configuration or set required fields when `environment variables` are missing.

+<summary><b>

+For tab project

+</b> </summary>

+If you've created tab project using Microsoft Visual Studio Code Toolkit, the following config values will be used from pre-configured environment variables:

+* authorityHost (REACT_APP_AUTHORITY_HOST)

+* tenantId (REACT_APP_TENANT_ID)

+* clientId (REACT_APP_CLIENT_ID)

+* initiateLoginEndpoint (REACT_APP_START_LOGIN_PAGE_URL)

+* applicationIdUri (REACT_APP_START_LOGIN_PAGE_URL)

+* apiEndpoint (REACT_APP_FUNC_ENDPOINT) // only used when there's a backend function

+* apiName (REACT_APP_FUNC_NAME) // only used when there's a backend function

+<summary><b>

+For Azure function or bot project

+</b></summary>

+If you've created Azure function or bot project using Visual Studio Code Toolkit, the following config values will be used from pre-configured environment variables:

+* initiateLoginEndpoint (INITIATE_LOGIN_ENDPOINT)

+* authorityHost (M365_AUTHORITY_HOST)

+* tenantId (M365_TENANT_ID)

+* clientId (M365_CLIENT_ID)

+* clientSecret (M365_CLIENT_SECRET)

+* applicationIdUri (M365_APPLICATION_ID_URI)

+* apiEndpoint (API_ENDPOINT)

+* sqlServerEndpoint (SQL_ENDPOINT) // only used when there's a sql instance

+* sqlUsername (SQL_USER_NAME) // only used when there's a sql instance

+* sqlPassword (SQL_PASSWORD) // only used when there's a sql instance

+* sqlDatabaseName (SQL_DATABASE_NAME) // only used when there's a sql instance

+* sqlIdentityId (IDENTITY_ID) // only used when there's a sql instance

+### Error handling

+Basic type of API error response is `ErrorWithCode`, which contains error code and error message. For example, to filter out specific error, you can use the following snippet:

+try {

+ const teamsfx = new TeamsFx();

+ await teamsfx.login("User.Read");

+} catch (err: unknown) {

+ if (err instanceof ErrorWithCode && err.code !== ErrorCode.ConsentFailed) {

+ throw err;

+ } else {

+ // Silently fail because user cancels the consent dialog

+ return;

+ }

+}

+If credential instance is used in other library such as Microsoft Graph, it's possible that error is caught and transformed.

+## Microsoft Graph Scenarios

+This section provides several code snippets for common scenarios that are related to Microsoft Graph. In such scenarios, user can call APIs using different permissions in different ends(frontend/backend).

+* User delegate permission in frontend (Use TeamsUserCredential)

+ <details>

+ <summary><b>Use graph API in tab app</b></summary>

+ This code snippet shows you how to use `TeamsFx` and `createMicrosoftGraphClient` to get user profiles from Microsoft Graph. It also shows you how to catch and resolve a `GraphError`.

+ 1. Import the classes needed.

+ ```ts

+ import {

+ createMicrosoftGraphClient,

+ TeamsFx,

+ } from "@microsoft/teamsfx";

+ ```

+ 2. Use `TeamsFx.login()` to get user consent.

+ ```ts

+ // Put these code in a call-to-action callback function to avoid browser blocking automatically showing up pop-ups.

+ await teamsfx.login(["User.Read"]); // Login with scope

+ ```

+ 3. You can initialize a TeamsFx instance and graph client and get information from MS Graph by this client.

+ ```ts

+ try {

+ const teamsfx = new TeamsFx();

+ const graphClient = createMicrosoftGraphClient(teamsfx, ["User.Read"]); // Initializes MS Graph SDK using our MsGraphAuthProvider

+ const profile = await graphClient.api("/me").get();

+ } catch (err: unknown) {

+ // ErrorWithCode is handled by Graph client

+ if (err instanceof GraphError && err.code?.includes(ErrorCode.UiRequiredError)) {

+ // Need to show login button to ask for user consent.

+ }

+ ```

+ For more information on sample to use Graph API in tab app, see the [hello-world-tab sample](https://github.com/OfficeDev/TeamsFx-Samples/tree/dev/hello-world-tab).

+ </details>

+ <details>

+ <summary><b>Integration with Microsoft Graph Toolkit</b></summary>

+ The [Microsoft Graph Toolkit (mgt)](https://aka.ms/mgt) library is a collection of various authentication providers and UI components powered by Microsoft Graph.

+ The `@microsoft/mgt-teamsfx-provider` package exposes the `TeamsFxProvider` class that uses `TeamsFx` class to sign in users and acquire tokens to use with Graph.

+ 1. You can install the following required packages:

+ 2. Initialize the provider inside your component.

+ 3. You can use the `teamsfx.login(scopes)` method to get required access token.

+ 4. You can now add any component in your HTML page or in your `render()` method with React to use the `TeamsFx` context to access Microsoft Graph.

+ For more information on sample to initialize the TeamsFx provider, see the [Contacts Exporter sample](https://github.com/OfficeDev/TeamsFx-Samples/tree/dev/graph-toolkit-contact-exporter).

+ </details>

+* User delegate permission in backend (Use OnBehalfOfUserCredential)

+ <details>

+ <summary><b>Use Graph API in bot Application</b></summary>

+ This code snippet shows you how to use `TeamsBotSsoPrompt` to set a dialog and then sign-in to get an access token.

+ 1. Initialize and add `TeamsBotSsoPrompt` to dialog set.

+ ```ts

+ const { ConversationState, MemoryStorage } = require("botbuilder");

+ const { DialogSet, WaterfallDialog } = require("botbuilder-dialogs");

+ const { TeamsBotSsoPrompt } = require("@microsoft/teamsfx");

+ const convoState = new ConversationState(new MemoryStorage());

+ const dialogState = convoState.createProperty("dialogState");

+ const dialogs = new DialogSet(dialogState);

+ const teamsfx = new TeamsFx();

+ dialogs.add(

+ new TeamsBotSsoPrompt(teamsfx, "TeamsBotSsoPrompt", {

+ scopes: ["User.Read"],

+ })

+ );

+ ```

+ 2. Begin the dialog and sign-in.

+ ```ts

+ dialogs.add(

+ new WaterfallDialog("taskNeedingLogin", [

+ async (step) => {

+ return await step.beginDialog("TeamsBotSsoPrompt");

+ },

+ async (step) => {

+ const token = step.result;

+ if (token) {

+ // ... continue with task needing access token ...

+ } else {

+ await step.context.sendActivity(`Sorry... We couldn't log you in. Try again later.`);

+ return await step.endDialog();

+ }

+ },

+ ])

+ );

+ ```

+ For more information on sample to use graph API in bot application, see [bot-sso sample](https://github.com/OfficeDev/TeamsFx-Samples/tree/dev/bot-sso).

+ </details>

+ <details>

+ <summary><b>Call Azure Function in tab app: On-Behalf-Of flow</b></summary>

+ This code snippet shows you how to use `CreateApiClient` or `axios` library to call Azure Function, and how to call Graph API in Azure function to get user profiles.

+ 1. You can use `CreateApiClient` provided by TeamsFx sdk to call Azure Function:

+ ```ts

+ async function callFunction(teamsfx?: TeamsFx) {

+ const teamsfx = new TeamsFx();

+ // Get the credential.

+ const credential = teamsfx.getCredential();

+ // Create an API client by providing the token and endpoint.

+ const apiClient = CreateApiClient(

+ teamsfx.getConfig("YOUR_API_ENDPOINT"), // Create an API Client that uses SSO token to authenticate requests

+ new BearerTokenAuthProvider(async () => (await credential.getToken(""))!.token) // Call API hosted in Azure Functions on behalf of user to inject token to request header

+ );

+ // Send a GET request to "RELATIVE_API_PATH", "/api/functionName" for example.

+ const response = await apiClient.get("RELATIVE_API_PATH");

+ return response.data;

+ }

+ ```

+ You can also use `axios` library to call Azure Function.

+ ```ts

+ async function callFunction(teamsfx?: TeamsFx) {

+ const accessToken = await teamsfx.getCredential().getToken(""); // Get SSO token

+ // teamsfx.getConfig("apiEndpoint") will read REACT_APP_FUNC_ENDPOINT environment variable

+ const endpoint = teamsfx.getConfig("apiEndpoint");

+ const response = await axios.default.get(endpoint + "/api/" + functionName, {

+ headers: {

+ authorization: "Bearer " + accessToken.token,

+ },

+ });

+ return response.data;

+ }

+ ```

+ 2. Call Graph API in Azure function on-behalf of user in response.

+ ```ts

+ export default async function run(

+ context: Context,

+ req: HttpRequest,

+ teamsfxContext: TeamsfxContext

+ ): Promise<Response> {

+ const res: Response = { status: 200, body: {},};

+ // ...

+ teamsfx = new TeamsFx().setSsoToken(accessToken);

+ // Query user's information from the access token.

+ try {

+ const currentUser: UserInfo = await teamsfx.getUserInfo();

+ if (currentUser && currentUser.displayName) {

+ res.body.userInfoMessage = `User display name is ${currentUser.displayName}.`;

+ } else {

+ res.body.userInfoMessage = "No user information was found in access token.";

+ }

+ } catch (e) {

+ }

+ // Create a graph client to access user's Microsoft 365 data after user has consented.

+ try {

+ const graphClient: Client = createMicrosoftGraphClient(teamsfx, [".default"]);

+ const profile: any = await graphClient.api("/me").get();

+ res.body.graphClientMessage = profile;

+ } catch (e) {

+ }

+ return res;

+ }

+ ```

+ For more information on sample to use graph API in bot application, see [hello-world-tab-with-backend sample](https://github.com/OfficeDev/TeamsFx-Samples/tree/dev/hello-world-tab-with-backend).

+ </details>

+* Application permission in backend

+ <details>

+ <summary><b>Use certificate-based authentication in Azure Function</b></summary>

+ This code snippet shows you how to use certificate-based application permission to get the token that can be used to call Graph API.

+ 1. You can initialize the `authConfig` by providing a `PEM-encoded key certificate`.

+ ```ts

+ const authConfig = {

+ clientId: process.env.M365_CLIENT_ID,

+ certificateContent: "The content of a PEM-encoded public/private key certificate",

+ authorityHost: process.env.M365_AUTHORITY_HOST,

+ tenantId: process.env.M365_TENANT_ID,

+ };

+ ```

+ 2. You can use the `authConfig` to get the token.

+ ```ts

+ const teamsfx = new TeamsFx(IdentityType.App);

+ teamsfx.setCustomeConfig(authConfig);

+ const token = teamsfx.getCredential().getToken();

+ ```

+ </details>

+ <details>

+ <summary><b>Use client secret authentication in Azure Function</b></summary>

+ This code snippet shows you how to use client secret application permission to get the token that can be used to call Graph API.

+ 1. You can initialize the `authConfig` by providing a `client secret`.

+ ```ts

+ const authConfig = {

+ clientId: process.env.M365_CLIENT_ID,

+ clientSecret: process.env.M365_CLIENT_SECRET,

+ authorityHost: process.env.M365_AUTHORITY_HOST,

+ tenantId: process.env.M365_TENANT_ID,

+ };

+ ```

+ 2. You can use the `authConfig` to get the token.

+ ```ts

+ const teamsfx = new TeamsFx(IdentityType.App);

+ teamsfx.setCustomeConfig(authConfig);

+ const token = teamsfx.getCredential().getToken();

+ ```

+ For more information on sample to use graph API in bot application, see the [hello-world-tab-with-backend sample](https://github.com/OfficeDev/TeamsFx-Samples/tree/dev/hello-world-tab-with-backend).

+ </details>

+## Other scenarios

+This section provides several code snippets for other scenarios that are related to Microsoft Graph. You can create API client in Bot or Azure Function and access SQL database in Azure Function.

+ <details>

+ <summary><b>Create API client to call existing API in Bot or Azure Function</b></summary>

+ This code snippet shows you how to call an existing API in Bot by `ApiKeyProvider`.

+ ```ts

+ const teamsfx = new TeamsFx();

+ // Create an API Key auth provider. In addition to APiKeyProvider, following auth providers are also available:

+ // BearerTokenAuthProvider, BasicAuthProvider, CertificateAuthProvider.

+ const authProvider = new ApiKeyProvider("YOUR_API_KEY_NAME",

+ teamsfx.getConfig("YOUR_API_KEY_VALUE"), // This reads the value of YOUR_API_KEY_VALUE environment variable.

+ ApiKeyLocation.Header

+ );

+ // Create an API client using above auth provider.

+ // You can also implement AuthProvider interface and use it here.

+ const apiClient = createApiClient(

+ teamsfx.getConfig("YOUR_API_ENDPOINT"), // This reads YOUR_API_ENDPOINT environment variable.

+ authProvider

+ );

+ // Send a GET request to "RELATIVE_API_PATH", "/api/apiname" for example.

+ const response = await apiClient.get("RELATIVE_API_PATH");

+ ```

+ </details>

+ <details>

+ <summary><b>Access SQL database in Azure Function</b></summary>

+ Use `tedious` library to access SQL and use `DefaultTediousConnectionConfiguration` that manages authentication. You can also compose connection config of other SQL libraries based on the result of `sqlConnectionConfig.getConfig()`.

+ 1. Set the connection configuration.

+ ```ts

+ // Equivalent to:

+ // const sqlConnectConfig = new DefaultTediousConnectionConfiguration({

+ // sqlServerEndpoint: process.env.SQL_ENDPOINT,

+ // sqlUsername: process.env.SQL_USER_NAME,

+ // sqlPassword: process.env.SQL_PASSWORD,

+ // });

+ const teamsfx = new TeamsFx();

+ // If there's only one SQL database

+ const config = await getTediousConnectionConfig(teamsfx);

+ // If there are multiple SQL databases

+ const config2 = await getTediousConnectionConfig(teamsfx, "your database name");

+ ```

+ 2. Connect to your database.

+ ```ts

+ const connection = new Connection(config);

+ connection.on("connect", (error) => {

+ if (error) {

+ console.log(error);

+ }

+ });

+ ```

+ > [!NOTE]

+ > For more information on sample to access SQL database in Azure function, see [share-now sample](https://github.com/OfficeDev/TeamsFx-Samples/tree/dev/share-now).

+</details>

+You can set customer log level and redirect outputs when using this library.

+> [!NOTE]

+> Logging is turned off by default, you can turn it on by setting log level.

+When you set log level then Logging gets enabled. It prints log information to console by default.

+> [!NOTE]

+> You can redirect log output by setting custom logger or log function.

+> [!NOTE]

+> Log functions don't take effect if you set a custom logger.

+If you're using the version of SDK that has `loadConfiguration()`, you can follow these steps to upgrade to the latest SDK version:

+2. Replace `new TeamsUserCredential()` with `new TeamsFx()`.

+3. Replace `new M365TenantCredential()` with `new TeamsFx(IdentityType.App)`.

+4. Replace `new OnBehalfOfUserCredential(ssoToken)` with `new TeamsFx().setSsoToken(ssoToken)`.

+5. Pass the instance of `TeamsFx` to helper functions to replace credential instance.

+For detailed examples on how to use TeamsFx SDK [Samples](https://github.com/OfficeDev/TeamsFx-Samples) project.

+# Collaborate on Teams project using Microsoft Teams Toolkit

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

+The following sections guide us to understand the collaboration process as project owner or collaborator:

+### As project owner

+ 1. Select **Teams Toolkit** in the activity bar.

+

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/select-teams-toolkit.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="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/add-owner.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:

+ 4. Push the project to GitHub.

+### As project collaborator

+## Remove Collaborators

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

+ Title: TeamsFX multiple environments in Teams Toolkit

+ Microsoft Teams Toolkit provides a simple way for you to create and manage multiple environments, provision, and deploy artifacts to the target environment for your Microsoft Teams App.

+ You can perform the following with multiple environments:

+2. **Manage app behaviors in different environments**: You can set up different app behaviors for multiple environments such as enable telemetry in production environment.

+ > [!NOTE]

+ > Ensure that telemetry is disabled in development environment.

+ > [!TIP]

+ > Ensure you have Teams app project opened in Visual Studio code.

+## Create new environment

+After you create a project, Teams Toolkit by default configures:

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

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

+**Add remote environment**:

+1. Select the **Teams Toolkit** :::image type="content" source="~/assets/images/teams-toolkit-v2/teams-toolkit-sidebar-icon.png" alt-text="From the activity bar"::: from the activity bar.

+2. Select **+Teams: Create new environment** under the **ENVIRONMENT** section as shown in the following image:

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/create new env.png" alt-text="create new environment":::

+> [!Note]

+> If you have more than one environments, then you need to select an existing environment to create the same. The command copies the file contents of `config.<newEnv>.json` and `azure.parameters.<newEnv>.json` from the existing environment you've selected to the new environment created.

+## Target environment

+You can select the target environment, Teams Toolkit prompts you to select a target environment when you have multiple remote environments:

+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`: Configures the files that user can customize for Teams app.

+* `.fx/states`: Provision result that is generated by the Teams Toolkit.

+| Customize Azure Resource |Bicep files under `templates/azure` `.fx/azure.parameters.<envName>.json` | [Customize ARM parameters and templates](provision.md#customize-arm-template-files) |

+| Reuse existing Azure AD app for Teams app | `auth` section in`.fx/config.<envName>.json`| [Use an existing Azure AD app for your Teams app](provision.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.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.md#skip-adding-user-for-sql-database) |

+| Customize app manifest |`templates/manifest.template.json` file under `manifest` section in `.fx/config.<envName>.json`| [Preview app manifest in Toolkit](TeamsFx-preview-and-customize-app-manifest.md)|

+Steps for customization:

+2. Update the property of **`manifest`** > **`appName`** > **short** to **`myapp(dev)`**.

+ The updates to `.fx/configs/config.dev.json` are:

+3. You can create a new environment and name it `staging` if it doesn't exist.

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

+Steps for customization:

+2. Add new property of **`manifest`** > **`description`** > **`short`** with value **`my app description for dev`**.

+ The updates to `.fx/configs/config.dev.json` are:

+7. Update the property **`description`** > **`short`** to use the **variable** defined in configure files with mustache syntax **`{{config.manifest.description.short}}`**.

+ The updates to `manifest.template.json` are:

+8. You can now run provision command against `dev` and `staging` environment to update the app name in remote environments.

+2. Update the property **`description`** > **`short`** with hard-coded string **`my app description`**.

+ The updates to `manifest.template.json` are:

+3. You can now run the provision command against **all** environment to update the app name in remote environments.

+<br><summary><b>Scenario 4: Customize Azure resources for different environment</b></summary>

+You can customize Azure resources for each environment, for example edit the environment corresponding to fx/configs/azure.parameters.{env}.json file to specify Azure Function name.

+For more information on Bicep template and parameter files, see [provision cloud resources](provision.md).

+* [Test app behavior in different environment](test-app-behavior.md)

+ Title: Customize Teams App Manifest in Teams Toolkit

+# Customize Teams app manifest

+The Teams app manifest describes how your app integrates into the Microsoft Teams product. For more information on Manifest, see [App manifest schema for Teams](../resources/schem). This section covers:

+* [Preview manifest file in local environment](#preview-manifest-file-in-local-environment)

+* [Preview manifest file in remote environment](#preview-manifest-file-in-remote-environment)

+* [Sync local changes to Dev Portal](#sync-local-changes-to-dev-portal)

+* [Customize your Teams app manifest](#customize-your-teams-app-manifest)

+* [Validate manifest](#validate-manifest)

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

+You can preview manifest file in local and remote environments.

+You can also preview local manifest file by two methods

+* By using preview option in codelens

+* By using **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="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/preview-23.png" alt-text="Preview":::

+1. Select **local**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/select-env1.png" alt-text="Select environment1":::

+The following steps help to preview local manifest file by using **Zip Teams metadata package** option:

+1. Select `manifest.template.json` file.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/select-manifest-json.png" alt-text="Select Manifest":::

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

+1. Select **Zip Teams metadata package** under **DEPLOYMENT**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/teams-metadata-package.png" alt-text="Select Teams metadata package":::

+1. Select **local**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/select-env1.png" alt-text="Select environment":::

+To preview manifest file using Visual Studio Code:

+* Select **Provision in the cloud** under **DEVELOPMENT** in Teams Toolkit extension

+

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/provision.png" alt-text="Provision cloud resource":::

+To preview manifest file using command palatte:

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/command palatte.png" alt-text="Provision cloud resource using command palatte":::

+You can also preview manifest file by two methods in remote environment

+* By using preview option in codelens

+* By using **Zip Teams metadata package** option

+The following steps help to preview manifest file by using preview option in codelens:

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/preview-23.png" alt-text="Preview":::

+1. Select your environment.

+ > [!NOTE]

+ > If there are more than one environment, you need to select the environment you want to preview as shown in the image:

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/manifest preview-1.png" alt-text="Add env":::

+The following steps help to preview manifest file by using **Zip Teams metadata package** option in remote environment:

+1. Select `manifest.template.json` file.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/select-manifest-json.png" alt-text="Select Manifest":::

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

+1. Select **Zip Teams metadata package** under **DEPLOYMENT**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/teams-metadata-package.png" alt-text="Select Teams metadata package":::

+1. Select your environment.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/manifest preview-1.png" alt-text="Add env":::

+ > [!NOTE]

+ > If there are more than one environment, you need to select the environment you want to preview as shown in the image:

+> [!NOTE]

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

+## Customize your Teams app manifest

+### Supported placeholders in manifest.template.json

+## To preview values for local and dev environment

+ Title: Integrate existing third party APIs

+# Integrate existing third party APIs

+Teams Toolkit helps you to access existing APIs for building Teams applications. These APIs are developed by your organization or third-party. When you use Teams Toolkit to connect to an existing API, Teams Toolkit performs the following function:

+## Steps to connect to API

+You can add API connection using Visual Studio Code and CLI command.

+### Add API connection using Visual Studio Code

+The following steps help you to add API connection using Visual Studio Code:

+1. Open Microsoft Visual Studio Code.

+2. Select Teams Toolkit :::image type="icon" source="../assets/images/teams-toolkit-v2/add-API/api-add-icon.png" alt-text="api icon"::: from the Visual Studio Code toolbar.

+3. Select **Add features** under **DEVELOPMENT**:

+ :::image type="content" source="../assets/images/teams-toolkit-v2/add-API/api-add-features.png" alt-text="api add features":::

+ * You can also open the command palette and enter **Teams: Add cloud resources**.

+4. From the pop-up, select the **API Connection** you want to add to your Teams app project:

+ :::image type="content" source="../assets/images/teams-toolkit-v2/add-API/api-select-features.png" alt-text="api select features":::

+5. Select **OK**.

+6. Enter endpoint for the API. It's added to the project's local application settings and it's the base URL for API requests.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/add-API/api-endpoint.png" alt-text="api endpoint":::

+ > [!NOTE]

+ > Ensure the endpoint is a valid http(s) URL.

+7. Select the component that accesses the API.

+8. Select **OK**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/add-API/api-invoke.png" alt-text="api invoke":::

+9. Enter an alias for the API. The alias generates an application setting name for the API that is added to the project's local application setting.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/add-API/api-alias.png" alt-text="api alias":::

+10. Select required authentication for the API request from the **API authentication type**. It generates appropriate sample code and adds corresponding local application settings based on your selection.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/add-API/myAPI connection.png" alt-text="api auth":::

+ Based on the authentication type selected, following steps is required to completed extra configuration

+# [Basic](#tab/basic)

+* Enter the username for basic Auth.

+ Now the sample code got generated to call your API at bot\myAPI.js.

+# [Certification](#tab/certification)

+ Now the sample code got generated to call your API at bot\myAPI.js.

+# [Azure Active Directory](#tab/AAD)

+ Now the sample code got generated to call your API at bot\myAPI.js.

+# [API Key](#tab/apikey)

+* Select the required API key position in request.

+* Enter an API key name.

+ Now the sample code got generated to call your API at bot\myAPI.js.

+# [Custom Auth Implementation](#tab/CustomAuthImplementation)

+ Now the sample code got generated to call your API at bot\myAPI.js.

+## Add API connection using CLI

+The base command of this feature is `teamsfx add api-connection [authentication type]`. The following table provides 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 exampleuser--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 selections:

+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`. They're the configurations for the selected authentication type. The generated code reads values from the environment variables.

+## Advantages

+Teams Toolkit helps you bootstrap sample code to access the APIs, if you don't have language appropriate SDKs to access these APIs.

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

+# Add capabilities to Microsoft Teams apps

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

+|Capability|Description|Other supported capabilities|

+|--|-|--|

+|**Basic Teams app**| |

+| Tab | 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.|Tab, notification bot, command bot, bot, message extension|

+|SPFx tab| SPFx tab apps are hosted in Microsoft 365 and it supports developing and hosting your client-side SPFx solution|None|

+|SSO-enabled tab|You can build SSO-enabled tab app that allows the user with single sign on feature|SSO-enabled tab, notification bot, command bot, bot, message extension|

+| Bot | Bots help to interact with your web service through text, interactive cards, and task modules.|Message extension, SSO-enabled tab, tab|

+| Message extension | Message extensions help to interact with your web service through buttons and forms in the Microsoft Teams client.|Bot, SSO-enabled tab, tab|

+|**Scenario-based Teams app**| |

+| Notification bot | Notification bot proactively sends messages in Teams channel or group chat or personal chat. You can trigger the notification bot with a HTTP request, such as cards or texts. |SSO-enabled tab, tab|

+| Command bot | Command bot allows you to automate repetitive tasks using a command bot. It responds to simple commands sent in chats with adaptive cards. |SSO-enabled tab, tab|

+> [!NOTE]

+> You can add tabs up to 16 instances. As for your bot and message extension, you can add one for each instance at a time.

+You can add capabilities by the following methods:

+* [Using Teams Toolkit in Microsoft Visual Studio Code](#using-teams-toolkit-in-microsoft-visual-studio-code)

+* [Using the Command Palette](#using-the-command-palette)

+* [Using TeamsFx CLI](#using-teamsfx-cli)

+### Using Teams Toolkit in Microsoft Visual Studio Code

+ 1. Select **Teams Toolkit** from the activity bar.

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/manual/select-feature123.png" alt-text="Add capabilities from Teams Toolkit":::

+ > [!NOTE]

+ > After successfully adding the capabilities in your Teams app, you need to provision for each environment.

+### Using the Command Palette

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

+ :::image type="content" source="../assets/images/teams-toolkit-v2/manual/add-capabilities-command-palette.png" alt-text="Add capabilities from command palatte":::

+ 1. Enter **Teams: Add features**.

+ 1. Press enter.

+ 1. From the pop-up, select the capability you need to add in your project.

+### Using TeamsFx CLI

+## Changes after adding capabilities

+The following table shows the changes that can be seen in the files of your app when adding the capabilities:

+|Add capability|Description| Changes|

+||||

+|Bot, message extension and tab|Includes a **hello world**&nbsp;bot or tab application template into your project.|A frontend bot or tab template code is added into a subfolder with path `yourProjectFolder/bot` or `yourProjectFolder/tab` respectively.|

+| Bot, message extension and tab |Includes necessary scripts for Visual Studio Code, and is executed when you want to debug your application locally. |Files `launch.json` and `task.json` under `.vscode` folder are updated.|

+| Bot and message extension|Includes bot or tab-related information in the manifest file that represents your application in Teams Platform.|File`manifest.template.json` under `templates/appPackage` folder is updated, which includes tab-related information in the manifest file that represents your application in the Teams Platform. The changes are visible in ID of your bot, scopes of your bot, and the commands that hello world bot or tab application can respond to.|

+|Tab|Includes bot or tab-related information in the manifest file that represents your application in Teams Platform.|File`manifest.template.json` under `templates/appPackage` folder is updated, which includes tab-related information in the manifest file that represents your application in the Teams Platform. The changes are visible in configurable and static tabs, and scopes of the tabs.|

+|Bot, message extension and tab|Includes bot or tab-related&nbsp;information in the teamsfx and provision files that are for integrating Azure functions.|Files under `templates/azure/teamsfx` are updated, and `templates/azure/provision/xxx`.bicep files are regenerated.|

+|Bot, message extension and tab|Ensures your project is set with right configurations for newly added capability.|Files under `.fx/config` are regenerated|

+# Add cloud resources to Microsoft Teams app

+Teams Toolkit helps you to provision the cloud resources for your application hosting. You can add the cloud resources optionally, that fit 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 have created SPFx based tab project, you can't add Azure cloud resources.

+You can add cloud resources by the following methods:

+### To add cloud resources by using Teams Toolkit in Visual Studio Code

+ 1. Select **Teams Toolkit** from the activity bar.

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/manual/cloud/select-feature-updated.png" alt-text="Add feature from Teams Toolkit":::

+### To add cloud resources by using command palette

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

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/manual/cloud/Teams-add-features.png" alt-text="Add feature from command palette":::

+ 1. Enter **Teams: Add features**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/manual/cloud/Teams-add-features1.png" alt-text="Type add feature and enter":::

+ 1. From the pop-up, select the **Cloud resources** to add in your project.

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/manual/cloud/updated-final-cloud.png" alt-text="final":::

+ > [!NOTE]

+ > You need to provision for each environment, after you have successfully added the resource in your Teams app.

+### Add cloud resources using TeamsFx CLI

+## Changes after adding Cloud resources

+ Title: Prepare to build apps with Teams Toolkit

+description: In this article, you'll learn how to build environment of Teams Toolkit and manage the app in Developer Portal

+ms.localizationpriority: medium

+# Prepare to build apps using Microsoft Teams Toolkit

+Teams Toolkit supports environments for creating apps. Teams Toolkit also helps to integrate Azure Functions capabilities as well as cloud services in the Teams app you've built.

+## Build environments

+Teams Toolkit in Microsoft Visual Studio Code offers set of environments to build your Teams app. You can choose anyone of the following environment that best suits your app:

+* JavaScript or TypeScript

+* SharePoint Framework (SPFx)

+### Create your Teams app using JavaScript or TypeScript

+The apps built with JavaScript have the following advantages:

+* App comes with its own UI and UX capabilities that are rich and user friendly.

+* Provides quick upgrades to existing apps.

+* Distributes apps on multiple platforms, such as Android and iOS.

+* Compatible for creating an app with 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: Bots can be chat bot or conversational bot that allows you to do simple and repetitive tasks like 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 command bot. Command bots help you to answers simple queries or commands sent in chats.

+* Message extensions: You can interact with your web service through buttons and forms. Capability provided by message extension.

+### 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 you easy integration with data residing in SharePoint to your Teams.

+* You can integrate your SPFx solution with your business APIs secured with Microsoft Azure Active Directory (Azure AD).

+* Gives you Accesses to various open-source tools.

+* Creates for your powerful applications that can deliver a great UX.

+* Integrates with other Microsoft (Office) 365 workloads easily.

+* Delivers flexibility to host applications wherever needed.

+## Support for Azure Functions

+You can use Teams Toolkit to integrate [Azure Functions](/azure/azure-functions/functions-overview) capabilities into building apps. You can focus on the pieces of code that matter most and Azure Functions do the rest.

+Azure Functions allow you to implement:

+1. System logic into your readily available blocks of code. These blocks are called functions.

+1. As the requests increases, Azure Functions meets the requirement with as many demands as necessary.

+Azure Function integrates with an array of [cloud services](add-resource.md#types-of-cloud-resources) provide feature-rich implementations. The following are just a few common scenarios for Azure Functions:

+* When building a web API

+* Processing to database changes

+* Processing Iot data streams

+* Managing message queues

+## See also

+* [Teams Toolkit for Visual Studio](visual-studio-overview.md)

+* [Manage your Teams apps using Developer Portal](../concepts/build-and-test/teams-developer-portal.md)

+* [Create a new Teams app using Teams Toolkit](create-new-project.md)

+ Title: Create a new Teams app

+description: In this module, learn how to create a new Teams app using Teams Toolkit

+# Create a new Teams project

+You can build a new Teams project by selecting **Create a new Teams app** in Teams Toolkit. You can create following types of app in Teams Toolkit:

+| App Type | Definition |

+| | |

+| Basic Teams app | Basic Teams apps are tab, bot, or message extension app that you can create and customize based on your needs. |

+| Scenario based Teams app | Scenario based Teams apps are notification bot, command bot, SSO-enabled tab, or SPFx tab app and it's suitable for one particular scenario. For example, notification bot is suitable only to send notification and not used for chat. |

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

+**To create an app**

+1. Select the Teams Toolkit :::image type="icon" source="../assets/images/teams-toolkit-v2/teams-toolkit-sidebar-icon.png"::: icon in the left navigation bar.

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

+1. Ensure that **Tab** is selected as your app capability.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/first-tab/select-capabilities-tabapp.png" alt-text="Select App Capability":::

+1. Select **JavaScript** as the programming language.

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

+1. Select **Default folder** to store your project root folder in default location.

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

+ The following steps guides you to change the default location:

+ 1. Select **Browse**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/first-tab/select-browse.png" alt-text="Select browse for storage":::

+ 1. Select the location for project workspace.

+ 1. Select the **Select Folder**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/select-folder.png" alt-text="select-folder for storage":::

+1. Enter `helloworld` as the application name. Ensure that you use only alphanumeric characters. Select **Enter**.

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

+1. By default, project opens in new window within 10 seconds. If you want to open in current window, select **Open in current window**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/first-tab/new-window-notification.png" alt-text="New window notification":::

+ The Teams tab app is created in a few seconds.

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

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

+<br>

+<details>

+<summary><b>Directory structure for basic Teams app</b></summary>

+You have three different types of basic Teams app and directory structure looks similar for all types of apps. The following example shows a basic Teams tab app directory structure:

+| Folder name | Contents |

+| | |

+| `.fx/configs` | Configuration files that user can customize for the Teams app. |

+| - `.fx/configs/config.<envName>.json` | Configuration file for every environment. |

+| - `.fx/configs/azure.parameters.<envName>.json` | Parameters file for Azure BICEP provision 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 SDK](../tabs/how-to/using-teams-client-sdk.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 is added to the directory structure.

+To learn more about the directory structure of different types of basic Teams app, 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>

+You have four different types of scenario based Teams app and directory structure looks similar for all types of apps. The following example shows a scenario based notification bot Teams app directory structure:

+The new project folder contains 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 in **bot** folder and it contains:

+| File name | Contents |

+| | |

+| `src/adaptiveCards/` | Templates for Adaptive card |

+| `src/internal/` | Generated initialize code for notification functionality |

+| `src/index.*s` | The entrypoint to handle bot messages and send notifications |

+| `.gitignore` | File to exclude local files from bot project |

+| `package.json` | The npm package file for bot project |

+> [!NOTE]

+> If you have a command bot, SSO-enabled tab, or SPFx tab app, relevant folders is added to the directory structure.

+To learn more about the directory structure of different types of scenario based Teams app, 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 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 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 tab app:

+ :::image type="content" source="../assets/images/teams-toolkit-v2/tabapp-directory.png" alt-text="Tab app directory structure":::

+The following image shows the directory structure of tab app with bot feature:

+ :::image type="content" source="../assets/images/teams-toolkit-v2/tab-app-with-bot-app.png" alt-text="Tab app with bot app directory structure":::

+</details>

+* [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.md)

+* [Prepare to build apps using Microsoft Teams Toolkit](build-environments.md)

+description: In this module how Visual studio code and Teams Toolkit work during local debug process, also how to register and configure your Teams app

+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**, **Pre Debug Check & Start All** 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**.

+## Teams Toolkit verification of prerequisites

+* 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 NPM package in `/.fx/bin/ngrok/node modules/ngrok/bin` manages the Ngrok binary version 2.3 that is applicable for bot and message extension.

+* 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 3 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`, if .NET Core SDK version applicable for Azure Functions isn't installed or the version doesn't match the requirement. For Linux, the local debug terminates.

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

+* 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 app, 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.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/prerequisites-debugcheck.png" alt-text="Prerequisites check summary" lightbox="../assets/images/teams-toolkit-v2/debug/prerequisites-debugcheck.png":::

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

+Registers a Teams app in [Developer Portal](https://dev.teams.microsoft.com/home) using the manifest template in `templates/appPackage/manifest.template.json`.

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

+ Title: Debug your Teams app locally

+# Debug your Microsoft Teams app locally

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

+## Set up your Teams Toolkit for debugging

+The following steps help you to set up your Teams Toolkit before you initiate the debug process:

+1. Select **Debug (Edge)** or **Debug (Chrome)** in the activity bar from the **RUN AND DEBUG Γû╖** drop down.

+1. Select **Run** > **Start Debugging (F5)**.

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

+5. Select **Yes** in the **Security Warning** dialog box appears:

+1. Select **Debug Edge** or **Debug Chrome** from the **RUN AND DEBUG Γû╖** drop down.

+5. Enter your **User Name** and **Password**, then select **Update Settings**.

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

+## Debug your app

+After the initial set up 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`.

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

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

+### Sideloads the Teams app

+The configuration **Attach to Frontend** or **Launch Bot** launches a 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, then 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="Add local debug" lightbox="../assets/images/teams-toolkit-v2/debug/hello-local-debug.png":::

+## Next

+> [Debug background processes](debug-background-process.md)

+ Title: Debug your Teams app

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

+ms.localizationpriority: high

+# Debug your Microsoft Teams app

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

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

+* Microsoft 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. The Teams Toolkit starts to check prerequisites, registers 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="../assets/images/teams-toolkit-v2/debug/toggle-points.png" alt-text="toggle breakpoints" lightbox="../assets/images/teams-toolkit-v2/debug/toggle-points.png":::

+### 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 reattaches to the programming languages.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug/hot-reload.png" alt-text="hot-reload for source codes" lightbox="../assets/images/teams-toolkit-v2/debug/hot-reload.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="../assets/images/teams-toolkit-v2/debug/stop-debug.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.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 unchecks some prerequisites and allows you to customize the debug settings to create your tab or bot:

+<br>

+<details>

+<summary><b>Use your bot endpoint</b></summary>

+1. In Visual Studio Code settings, you need to uncheck **Ensure Ngrok is installed and started (ngrok)**.

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

+```json

+{

+ "bot": {

+ "siteEndpoint": "https://your-bot-tunneling-url"

+ }

+}

+```

+</details>

+<details>

+<summary><b>Use your development certificate</b></summary>

+1. In Visual Studio Code settings, you need to uncheck **Ensure development certificate is trusted (devCert)**.

+1. You can set `sslCertFile` and `sslKeyFile` configuration in `.fx/configs/config.local.json` to your certificate file path and key file path.

+```json

+{

+ "frontend": {

+ "sslCertFile": "",

+ "sslKeyFile": ""

+ }

+}

+```

+</details>

+<details>

+<summary><b>Use your start scripts to start app services</b></summary>

+1. For tab, you need to update `dev:teamsfx` script in `tabs/package.json`.

+1. For bot or message extension, you need to update `dev:teamsfx` script in `bot/package.json`.

+1. For Azure Functions, you need to update `dev:teamsfx` script in `api/package.json` and for TypeScript update `watch:teamsfx` script.

+ > [!NOTE]

+ > Currently, the tab, bot, message extension apps, and Azure Functions ports don't support customization.

+</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. Comment **`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. Comment **`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>

+## Next

+> [!div class="nextstepaction"]

+> [Debug your app locally](debug-local.md)

+## See also

+* [Debug background process](debug-background-process.md)

+* [Use Teams Toolkit to provision cloud resources](provision.md)

+* [Deploy to the cloud](deploy.md)

+* [Preview and customize Teams app manifest](TeamsFx-preview-and-customize-app-manifest.md)

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

+ > [!NOTE]

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

+The Get started guides help you to deploy using Teams Toolkit. You can use the following to deploy your Teams app:

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

+* [Create multi-capability Teams apps](add-capability.md)

+* [Add cloud resources to Microsoft Teams app](add-resource.md)

+ Title: Explore Teams Toolkit

+description: In this module, learn on exploring Teams Toolkit

+ms.localizationpriority: medium

+# Explore Teams Toolkit

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

+## Teams Toolkit basic UI elements

+After Teams Toolkit installation, you'll see the Teams Toolkit UI as shown in the following image:

+| Serial No | UI Elements | Definition |

+| | |

+| 1 | **Get Started** | Explore Teams Toolkit. |

+| &nbsp; | **Tutorials** | Access different tutorials. |

+| &nbsp; | **Documentation** | Access the Microsoft Teams Developer Documentation. |

+| 2 | **Create a new Teams App** | Create a new Teams app based on your requirement. |

+| 3 | **View Samples** | Build different types of app based on existing samples. |

+| 4 | **Open Folder** | Open the existing Teams app. |

+| 5 | **New File** | Create new file. |

+| &nbsp; | **Open File** | Open the existing file. |

+| &nbsp; | **Open Folder** | Open the existing folder. |

+| 6 | **Recent** | View the recent files. |

+### Exploring the Teams Toolkit task pane

+You can explore more UI elements from task pane in Teams Toolkit. Task pane is visible only after creating an app using Teams Toolkit. The following video helps you to know about the process of creating new Teams app and after this process you can view the task pane in Teams Toolkit.

+ 

+After creating a new Teams app, you can see the directory structure of the app in the left panel and the readme file in the right panel.

+Let's take a tour of the Teams Toolkit UI.

+ In Visual Studio Code toolbar, The following icons are relevant to the Teams Toolkit:

+| Icon | Description |

+| | |

+| **Explorer** :::image type="icon" source="../assets/images/teams-toolkit-v2/file-explorer-icon.PNG"::: | To view the directory structure of the app. |

+| **Run and Debug** :::image type="icon" source="../assets/images/teams-toolkit-v2/run-debug-icon.PNG"::: | To start the local or remote debug process. |

+| **Teams Toolkit** :::image type="icon" source="../assets/images/teams-toolkit-v2/teams-toolkit-sidebar-icon.PNG"::: | To view the task pane in Teams Toolkit. |

+From the task pane you can see the following sections:

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

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/accounts1.png" alt-text="accounts section":::

+ :::column-end:::

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

+ To develop a Teams app, you need the following accounts:

+

+ * **Sign in to M365**: Use your Microsoft 365 account with a valid E5 subscription for building your app.

+ * **Sign in to Azure**: Use your Azure account for deploying 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="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/environment1.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 machine environment configurations.

+ * **dev**: Deploy your app in the default dev environment with remote or cloud environment configurations. You can create more environments, as you need.

+ :::column-end:::

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

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/development.png" alt-text="Development section":::

+ :::column-end:::

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

+ To create and customize your Teams app, you need the following features:

+

+ * **Create a new Teams app**: Use the toolkit wizard to prepare project scaffolding for app development.

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

+

+ * **Add features**: Add other required Teams capabilities to Teams app during development process and add optional cloud resources suitable for your app.

+

+ * **Edit manifest file**: Edit the Teams app integration with Teams client.

+ :::column-end:::

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

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/deployment1.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.

+ * **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="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/help-and-feedback1.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.

+

+ * **Get started**: View the Teams Toolkit Get started help within Visual Studio Code.

+ * **Tutorials**: Select to access different tutorials.

+

+ * **Documentation**: Select to access the Microsoft Teams Developer Documentation.

+

+ * **Report issues on GitHub**: Select to access GitHub page and raise any issues.

+ :::column-end:::

+## See also

+* [Install Teams Toolkit](install-Teams-Toolkit.md)

+* [Create a new Teams app using Teams Toolkit](create-new-project.md)

+* [Prepare to build apps using Microsoft Teams Toolkit](build-environments.md)

+* [Provision cloud resources using Teams Toolkit](provision.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

+description: In this module, See FAQ for Teams Toolkit using Visual Studio Code

+ms.localizationpriority: medium

+# FAQ for Teams Toolkit using Visual Studio Code

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

+description: In this module, learn Installation of Teams Toolkit

+ms.localizationpriority: medium

+# Install Teams Toolkit

+Teams Toolkit is an extension in Visual Studio Code. In this document you can learn, how to install Teams Toolkit. Before you start with installation, you need to have Visual Studio Code and Teams client installed.

+## Steps to install Teams Toolkit

+You can install Teams Toolkit from an extension in Visual Studio Code and from Visual Studio Code Marketplace. The following steps help you to install Teams Toolkit:

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

+1. Open **Visual Studio Code**.

+1. Select the Extensions view (**Ctrl+Shift+X** / **⌘⇧-X** or **View > Extensions**).

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/install toolkit-1.png" alt-text="install":::

+1. Enter **Teams Toolkit** in the search box.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/install-toolkit2.png" alt-text="Toolkit":::

+1. Select **Install**.

+

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/select-install-ttk.png" alt-text="install toolkit 4.0.0":::

+ After successful installation of Teams Toolkit in Visual Studio Code, Teams Toolkit icon appears in the Visual Studio Code toolbar.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/after-install.png" alt-text="After install":::

+# [Marketplace](#tab/marketplace)

+1. Open [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension).

+ The following page appears.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/install-ttk-marketplace.png" alt-text="install TTK Marketplace":::

+1. Select **Install**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/Install-ttk.png" alt-text="install TTK":::

+1. From the pop-up window, select **Open**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/select-open.png" alt-text="Select the open":::

+ The following Visual Studio Code page appears.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/ttk-in-vsc.png" alt-text="Select TTK in VSC":::

+1. Select **Install**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/select-install-ttk.png" alt-text="Select Install TTK in VSC":::

+ After successful installation of Teams Toolkit in Visual Studio Code, Teams Toolkit icon appears in the Visual Studio Code toolbar.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/after-install.png" alt-text="After install":::

+#### Upgrade Teams Toolkit

+Teams Toolkit is upgraded to the latest version by default. The following steps help you to install different version:

+* Select the Extensions :::image type="icon" source="../assets/images/teams-toolkit-v2/extension icon.PNG"::: icon.

+* Enter **Teams Toolkit** in the search box.

+* In Teams Toolkit extension, select :::image type="icon" source="../assets/images/teams-toolkit-v2/setting icon.PNG"::: icon.

+* Select **Install Another Version** for upgrade to the latest version of Teams Toolkit.

+## See also

+* [Explore Teams Toolkit](explore-Teams-Toolkit.md)

+* [Create a new Teams app using Teams Toolkit](create-new-project.md)

+* [Prepare to build apps using Microsoft Teams Toolkit](build-environments.md)

+* [Provision cloud resources using Teams Toolkit](provision.md)

+* [Deploy Teams app to the cloud](deploy.md)

+# Provision cloud resources

+Provision is performed with single command in Teams Toolkit for Visual Studio Code or TeamsFx CLI. For more information, see [Provision Azure-based app](/microsoftteams/platform/sbs-gs-javascript?tabs=vscode%2Cvsc%2Cviscode%2Cvcode&tutorial-step=8)

+## Create Resources

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

+<br>

+<details>

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

+</details>

+<br>

+<details>

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

+</details>

+<br>

+<details>

+<summary><b>Resource creation for Azure Functions in the project</b></summary>

+</details>

+<br>

+<details>

+<summary><b>Resource creation for Azure SQL in the project</b></summary>

+</details>

+<br>

+<details>

+<summary><b>Resource creation for Azure API Management in the project</b></summary>

+</details>

+<br>

+<details>

+<summary><b>Resources created when including Azure Key Vault in the project</b></summary>

+</details>

+<br>

+Teams Toolkit enables you to use an infrastructure-as-code approach to define Azure resources that you want to provision, and how you want to configure. The tool 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).

+### Azure AD parameters

+There are two types of parameters such as Azure AD application related parameters and Azure resource-related parameters.

+| 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 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 created during provision | [Use an existing Azure AD app for your Teams app](#use-an-existing-azure-ad-app-for-your-teams-app) |

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

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

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

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

+Consider the following scenario:

+You want to add Azure storage to your Azure function backend to store blob data. There is no auto flow to update the bicep template with Azure storage support. However, you can edit the bicep file and add the resource. The steps are as follows:

+After creating the app, you can distribute your app to different scope, such as individual, team, organization, or anyone. 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.

+You can add custom app to Teams by uploading an [app package](../concepts/build-and-test/apps-package.md) in a *.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:

+You can build an app for internal use only and share it with your team without submitting it to the Teams app catalog in the Teams app store. For more information, see [Upload your app in Teams](../concepts/deploy-and-publish/apps-upload.md).

+### To build your app to zip app package file

+You need to run `Provision in the cloud` first before you build the app package. The following steps help you to build the app package.

+* Select **Zip Teams metadata package** under **DEPLOYMENT**.<br>

+ The generated app package will be located in `{your project folder}/build/appPackage/appPackage.{env}.zip`.

+### To upload app package

+1. In the Teams client, select **Apps** > **Manage your apps** > **upload an app**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/publish1.png" alt-text="publish an app":::

+ **Upload an app** window appears.

+2. Select **Upload a custom app**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/upload.png" alt-text="upload an app":::

+ Now the app is sideloaded into the Teams client and you can add and view it.

+When the app is ready for use in production, you can submit the app using the Teams app submission API, called from 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** in treeview of Teams Toolkit.

+ * Enter trigger **Teams: Publish to Teams** from command palette.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/select-publish.png" alt-text="Select Publish":::

+2 Select **Install for your organization**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/installforyourorganization.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="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/confirm-publish.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 Microsoft 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 you have Teams app project in VS 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="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/Showall.PNG"::: icon > **Teams app** > **Manage apps**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/select-manage-apps.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="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/admin-approval-for-teams-app-1.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="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/about-submitted-app-1.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

+For more information, see [Publish your app to the Microsoft Teams store](../concepts/deploy-and-publish/appsource/publish.md#publish-your-app-to-the-microsoft-teams-store).

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

+* [Publish your app to the Microsoft Teams store](../concepts/deploy-and-publish/appsource/publish.md)

+* [Upload your app in Teams](../concepts/deploy-and-publish/apps-upload.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: Sideload and test app in Teams environment

+description: In this module, learn how to sideload and test app in different environment

+ms.localizationpriority: high

+# Sideload and test app in Teams environment

+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 does'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

+* [Publish Teams apps using Teams Toolkit](publish.md)

+Teams Toolkit lets you create, debug, and deploy your Teams app right from Visual Studio Code.App development with the toolkit has the following advantages:

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

+The following table helps you to get the overview of Teams Toolkit in Visual Studio Code:

+| Process | Description |

+| - | - |

+| Install Teams Toolkit | You can install Teams Toolkit in two ways: <br> - Using Visual Studio Code <br> - Using Visual Studio Code Marketplace|

+| Support for build environments | You have two different types of environment: <br> - Javascript or Typescript <br> - SPFx |

+| Support for app types and Azure function | There are two different types of apps: <br> - Capability-based app such as tab, bot, message extension <br> - Scenario-based Teams app such as notification bot, command bot and SSO enabled personal tab |

+| Develop your Teams app | It contains: <br> - Add and manage environment <br> - Create multi-capability app <br> - Create capability based cloud resources <br> - Integrate third party API <br> - Customize manifest file <br> - TeamsFx SDK |

+| Debug your Teams app | It contains: <br> - Debug your Teams app locally <br> - Debug background process|

+| Host your Teams app | It contains: <br> - Provision resources to the cloud <br> - Deploy to the cloud|

+| Test your Teams app | It contains: <br> - Integrate and collabrate <br> - Zip Teams metadata package <br> - Sideload and test app in Teams environment <br> - Test app behavior in different environment|

+| Publish your Teams app | It contains: <br> - Publish your app <br> - Manage admin approval <br> - Publish to store <br> - Integrate with Developer Portal |

+### Entities integrated with Teams Toolkit

+Teams Toolkit is an extension in Visual Studio Code. It is integrated with the following entities within Teams Toolkit.such as Azure AD and Microsoft 365, Developer Portal and Microsoft graph. All the entities are integrated within Teams Toolkit and help users to create an app.

+| Entities | Description |

+| - | - |

+| Azure AD | Azure Active Directory (Azure AD) is a cloud-based identity and access management service. This service helps your employees access external resources, such as Microsoft 365, the Azure portal, and thousands of other SaaS applications. |

+| Microsoft 365 | Teams developer account while developing an app.|

+| Developer Portal | The Developer Portal for Teams is the primary tool for configuring, distributing, and managing your Microsoft Teams apps. With the Developer Portal, you can collaborate with colleagues on your app, set up runtime environments, and much more. |

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

+Teams Toolkit brings all tools needed for building a Teams app in one place.

+## Manage your apps using Developer Portal

+As Teams Toolkit is integrated with Developer Portal, you can configure, distribute, and manage your app using [Developer Portal for Teams](../concepts/build-and-test/teams-developer-portal.md) under DEPLOYMENT after creating an app. For more information, see [manage your Teams apps using Developer Portal](../concepts/build-and-test/manage-your-apps-in-developer-portal.md).

+* [Create a new Teams project](create-new-project.md)

+* [Install Teams Toolkit](install-Teams-Toolkit.md)

+* [Explore Teams Toolkit](explore-Teams-Toolkit.md)

+* [Prepare to build apps using Microsoft Teams Toolkit](build-environments.md)

+ Title: Test app behavior in different environment

+description: In this module, learn how to test app behavior in different environment

+ms.localizationpriority: high

+# Test app behavior in different environment

+You can test your Teams app after integrating with Microsoft Teams. To test your Teams app, you need to create at least one workspace in your environment. You can use Teams Toolkit for testing your Teams app:

+* **Locally hosted in Teams**: Teams Toolkit locally hosts your Teams app by sideloading it into Teams for testing in local environment.

+* **Cloud-hosted in Teams**: For testing your Teams app remotely, you need to Cloud-host it using provisioning and deploying on Microsoft Azure Active Directory(Azure AD). It involves uploading your solution to the Azure AD and then upload into Teams.

+> [!NOTE]

+> For production-scale debugging and testing, we recommend that you follow your own company guidelines to ensure you are able to support testing, staging, and deployment through your own processes.

+## Locally hosted environment

+Teams is a cloud-based product that requires all services it accesses, to be available publicly using HTTPS endpoints. Local hosting is about sideloading into Teams for testing in local environment.

+> [!NOTE]

+> Although you can use any tool of your choice for testing, we recommend you to use [ngrok](https://ngrok.com/download)

+## Cloud-hosted environment

+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`](~/resources/schem#validdomains) object in the `manifest.jason` file

+> [!NOTE]

+> To ensure a secure environment, be explicit about the exact domain and subdomains you reference and those domains must be in your control. For example, `*.azurewebsites.net` is not recommended, however `contoso.azurewebsites.net` is recommended.

+## See also

+* [Debug your Microsoft Teams app locally](debug-local.md)

+* [Debug background process](debug-background-process.md)

+* [Use Teams Toolkit to provision cloud resources](provision.md)

+* [Deploy to the cloud](deploy.md)

+* [Preview and customize Teams app manifest](TeamsFx-preview-and-customize-app-manifest.md)

+* [Manage multiple environments](TeamsFx-multi-env.md)

+ Title: Prerequisites for creating your Teams app using Visual Studio Code

+description: In this module, learn the prerequisites required for Tools and SDK

+ms.localizationpriority: high

+# Prerequisites for creating your Teams app

+Ensure that the following prerequisites are met before you start creating your Teams app:

+* [Basic requirements to build your Teams app](#basic-requirements-to-build-your-teams-app)

+* [Prepare Accounts to build your Teams app](#accounts-to-build-your-teams-app)

+* [Sideloading permission](#sideloading-permission)

+## Basic requirements to build your Teams app

+Ensure the following requirements are met before you start build your Teams app:

+| &nbsp; | Basic requirements | For using| For environment type|

+ | | | |

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

+ | &nbsp; | Teams Toolkit| A Microsoft Visual Studio Code extension that creates a project scaffolding for your app. Use the latest version. | JavaScript and SPFx|

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

+ | &nbsp; | [Node.js](https://nodejs.org/en/download/) | Back-end JavaScript runtime environment. Use the latest v16 LTS release.| JavaScript and SPFx|

+ | &nbsp; |[Node Package Manager (NPM)](https://www.npmjs.com/package/@microsoft/teamsfx) | Install and manage packages for use in both Node.js and ASP.NET Core applications.| JavaScript and SPFx|

+ | &nbsp; | [Microsoft&nbsp;Edge](https://www.microsoft.com/edge) (recommended) or [Google Chrome](https://www.google.com/chrome/) | A browser with developer tools. | JavaScript and SPFx|

+ | &nbsp; | [Visual Studio Code](https://code.visualstudio.com/download) | JavaScript, TypeScript, or SharePoint Framework (SPFx) build environments. Use version 1.55 or later. | JavaScript and SPFx|

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

+ | &nbsp; | [Azure Tools for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-node-azure-pack) and [Azure CLI](/cli/azure/install-azure-cli) | Access stored data or deploy a cloud-based backend for your Teams app in Azure. | JavaScript|

+ | &nbsp; | [React Developer Tools for Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) OR [React Developer Tools for Microsoft&nbsp;Edge](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) | A browser DevTools extension for the open-source React JavaScript library. | JavaScript|

+ | &nbsp; | [Microsoft Graph Explorer](https://developer.microsoft.com/graph/graph-explorer) | A browser-based tool that lets you run a query from Microsoft Graph data. | JavaScript and SPFx|

+ | &nbsp; | [Developer Portal for Teams](https://dev.teams.microsoft.com/) | Web-based portal to configure, manage, and distribute your Teams app including to your organization or the Teams store.| JavaScript and SPFx|

+ > [!NOTE]

+ >

+ > * The document is tested with Teams Toolkit version 4.0.0 and Nodejs version 16.

+ > * Bookmark the Microsoft Graph Explorer, to learn about Microsoft Graph services. This browser-based tool allows you to query and access Microsoft Graph outside of an app.

+## Accounts to build your Teams app

+Ensure you have the following accounts before you start build your Teams app:

+| Accounts | For using| For environment type|

+| | |

+|[Microsoft 365 account with valid subscription](#microsoft-365-developer-program)|Teams developer account while developing an app.| JavaScript and SPFx|

+|[Azure account](accounts.md#azure-account-to-host-backend-resources)|Backend resources on Azure.| JavaScript and SPFx|

+|[SharePoint collection site administrator account](#sharepoint-collection-site-administrator-account) |Deployment for hosting.| SPFx|

+### Microsoft 365 developer program

+To create a Microsoft 365 account, sign-up for a Microsoft 365 developer program subscription. The subscription is free for 90 days and continues to renew as long as you're using it for development activity.

+If you have a Visual Studio Enterprise or Professional subscription, both programs include free Microsoft 365 [developer subscription](https://aka.ms/MyVisualStudioBenefits). It's active as long as your Visual Studio subscription is active. For more information, see [Microsoft 365 developer subscription](https://developer.microsoft.com/microsoft-365/dev-program).

+You can sign-up for the developer program by using one of the following account types:

+* **Microsoft account for personal use**

+ :::row:::

+ :::column span="3":::

+ The account provides access to Microsoft products and cloud services, such as Outlook, Messenger, OneDrive, MSN, Xbox Live, or Microsoft 365.

+ You can sign-up for an Outlook.com mailbox to create a Microsoft account, which can be used to access consumer-related Microsoft cloud services or Azure.

+ :::column-end:::

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

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/personal-account-icon.png" alt-text="personal account.":::

+ :::column-end:::

+ :::row-end:::

+* **Microsoft work account for business**

+ :::row:::

+ :::column span="3":::

+ The account provides access to all small, medium, and enterprise business-level Microsoft cloud services. The services include Azure, Microsoft Intune, or Microsoft 365.

+ When you sign-up to one of these services as an organization, a cloud-based directory is automatically provisioned in Azure AD to represent your organization.

+ :::column-end:::

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

+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/work-account-icon.png" alt-text="work account.":::

+ :::column-end:::

+ :::row-end:::

+#### Create a free Microsoft 365 developer account

+To create a free Microsoft 365 developer account, join the Microsoft 365 developer program and perform the following account:

+1. Go to the [Microsoft 365 developer program](https://developer.microsoft.com/microsoft-365/dev-program).

+1. Select **Join Now**.

+1. Set up your administrator account.

+ You can see the following image after the completion of the subscription:

+ :::image type="content" source="../assets/images/teams-toolkit-v2/m365-account.png" alt-text="M365 Account":::

+### Azure account

+You need an Azure account to host a Teams app or the backend resources for your Teams app using Teams Toolkit in Visual Studio Code. You must need Azure subscription in the following scenarios:

+* If you already have an existing app on a different cloud provider other than Azure, and you want to integrate the app on Teams platform, you must have an Azure subscription.

+* You can select an Azure subscription to host your backend resources using another cloud provider, or on your own servers if they're available from the public domain.

+> [!NOTE]

+> You need to [Create a free account](https://azure.microsoft.com/free/) before you begin.

+### SharePoint collection site administrator account

+While creating Teams app using SPFx environment, you'll need SharePoint collection site administrator account at deployment for hosting. If you're using a Microsoft 365 developer program tenant, you can use the administrator account you created at the time.

+## Sideloading permission

+After creating the app, you must load your app in Teams without distributing it. This process is known as sideloading. Sign-in to your Microsoft 365 account to view this option.

+You can verify if the sideloading permission is enabled using either Visual Studio Code or Teams client.

+<br>

+<details>

+<summary><b>Verify sideloading permission using Visual Studio Code</b></summary>

+1. Open **Visual Studio Code**.

+1. Select the Teams Toolkit :::image type="icon" source="../assets/images/teams-toolkit-v2/teams-toolkit-sidebar-icon.PNG"::: icon from the Teams Toolkit toolbar.

+ > [!NOTE]

+ > If you're unable to see the option, see [Install Teams Toolkit](install-Teams-Toolkit.md) to install Teams Toolkit extension in Visual Studio Code.

+1. Select **Sign in to M365** under **ACCOUNTS** and sign-in to your Microsoft 365 account.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/accounts.png" alt-text="accounts details":::

+1. Check whether you can view the option **Sideloading enabled** as shown in the following image:

+ :::image type="content" source="../assets/images/teams-toolkit-v2/sideloading.png" alt-text="Enable sideloading":::

+</details>

+<br>

+<details>

+<summary><b>Verify sideloading permission using Teams client</b></summary>

+1. In the Teams client, select **Apps**.

+1. Select **Manage your app**.

+1. Select **Upload an app**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/upload-app.png" alt-text="Publish an app":::

+4. Check whether you can see the option **Upload a custom app** as shown in the following image:

+ :::image type="content" source="../assets/images/teams-toolkit-v2/upload-custom-app1.png" alt-text="Upload a custom app":::

+</details>

+### Enable sideloading using admin center

+If you're unable to view the option **Upload a custom app,** then it indicates that you don't have the required permission for sideloading.

+* For a tenant admin, enable the sideloading setting for your tenant or organization in the Teams admin center.

+* If you aren't a tenant admin, you'll need to contact your tenant admin to enable sideloading.

+If you have admin rights, perform the following steps to upload the custom app using admin center:

+ 1. Sign-in to [Microsoft 365 admin center](https://admin.microsoft.com/Adminportal/Home?source=applauncher#/homepage#/) with your admin credentials.

+ 1. Select the :::image type="icon" source="../assets/images/teams-toolkit-v2/showall icon.PNG"::: icon > **Teams**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/m365-admin-center.png" alt-text="Microsoft 365 Admin center":::

+ > [!Note]

+ > It can take **up to 24 hours** for the **Teams** option to appear. You can [upload your custom app to a Teams environment](/microsoftteams/upload-custom-apps) for testing and validation.

+ 1. Sign-in to Microsoft Teams admin center with your admin credentials.

+ 1. Select the :::image type="icon" source="../assets/images/teams-toolkit-v2/showall icon.PNG"::: icon > **Teams apps** > **Setup policies**.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/m365-admin-center1.png" alt-text="Microsoft 365 Admin center1":::

+ 1. Select **Global (Org-wide default)**

+ :::image type="content" source="../assets/images/teams-toolkit-v2/select-manage-policies.png" alt-text="Select Manage Policies":::

+ 1. Set toggle **Upload custom apps** to **On** position.

+ :::image type="content" source="../assets/images/teams-toolkit-v2/Upload-custom-apps.png" alt-text="Upload Custom Apps":::

+ 5. Select **Save**.

+ > [!Note]

+ > It can take up to 24 hours for sideloading to become active. In the meantime, you can use **upload for your tenant** to test your app. To upload the .zip package file of the app, see [Upload custom apps](/microsoftteams/teams-app-setup-policies).

+ Ensure that, now you have the sideloading permission using the steps mentioned in [verify sideloading permission using Visual Studio Code or Teams client.](#sideloading-permission)

+</details>

+## See also

+* [Manage custom app policies and settings in Teams](/microsoftteams/teams-custom-app-policies-and-settings)

+* [Manage app setup policies in Teams](/microsoftteams/teams-app-setup-policies)

+* [Upload custom apps](/microsoftteams/teams-app-setup-policies)

+* [Provision cloud resources using Teams Toolkit](provision.md)

+* [Deploy Teams app to the cloud](deploy.md)

+ :::image type="content" source="../../assets/images/connectors.png" alt-text="This screenshot show how to select connector.":::

+ :::image type="content" source="../../assets/images/configure.png" alt-text="This screenshot shows how to configure and upload an image for your webhooks.":::

+ :::image type="content" source="../../assets/images/url.png" alt-text="This screenshot shows the unique webhook URL.":::

+ :::image type="content" source="../../assets/images/configured.png" alt-text="This screenshot shows how to configured to see list of your current connectors.":::

+ :::image type="content" source="../../assets/images/manage.png" alt-text="This screenshot shows how to manage for connector that you want to remove.":::

+ :::image type="content" source="../../assets/images/removeconfiguration.png" alt-text="This screenshot shows how to view the remove configuration dialog box.":::

+ :::image type="content" source="../../assets/images/finalremove.png" alt-text="This screenshot shows how to remove an Incoming Webhooks from Teams channel.":::