+| [Add capabilities of Teams Toolkit v4 to Microsoft Teams app](../toolkit/toolkit-v4/add-capability-v4.md) | A Teams feature you can build into your app for interacting with app users. An app capability is used to extend Teams to fit your app needs. An app may have one or more core capabilities, such as tab, bot, and message extension. <br>**See also**: [Device capability](#d); [Media capability](#m) |

+* [Add capabilities of Teams Toolkit v4 to Microsoft Teams app](../../toolkit/toolkit-v4/add-capability-v4.md)

+* [Task modules (Dialogs)](../../task-modules-and-cards/what-are-task-modules.md)

+ | &nbsp; | [Node.js](https://nodejs.org/en/download/) | Back-end JavaScript runtime environment. For more information, see [Node.js version compatibility table for project type](~/toolkit/build-environments.md#nodejs-version-compatibility-table-for-project-type). |

+zone_pivot_groups: teams-toolkit-platform

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

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](teams-toolkit-fundamentals.md#teams-toolkit-overview) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

+## Customize Teams app manifest for Visual Studio Code

+The Teams app manifest describes how your app integrates into Teams. The manifest template file `manifest.template.json` is available under `templates/appPackage` folder after scaffolding. The template file with placeholders, and the actual values are resolved by Teams Toolkit using files under `.fx/configs` and `.fx/states` for different environments.

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

+```text

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

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

+ Γö£ΓöÇΓöÇΓöÇappPackage.{env}.zip - Zipped app package of remote Teams app

+ Γö£ΓöÇΓöÇΓöÇappPackage.local.zip - Zipped app package of local Teams app

+ Γö£ΓöÇΓöÇΓöÇmanifest.{env}.json - Previewed manifest of remote Teams app

+ ΓööΓöÇΓöÇΓöÇmanifest.local.json - Previewed manifest of local Teams app

+```

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

+<br>

+<details>

+<b><summary>Preview manifest file in local environment</b></summary>

+To preview manifest file in local environment, you can press **F5** to run local debug. After generating default local settings, the app package and preview manifest builds under `build/appPackage` folder.

+You can preview local manifest file by two methods:

+* Use preview option in CodeLens.

+* Use **Zip Teams metadata package** option.

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

+1. Select **Preview** in the CodeLens of `manifest.template.json` file.

+ :::image type="content" source="toolkit-v4/images/preview-23-v4.png" alt-text="Screenshot is an example showing the preview in the CodeLens of manifest file." lightbox="toolkit-v4/images/preview-23-v4.png":::

+1. Select **local**.

+ :::image type="content" source="toolkit-v4/images/select-env1-v4.png" alt-text="Screenshot is an example of showing the selection of local in the environment.":::

+To preview local manifest file by using **Zip Teams metadata package** option:

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

+ :::image type="content" source="toolkit-v4/images/select-manifest-json-v4.png" alt-text="Screenshot is an example of showing the selection of manifest.template.json.":::

+1. Select the Teams Toolkit :::image type="icon" source="toolkit-v4/images/teams-toolkit-sidebar-icon-v4.PNG"::: icon in the Visual Studio Code **Activity Bar**.

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

+ :::image type="content" source="toolkit-v4/images/teams-metadata-package-v4.png" alt-text="Screenshot is an example of showing the selection of zip Teams metadata package.":::

+1. Select **local**.

+ :::image type="content" source="toolkit-v4/images/select-env1-v4.png" alt-text="Screenshot is an example of showing the selection of local in the environment.":::

+Following is a preview local image:

+<br>

+</details>

+<details>

+<b><summary>Preview manifest file in remote environment</b></summary>

+To preview manifest file using Visual Studio Code:

+* Select **Provision in the cloud** under **DEPLOYMENT** in Teams Toolkit.

+

+ :::image type="content" source="toolkit-v4/images/provision-v4.png" alt-text="Screenshot is an example of showing the selection of provision in the cloud resource.":::

+* To preview the manifest file using command palette. You can trigger **Teams: Provision in the cloud** from command palette.

+ :::image type="content" source="toolkit-v4/images/command palatte-v4.png" alt-text="Screenshot is an example of showing provision cloud resource using command palette.":::

+It generates configuration for remote Teams app, builds package, and preview manifest under `build/appPackage` folder.

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

+* Use preview option in CodeLens.

+* Use **Zip Teams metadata package** option.

+To preview manifest file by using preview option in CodeLens:

+1. Select **Preview** in the CodeLens of `manifest.template.json` file.

+ :::image type="content" source="toolkit-v4/images/preview-23-v4.png" alt-text="Screenshot is an example of showing preview in the CodeLens of manifest file." lightbox="toolkit-v4/images/preview-23-v4.png":::

+1. Select your environment.

+ :::image type="content" source="toolkit-v4/images/manifest preview-1-v4.png" alt-text="Screenshot is an example of showing the adding of environment.":::

+ > [!NOTE]

+ > If there are more than one environment, you need to select the environment you want to preview.

+To preview manifest file by selecting **Zip Teams metadata package** in remote environment:

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

+ :::image type="content" source="toolkit-v4/images/select-manifest-json-v4.png" alt-text="Screenshot is an example of showing the selection of manifest.template.json.":::

+1. Select the **Teams Toolkit** :::image type="icon" source="toolkit-v4/images/teams-toolkit-sidebar-icon-v4.PNG"::: icon in the Visual Studio Code **Activity Bar**.

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

+ :::image type="content" source="toolkit-v4/images/teams-metadata-package-v4.png" alt-text="Screenshot is an example of showing the selection of zip Teams metadata package.":::

+1. Select your environment.

+ :::image type="content" source="toolkit-v4/images/manifest preview-1-v4.png" alt-text="Screenshot is an example of showing the adding of environment.":::

+ > [!NOTE]

+ > If there are more than one environment, you need to select the environment you want to preview.

+</details>

+## Sync local changes to Developer Portal

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

+1. Deploy Teams app manifest.

+ You can deploy Teams app manifest in any of the following ways:

+ * Right-click the `manifest.template.json` file, and select **Deploy Teams app manifest** from context menu.

+ :::image type="content" source="toolkit-v4/images/deploy-manifest-v4.png" alt-text="Screenshot is an example of showing the selection of deploy Teams app manifest.":::

+ * Trigger **Teams: Deploy Teams app manifest** by selecting it from the command palette.

+ :::image type="content" source="toolkit-v4/images/deploy-command-v4.png" alt-text="Screenshot is an example of showing the deploy from command palette.":::

+2. Update to Teams platform.

+ You can update to Teams platform in any of the following ways:

+ * Select **Update to Teams platform** on the upper left-corner of `manifest.{env}.json`.

+ * Trigger **Teams: Update manifest to Teams platform** on the menu bar of `manifest.{env}.json`. The following image shows dev environment:

+ :::image type="content" source="toolkit-v4/images/update-to-teams-v4.png" alt-text="Screenshot is an example of showing the update to Teams platform on the menu bar of manifest." lightbox="toolkit-v4/images/update-to-teams-v4.png":::

+You can also trigger **Teams: Update manifest to Teams platform** from the command palette:

+> [!NOTE]

+>

+> * The Trigger from editor CodeLens or menu bar updates current manifest file to Teams platform.

+> * The Trigger from command palette requires selecting target environment.

+ CLI command:

+``` bash

+ teamsfx deploy manifest --include-app-manifest yes

+```

+> [!NOTE]

+> The change is reflected in Developer Portal. Any manual updates in Developer Portal are overwritten.

+If the manifest file is outdated due to configuration file change or template change, select any one of the following actions:

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

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

+* **Cancel**: No action is taken.

+## Customize your Teams app manifest

+Teams Toolkit consists of the following manifest template files under `manifest.template.json` folder across local and remote environments:

+* `manifest.template.json`

+* `templates/appPackage`

+During the local debug or provision, Teams Toolkit loads manifest from `manifest.template.json` with the configurations from `state.{env}.json`, `config.{env}.json`, and creates Teams app in [Developer Portal](https://dev.teams.microsoft.com/apps).

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

+The following list provides supported placeholders in `manifest.template.json`:

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

+* `{{config.manifest.xx}}` is a customized placeholder and it's value is resolved from `config.{env}.json`.

+**To add customized parameter**

+1. Add customized parameter as follows:</br>

+ a. Add a placeholder in `manifest.template.json` with pattern `{{config.manifest.xx}}`.</br>

+ b. Add a config value in `config.{env}.json`.

+ ```json

+ {

+ "manifest": {

+ "KEY": "VALUE"

+ }

+ }

+ ```

+2. You can go to configuration file by selecting any one of the config placeholders **Go to config file** or **View the state file** in `manifest.template.json`.

+### Validate manifest

+During operations such as **Zip Teams metadata package**, Teams Toolkit validates the manifest against its schema. The following list provides different ways to validate manifest:

+* In Visual Studio Code, trigger **Teams: Validate manifest file** from command palette:

+ :::image type="content" source="toolkit-v4/images/validate-v4.png" alt-text="Screenshot is an example of showing Teams validate manifest file from command palette.":::

+* In CLI, use command:

+ ``` bash

+ teamsfx validate --env local

+ teamsfx validate --env dev

+ ```

+## To preview values for local and dev environment

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

+> [!NOTE]

+> Provision the environment or execute local debug to generate values for placeholders.

+You can go to state file or configuration file by selecting the CodeLens, which provides a drop down list with all the environment names. After selecting one environment, the corresponding state file or configuration file opens.

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

+## See also

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

+* [App manifest schema for Teams](../resources/schem)

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

+* [Environments in Teams Toolkit](TeamsFx-multi-env.md)

+* [Public developer preview for Microsoft Teams](../resources/dev-preview/developer-preview-intro.md)

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

+ Title: Add How-to guides to Your Teams apps

+description: In this module, learn to add How-to guides to Teams Toolkit.

+ms.localizationpriority: medium

+# Add How-to guides to Microsoft Teams app v5

+> [!NOTE]

+> This article is applicable only to Teams Toolkit version 5.

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

+## How-to guides for adding capabilities

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

+|-|-|

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

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

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

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

+## Open the guides from Teams Toolkit

+* [Use Teams Toolkit pane](#use-teams-toolkit-pane)

+* [Use the Command Palette](#use-the-command-palette)

+### Use Teams Toolkit pane

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

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

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

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

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

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

+### Use the Command Palette

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

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

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

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

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

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

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

+## See also

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

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

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

+* [App manifest schema](../resources/schem)

+* [Add capabilities to Teams apps](toolkit-v4/add-capability-v4.md)

+zone_pivot_groups: teams-toolkit-platform

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

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

+## Add SSO to Teams app for Microsoft Visual Studio Code

+For apps that interact with the user in a chat, Team, or channel, SSO manifests as an Adaptive Card, which the user can interact with to invoke the Azure AD consent flow.

+## Enable SSO support

+Teams Toolkit helps you to add SSO to the following Teams capabilities in Visual Studio Code:

+* Tab

+* Bot

+* Notification bot: restify server

+* Command bot

+* Workflow bot

+* Message extension

+### Add SSO using Visual Studio Code

+You can perform the following steps to add SSO using Teams Toolkit in Visual Studio Code:

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

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

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

+ :::image type="content" source="toolkit-v4/images/sso-add features_1-v4.png" alt-text="Screenshot shows the Add features option under the Development option in the Visual Studio Code.":::

+ * You can select **View** > **Command Palette...** to view **Add features** window.

+4. Select **Single Sign-On**.

+ :::image type="content" source="toolkit-v4/images/sso-select features_1-v4.png" alt-text="Screenshot shows the Single Sign-on feature highlighted in red in the Visual Studio Code.":::

+### Add SSO using TeamsFx CLI

+You can run `teamsfx add sso` command in your **project root directory**.

+> [!NOTE]

+> The feature enables SSO for all existing applicable capabilities. Follow the same steps to enable SSO if you add capability later to the project.

+## Customize your project using Teams Toolkit

+The following table lists the changes Teams Toolkit makes to your project:

+| **Type** | **File** | **Purpose** |

+| -- | - | -- |

+| Create | `aad.template.json` under `template\appPackage` | Azure AD application manifest represents your Azure AD app. `template\appPackage` helps to register an Azure AD app during local debug or provision stage. |

+| Modify | `manifest.template.json` under `template\appPackage` | A `webApplicationInfo` object is added into your Teams app manifest template. Teams requires this field to enable SSO. The change is in effect when you trigger local debugging or provisioning. |

+| Create | `auth\tab` | Reference code, auth redirect pages, and `README.md` files are generated in this path for a tab project. |

+| Create | `auth\bot` | Reference code, auth redirect pages, and `README.md` files are generated in this path for a bot project. |

+> [!NOTE]

+> By adding SSO, Teams Toolkit doesn't change anything in the cloud until you trigger local debug. Update your code to ensure that SSO is working in the project.

+## Update your application to use SSO

+To enable SSO in your application, follow these steps:

+> [!NOTE]

+> These changes are based on the templates you scaffold.

+<br>

+<br><details>

+<summary><b>Tab project

+</b></summary>

+1. Copy `auth-start.html` and `auth-end.htm` in `auth\public` folder to `tabs\public\`. Teams Toolkit registers these two endpoints in Azure AD for Azure AD's redirect flow.

+2. Copy `sso` folder under `auth\tab` to `tabs\src\sso\`.

+ * `InitTeamsFx`: The file implements a function that initializes TeamsFx SDK and opens `GetUserProfile` component after SDK is initialized.

+ * `GetUserProfile`: The file implements a function that calls Microsoft Graph API to get user info.

+3. Execute `npm install @microsoft/teamsfx-react` under `tabs\`.

+4. Add the following lines to `tabs\src\components\sample\Welcome.tsx` to import `InitTeamsFx`:

+ ```Bash

+ import { InitTeamsFx } from "../../sso/InitTeamsFx";

+ ```

+5. Replace the following line:

+ `<AddSSO />` with `<InitTeamsFx />` to replace the `AddSso` component with `InitTeamsFx` component.

+</details>

+<details>

+<summary><b>Bot project

+</b></summary>

+#### Set up the Azure AD redirects

+1. Move the `auth\bot\public` folder to `bot\src`. This folder contains HTML pages that the bot app hosts. When SSO flow is initiated with Azure AD, it redirects you to the HTML pages.

+1. Modify your `bot\src\index` to add the appropriate `restify` routes to HTML pages.

+ ```ts

+ const path = require("path");

+ server.get(

+ "/auth-*.html",

+ restify.plugins.serveStatic({

+ directory: path.join(__dirname, "public"),

+ })

+ );

+ ```

+#### Update your app

+SSO command handler `ProfileSsoCommandHandler` uses an Azure AD token to call Microsoft Graph. This token is obtained by using the signed in Teams user token. The flow is brought together in a dialog that displays a consent dialog if necessary.

+1. Move `profileSsoCommandHandler` file under `auth\bot\sso` folder to `bot\src`. `ProfileSsoCommandHandler` class is an SSO command handler to get user info with SSO token, follow this method and create your own SSO command handler.

+1. Open `package.json` file and ensure that TeamsFx SDK version >= 1.2.0.

+1. Execute the `npm install isomorphic-fetch --save` command in the `bot` folder.

+1. For ts script, execute the `npm install copyfiles --save-dev` command in the `bot` folder and replace following lines in `package.json`:

+ ```json

+ "build": "tsc --build && shx cp -r ./src/adaptiveCards ./lib/src",

+ ```

+ with

+ ```json

+ "build": "tsc --build && shx cp -r ./src/adaptiveCards ./lib/src && copyfiles src/public/*.html lib/",

+ ```

+ This copies the HTML pages used for auth redirect when building the bot project.

+1. To make SSO consent flow work, replace the following code in `bot\src\index` file:

+ ```ts

+ server.post("/api/messages", async (req, res) => {

+ await commandBot.requestHandler(req, res);

+ });

+ ```

+ with

+ ```ts

+ server.post("/api/messages", async (req, res) => {

+ await commandBot.requestHandler(req, res).catch((err) => {

+ // Error message including "412" means it is waiting for user's consent, which is a normal process of SSO, shouldn't throw this error.

+ if (!err.message.includes("412")) {

+ throw err;

+ }

+ });

+ });

+ ```

+1. Replace the following options for `ConversationBot` instance in `bot\src\internal\initialize` to add the SSO config and SSO command handler:

+ ```ts

+ export const commandBot = new ConversationBot({

+ ...

+ command: {

+ enabled: true,

+ commands: [new HelloWorldCommandHandler()],

+ },

+ });

+ ```

+ with

+ ```ts

+ import { ProfileSsoCommandHandler } from "../profileSsoCommandHandler";

+ export const commandBot = new ConversationBot({

+ ...

+ // To learn more about ssoConfig, please refer teamsfx sdk document: https://docs.microsoft.com/microsoftteams/platform/toolkit/teamsfx-sdk

+ ssoConfig: {

+ aad :{

+ scopes:["User.Read"],

+ },

+ },

+ command: {

+ enabled: true,

+ commands: [new HelloWorldCommandHandler() ],

+ ssoCommands: [new ProfileSsoCommandHandler()],

+ },

+ });

+ ```

+1. Register your command in the Teams [app manifest](../resources/schem#botscommandlists). Open `templates\appPackage\manifest.template.json`, and add the following lines under `commands` in `commandLists` of your bot:

+ ```json

+ {

+ "title": "profile",

+ "description": "Show user profile using Single Sign On feature"

+ }

+ ```

+#### Add a new SSO command to the bot (Optional)

+After successfully adding SSO in your project, you can add a new SSO command:

+1. Create a new file such as `photoSsoCommandHandler.ts` or `photoSsoCommandHandler.js` in `bot\src\` and add your own SSO command handler to call Graph API:

+ ```TypeScript

+ // for TypeScript:

+ import { Activity, TurnContext, ActivityTypes } from "botbuilder";

+ import "isomorphic-fetch";

+ import {

+ CommandMessage,

+ TriggerPatterns,

+ TeamsFx,

+ createMicrosoftGraphClient,

+ TeamsFxBotSsoCommandHandler,

+ TeamsBotSsoPromptTokenResponse,

+ } from "@microsoft/teamsfx";

+ export class PhotoSsoCommandHandler implements TeamsFxBotSsoCommandHandler {

+ triggerPatterns: TriggerPatterns = "photo";

+ async handleCommandReceived(

+ context: TurnContext,

+ message: CommandMessage,

+ tokenResponse: TeamsBotSsoPromptTokenResponse,

+ ): Promise<string | Partial<Activity> | void> {

+ await context.sendActivity("Retrieving user information from Microsoft Graph ...");

+ const teamsfx = new TeamsFx().setSsoToken(tokenResponse.ssoToken);

+ const graphClient = createMicrosoftGraphClient(teamsfx, ["User.Read"]);

+ let photoUrl = "";

+ try {

+ const photo = await graphClient.api("/me/photo/$value").get();

+ const arrayBuffer = await photo.arrayBuffer();

+ const buffer=Buffer.from(arrayBuffer, 'binary');

+ photoUrl = "data:image/png;base64," + buffer.toString("base64");

+ } catch {

+ // Could not fetch photo from user's profile, return empty string as placeholder.

+ }

+ if (photoUrl) {

+ const photoMessage: Partial<Activity> = {

+ type: ActivityTypes.Message,

+ text: 'This is your photo:',

+ attachments: [

+ {

+ name: 'photo.png',

+ contentType: 'image/png',

+ contentUrl: photoUrl

+ }

+ ]

+ };

+ return photoMessage;

+ } else {

+ return "Could not retrieve your photo from Microsoft Graph. Please make sure you have uploaded your photo.";

+ }

+ }

+ }

+ ```

+ ```javascript

+ // for JavaScript:

+ const { ActivityTypes } = require("botbuilder");

+ require("isomorphic-fetch");

+ const {

+ createMicrosoftGraphClient,

+ TeamsFx,

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

+ class PhotoSsoCommandHandler {

+ triggerPatterns = "photo";

+ async handleCommandReceived(context, message, tokenResponse) {

+ await context.sendActivity(

+ "Retrieving user information from Microsoft Graph ..."

+ );

+ const teamsfx = new TeamsFx().setSsoToken(tokenResponse.ssoToken);

+ const graphClient = createMicrosoftGraphClient(teamsfx, ["User.Read"]);

+ let photoUrl = "";

+ try {

+ const photo = await graphClient.api("/me/photo/$value").get();

+ const arrayBuffer = await photo.arrayBuffer();

+ const buffer = Buffer.from(arrayBuffer, "binary");

+ photoUrl = "data:image/png;base64," + buffer.toString("base64");

+ } catch {

+ // Could not fetch photo from user's profile, return empty string as placeholder.

+ }

+ if (photoUrl) {

+ const photoMessage = {

+ type: ActivityTypes.Message,

+ text: "This is your photo:",

+ attachments: [

+ {

+ name: "photo.png",

+ contentType: "image/png",

+ contentUrl: photoUrl,

+ },

+ ],

+ };

+ return photoMessage;

+ } else {

+ return "Could not retrieve your photo from Microsoft Graph. Please make sure you have uploaded your photo.";

+ }

+ }

+ }

+ module.exports = {

+ PhotoSsoCommandHandler,

+ };

+ ```

+1. Add `PhotoSsoCommandHandler` instance to `ssoCommands` array in `bot\src\internal\initialize.ts`:

+ ```ts

+ // for TypeScript:

+ import { PhotoSsoCommandHandler } from "../photoSsoCommandHandler";

+ export const commandBot = new ConversationBot({

+ ...

+ command: {

+ ...

+ ssoCommands: [new ProfileSsoCommandHandler(), new PhotoSsoCommandHandler()],

+ },

+ });

+ ```

+ ```javascript

+ // for JavaScript:

+ ...

+ const { PhotoSsoCommandHandler } = require("../photoSsoCommandHandler");

+ const commandBot = new ConversationBot({

+ ...

+ command: {

+ ...

+ ssoCommands: [new ProfileSsoCommandHandler(), new PhotoSsoCommandHandler()]

+ },

+ });

+ ...

+ ```

+1. Register your command in the Teams app manifest. Open `templates\appPackage\manifest.template.json`, and add following lines under `commands` in `commandLists` of your bot:

+ ```JSON

+ {

+ "title": "photo",

+ "description": "Show user photo using Single Sign On feature"

+ }

+ ```

+</details>

+<details>

+<summary><b>Message extension project

+</b></summary>

+The sample business logic provides a handler `TeamsBot` extends `TeamsActivityHandler` and override `handleTeamsMessagingExtensionQuery`.

+You can update the query logic in the `handleMessageExtensionQueryWithToken` with token, which is obtained by using the signed in Teams user token.

+To make this work in your app:

+1. Move the `auth\bot\public` folder to `bot`. This folder contains HTML pages that the bot app hosts. When SSO flows are initiated with Azure AD, Azure AD redirects you to these pages.

+1. Modify your `bot\index` to add the appropriate `restify` routes to these pages.

+ ```ts

+ const path = require("path");

+ server.get(

+ "/auth-*.html",

+ restify.plugins.serveStatic({

+ directory: path.join(__dirname, "public"),

+ })

+ );

+ ```

+1. Override `handleTeamsMessagingExtensionQuery` interface under `bot\teamsBot`. You can follow the sample code in the `handleMessageExtensionQueryWithToken` to do your own query logic.

+1. Open `bot\package.json`, ensure that `@microsoft/teamsfx` version >= 1.2.0

+1. Install `isomorphic-fetch` npm packages in your bot project.

+1. For ts, install `copyfiles` npm packages in your bot project, add or update the `build` script in `bot\package.json` as follows:

+ ```json

+ "build": "tsc --build && copyfiles ./public/*.html lib/",

+ ```

+ As you do it, the HTML pages used for auth redirect are copied when you build this bot project.

+1. Update `templates\appPackage\aad.template.json` your scopes, which used in `handleMessageExtensionQueryWithToken`.

+ ```json

+ "requiredResourceAccess": [

+ {

+ "resourceAppId": "Microsoft Graph",

+ "resourceAccess": [

+ {

+ "id": "User.Read",

+ "type": "Scope"

+ }

+ ]

+ }

+ ]

+ ```

+</details>

+## Debug your app

+Press **F5** to debug your application. Teams Toolkit uses the Azure AD manifest file to register an Azure AD app for SSO. For Teams Toolkit local debug functionalities, see [how to debug your app locally](~/toolkit/debug-local.md).

+## Customize Azure AD app registration

+The [Azure AD app manifest](/azure/active-directory/develop/reference-app-manifest) allows you to customize various aspects of app registration. You can update the manifest as needed. If you need to include more API permissions to access your desired APIs, see [API permissions to access your desired APIs](https://github.com/OfficeDev/TeamsFx/wiki/#customize-aad-manifest-template).

+To view your Azure AD app in Azure portal, see [view Azure AD app in Azure portal](https://github.com/OfficeDev/TeamsFx/wiki/Manage-AAD-application-in-Teams-Toolkit#How-to-view-the-AAD-app-on-the-Azure-portal).

+## SSO authentication concepts

+The following concepts help you with SSO authentication:

+### Working of SSO in Teams

+SSO authentication in Azure AD silently refreshes the authentication token to minimize the number of times users need to enter their sign in credentials. If users agree to use your app, they don't have to provide consent again on another device, as they're signed in automatically.

+Teams tabs and bots have similar flow for SSO support. For more information, see:

+1. [SSO authentication in Tabs](~/tabs/how-to/authentication/tab-sso-overview.md)

+1. [SSO authentication in Bots](~/bots/how-to/authentication/auth-aad-sso-bots.md)

+### Simplified SSO with TeamsFx

+TeamsFx helps to reduce the developer tasks by using SSO and accessing cloud resources down to single-line statements with zero configuration.

+With TeamsFx SDK, you can write user authentication code in a simplified way using following credentials:

+1. User identity in browser environment: `TeamsUserCredential` represents Teams current user's identity.

+1. User identity in Node.js environment: `OnBehalfOfUserCredential` uses On-Behalf-Of flow and SSO token.

+1. Application Identity in Node.js environment: `AppCredential` represents the application identity.

+For more information about TeamsFx SDK, see:

+* [TeamsFx SDK](TeamsFx-SDK.md) or [API reference](/javascript/api/@microsoft/teamsfx/?view=msteams-client-js-latest&preserve-view=true)

+* [Microsoft Teams Framework (TeamsFx) Sample Gallery](https://github.com/OfficeDev/TeamsFx-Samples/tree/v2)

+## See also

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

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

+* [Enable SSO for tab app](../tabs/how-to/authentication/tab-sso-overview.md)

+* [Enable SSO for your bot and message extension](../bots/how-to/authentication/bot-sso-overview.md)

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

+## Node.js version compatibility table for project type

+|Teams Toolkit Version | Project Type | Supported Node.js Versions |

+||||

+| 5.0.0 | Notify with http or timer trigger <br> Azure functions <br> SPFx <br> Non-SPFx | 16, 18 <br> 16, 18 <br> 16 <br> 16, 18 |

+| 4.2.2 | Notify with http or timer trigger <br> Azure functions <br> SPFx | 14, 16, 18 (Preview) <br> 14, 16, 18 (Preview) <br> 16 <br> 14, 16, 18 |

+| 4.2.0 | SPFx | 16 |

+| 4.0.3 | SPFx | 14, 16 |

+| 4.0.0 | Non-SPFx | 14, 16 |

+| 3.7.0 | SPFx | 12, 14 |

+| <3.7.0 | SPFx <br> Azure functions <br> Other | 10, 12, 14 <br> 10, 12, 14 <br> 10, 12, 14, 16 |

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

+zone_pivot_groups: teams-toolkit-platform

+# Create a new Teams app

+## Create a new Teams project using Teams Toolkit

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](~/toolkit/teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

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

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

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

+| App Types | Definition |

+| | |

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

+| **Scenario-based Teams apps** | Scenario-based Teams apps are notification bot, command bot, workflow bot, SSO-enabled tab, or SPFx tab app and these are suitable for one particular scenario. For example, a notification bot is suitable to send notifications and not used for chat. |

+## Create a new Teams app

+The process to create a new Teams app is similar for all types of apps except SPFx tab app, workflow bot, and notification bot.

+**To create a basic Teams app**:

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

+1. Select the **Teams Toolkit** > **Create a new Teams app**.

+ :::image type="content" source="toolkit-v4/images/create-project-v4.png" alt-text="screenshot shows the Create New Project button in the Teams Toolkit sidebar.":::

+1. Select **Start with a Teams capability**.

+ :::image type="content" source="toolkit-v4/images/select-app-type-v4.png" alt-text="Screenshot shows the option to select app type." lightbox="toolkit-v4/images/select-app-type-v4.png":::

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

+ :::image type="content" source="toolkit-v4/images/select-capabilities-tabapp_1-v4.png" alt-text="Select App Capability":::

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

+ :::image type="content" source="toolkit-v4/images/select-language-tab_1-v4.png" alt-text="Screenshot showing how to select the programming language.":::

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

+ :::image type="content" source="toolkit-v4/images/select-default-location-v4.png" alt-text="Select default location":::

+ <details>

+ <summary>Learn to change the default folder:</summary>

+ 1. Select **Browse**.

+ :::image type="content" source="toolkit-v4/images/select-browse_1-v4.png" alt-text="Select browse for storage":::

+ 1. Select the location for project workspace.

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

+ The folder you select is the location for your project workspace.

+ </details>

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

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

+ By default, your app project opens in a new window. You can open your app project in the current window as well.

+ :::image type="content" source="toolkit-v4/images/new-window-notification-v4.png" alt-text="New window notification":::

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

+ :::image type="content" source="toolkit-v4/images/tab-app-created-v4.png" alt-text="Screenshot showing the app created." lightbox="toolkit-v4/images/tab-app-created-v4.png":::

+### Directory structure for different app types

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

+<br>

+<details>

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

+The following example shows a basic Teams tab app directory structure:

+| Folder name | Contents |

+| | |

+| `.fx\configs` | Configuration files that you can customize for the Teams app. |

+| - `.fx\configs\azure.parameters.<envName>.json` | Parameters file for Azure bicep provision for every environment. |

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

+| - `.fx\configs\projectSettings.json` | Global project settings that apply to all environments. |

+| `tabs` | Code for the Tab capability needed at runtime, such as the privacy notice, terms of use, and configuration tabs. |

+| - `tabs\src\index.jsx` | Entry point for the front-end app, where the main app component is rendered with `ReactDOM.render()`. |

+| - `tabs\src\components\App.jsx` | Code for handling URL routing in the app. It calls the [Microsoft Teams JavaScript client library](~/tabs/how-to/using-teams-client-library.md) to establish communication between your app and Teams. |

+| - `tabs\src\components\Tab.jsx` | Code to implement the UI of your app. |

+| - `tabs\src\components\TabConfig.jsx` | Code to implement the UI that configures your app. |

+| `templates\appPackage` | App manifest template files, and the app icons: color.png and outline.png. |

+| - `templates\appPackage\manifest.template.json` | App manifest for running the app in local or remote environment. |

+| `templates\azure` | `bicep` template files. |

+> [!NOTE]

+> If you have a bot or message extension app, relevant folders are added to the directory structure.

+To learn more about the directory structure of different types of basic Teams apps, see the following table:

+| App Type | Links |

+| | |

+| For tab app | [Build your first tab app using JavaScript](~/sbs-gs-javascript.yml) |

+| For bot app | [Build your first bot app using JavaScript](~/sbs-gs-bot.yml) |

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

+</details>

+<br>

+<details>

+<summary><b>Directory structure for scenario-based Teams app</b></summary>

+The following example shows a scenario-based notification bot Teams app directory structure:

+The new project folder contains the following content:

+| Folder name | Contents |

+| | |

+| `.fx` | Project level settings, configuration, and environment information. |

+| `.vscode` | VS code files for local debug. |

+| `bot` | The bot source code. |

+| `templates` | Templates for Teams app manifest and corresponding Azure resources. |

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

+| File name | Contents |

+| | |

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

+| `src\internal\` | Generated initialize code for notification functionality. |

+| `src\index.ts` | The entry point to handle bot messages and send notifications. |

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

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

+> [!NOTE]

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

+To learn more about the directory structure of different types of scenario-based Teams apps, see the following table:

+| App Type | Links |

+| | |

+| For notification bot app | [Send notification to Teams](~/sbs-gs-notificationbot.yml) |

+| For command bot app | [Build command bot](~/sbs-gs-commandbot.yml) |

+| For workflow bot app | [Create Teams workflow bot](~/sbs-gs-workflow-bot.yml) |

+| For SPFx tab app | [Build a Teams app with SPFx](~/sbs-gs-spfx.yml) |

+</details>

+<br>

+<details>

+<summary><b>Directory structure for multi-capability app</b></summary>

+You can add more features to your existing Teams app by using **Add features**. For example, if you add a bot app to the existing tab app, Teams Toolkit adds the bot folder with relevant files and code.

+The following image shows the directory structure of a tab app:

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

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

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

+</details>

+## See also

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

+* [Build a Teams app with Blazor](~/sbs-gs-blazorupdate.yml)

+* [Build a Teams app with C# or .NET](~/sbs-gs-csharp.yml)

+* [Prerequisites for all types of environment and create your Teams appPre](~/toolkit/tools-prerequisites.md)

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

+* [Provision cloud resources](~/toolkit/provision.md)

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

+zone_pivot_groups: teams-toolkit-platform

+* [Add capabilities to your Teams apps](toolkit-v4/add-capability-v4.md)

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](/microsoftteams/platform/toolkit/teams-toolkit-fundamentals?pivots=visual-studio-code-v5) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

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

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

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

+> [!NOTE]

+> You can upgrade your old Teams Toolkit project to use new tasks, for more information, see [debug settings doc](https://aka.ms/teamsfx-debug-upgrade-new-tasks)

+## Set up your Teams Toolkit for debugging

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

+# [Windows](#tab/Windows)

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

+ :::image type="content" source="toolkit-v4/images/debug-run-v4.png" alt-text="Browser option":::

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

+ :::image type="content" source="toolkit-v4/images/start-debugging-v4.png" alt-text="Start debugging":::

+3. Select **Sign in** to Microsoft 365 account.

+ :::image type="content" source="toolkit-v4/images/microsoft365-signin-v4.PNG" alt-text="Sign in":::

+ > [!TIP]

+ > You can select **Read more** to learn about Microsoft 365 Developer Program. Your default web browser opens to let you sign-in to your Microsoft 365 account with your credentials.

+4. Select **Install** to install the development certificate for localhost.

+ :::image type="content" source="toolkit-v4/images/install-certificate-v4.PNG" alt-text="certificate":::

+ > [!TIP]

+ > You can select **Learn More** to know about the development certificate.

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

+ :::image type="content" source="toolkit-v4/images/development-certificate-v4.PNG" alt-text="certification authority":::

+Toolkit launches a new Microsoft Edge or Chrome browser instance based on your selection and opens a web page to load Teams client.

+# [macOS](#tab/macOS)

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

+ :::image type="content" source="toolkit-v4/images/debug-run-v4.png" alt-text="Browser lists":::

+1. Select **Start Debugging (F5)** or **Run** to run your Teams app in debug mode.

+ :::image type="content" source="toolkit-v4/images/start-debugging-v4.png" alt-text="Debug your app":::

+3. Select **Sign in** to Microsoft 365 account.

+ :::image type="content" source="toolkit-v4/images/microsoft365-signin-v4.PNG" alt-text="Sign into M365 account":::

+ > [!TIP]

+ > You can select **Read more** to learn about Microsoft 365 Developer Program. Your default web browser opens to let you sign-in to your Microsoft 365 account using your credentials.

+4. Select **Install** to install the development certificate for localhost.

+ :::image type="content" source="toolkit-v4/images/install-certificate-v4.PNG" alt-text="certificate":::

+ > [!TIP]

+ > You can select **Learn More** to know about the development certificate.

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

+ :::image type="content" source="toolkit-v4/images/mac-settings-v4.png" alt-text="mac sign in":::

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

+## Debug your app

+After the initial setup process, Teams Toolkit starts the following processes:

+* [Starts app services](#starts-app-services)

+* [Launches debug configurations](#launches-debug-configurations)

+* [Sideloads the Teams app](#sideloads-the-teams-app)

+### Starts app services

+Runs tasks as defined in `.vscode/tasks.json`.

+| Component | Task name | Folder |

+| | | |

+| Tab | **Start Frontend** | tabs |

+| Bot or message extensions | **Start Bot** | bot |

+| Azure Functions | **Start Backend** | API |

+The following image displays task names in the **OUTPUT** and **TERMINAL** tabs of the Visual Studio Code while running tab, bot or message extension, and Azure Functions.

+### Launches debug configurations

+Launches the debug configurations as defined in `.vscode/launch.json`.

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

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

+| | | |

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

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

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

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

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

+| | | |

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

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

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

+### Sideloads the Teams app

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

+ :::image type="content" source="toolkit-v4/images/hello-local-debug-v4.png" alt-text="Add local debug" lightbox="toolkit-v4/images/hello-local-debug-v4.png":::

+ Your app is added to Teams!

+## Next step

+> [!div class="nextstepaction"]

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

+## See also

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

+* [Introduction to Azure Functions](/azure/azure-functions/functions-overview)

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

+* [Add capabilities of Teams Toolkit v4 to Microsoft Teams app](toolkit-v4/add-capability-v4.md)

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

+zone_pivot_groups: teams-toolkit-platform

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

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

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](/microsoftteams/platform/toolkit/teams-toolkit-fundamentals?pivots=visual-studio-code-v5) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

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

+## Debug your Teams app for Visual Studio Code

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

+During the debug process:

+* Teams Toolkit automatically starts app services, launches debuggers, and sideloads the Teams app.

+* Teams Toolkit checks the prerequisites during the debug background process.

+* Your Teams app is available for preview in Teams web client locally after debugging.

+* You can also customize debug settings to use your bot endpoints, development certificate, or debug partial component to load your configured app.

+* Visual Studio Code allows you to debug tab, bot, message extension, and Azure Functions.

+## Key debug features of Teams Toolkit

+Teams Toolkit supports the following debug features:

+* [Start debugging](#start-debugging)

+* [Multi-target debugging](#multi-target-debugging)

+* [Toggle breakpoints](#toggle-breakpoints)

+* [Hot reload](#hot-reload)

+* [Stop debugging](#stop-debugging)

+Teams Toolkit performs background functions during debug process, which include verifying the prerequisites required for debug. You can see the progress of the verification process in the output channel of Teams Toolkit. In the setup process you can register and configure your Teams app.

+### Start debugging

+You can press **F5** as a single operation to start debugging. Teams Toolkit starts to check prerequisites, registers Microsoft Azure Active Directory (Azure AD) app, Teams app, and registers bot, starts services, and launches browser.

+### Multi-target debugging

+Teams Toolkit utilizes multi-target debugging feature to debug tab, bot, message extension, and Azure Functions at the same time.

+### Toggle breakpoints

+You can toggle breakpoints on the source codes of tabs, bots, message extensions, and Azure Functions. The breakpoints execute when you interact with the Teams app in a web browser. The following image shows toggle breakpoint:

+ :::image type="content" source="toolkit-v4/images/toggle-points-v4.png" alt-text="toggle breakpoints":::

+### Hot reload

+You can update and save the source codes of tab, bot, message extension, and Azure Functions at the same time when you're debugging the Teams app. The app reloads and the debugger reattach to the programming languages.

+ :::image type="content" source="toolkit-v4/images/hot-reload-v4.png" alt-text="hot-reload for source codes" lightbox="toolkit-v4/images/hot-reload-v4.png":::

+### Stop debugging

+When you complete local debug, you can select **Stop (Shift+F5)** or **[Alt] Disconnect (Shift+F5)** from the floating debugging toolbar to stop all debug sessions and terminate tasks. The following image shows the stop debug action:

+ :::image type="content" source="toolkit-v4/images/stop-debug-v4.png" alt-text="stop debugging":::

+## Prepare for debug

+The following steps help you to prepare for debug:

+### Sign in to Microsoft 365

+If you've signed up for Microsoft 365 already, sign in to Microsoft 365. For more information, see [Microsoft 365 developer program](/microsoftteams/platform/toolkit/tools-prerequisites).

+### Toggle breakpoints

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

+## Customize debug settings

+Teams Toolkit allows you to customize the debug settings to create your tab or bot. For more information on the full list of customizable options, see [debug settings doc](https://aka.ms/teamsfx-debug-tasks).

+You can also customize debug settings for your existing bot app.

+<br>

+<details>

+<summary><b>Learn how to use an existing bot for debugging</b></summary>

+To use an existing bot, you can set it up using its `botId` and `botPassword` arguments in Set up bot task. This task is to register resources and prepare local launch information for Bot.

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

+```json

+{

+ "label": "Set up Bot",

+ "type": "teamsfx",

+ "command": "debug-set-up-bot",

+ "args": {

+ //// Use your own AAD App for bot

+ // "botId": "",

+ // "botPassword": "", // use plain text or environment variable reference like ${env:BOT_PASSWORD}

+ "botMessagingEndpoint": "api/messages"

+ }

+}

+```

+1. Update `botId` with the Azure AD app client id for your existing bot.

+1. Update `botPassword` with the Azure AD app client secret for your bot.

+</details>

+### Customize Scenarios

+Here's a list of debug scenarios that you can use:

+<br>

+<details>

+<summary><b>Skip prerequisite checks</b></summary>

+In `.fx/configs/tasks.json` under `"Validate & install prerequisites"` > `"args"` > `"prerequisites"`, update the prerequisite checks you wish to skip.

+ :::image type="content" source="toolkit-v4/images/skip-prerequisite-checks-v4.png" alt-text="skip the prerequisite checks":::

+</details>

+<details>

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

+1. In `.fx/configs/tasks.json`, uncheck `"devCert"` under `"Validate & install prerequisites"` > `"args"` > `"prerequisites"`.

+1. Set "SSL_CRT_FILE" and "SSL_KEY_FILE" in `.env.teamsfx.local` to your certificate file path and key file path.

+</details>

+<details>

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

+In `.fx/configs/tasks.json`, set npmInstallArgs under `"Install npm packages"`.

+

+ :::image type="content" source="toolkit-v4/images/customize-npm-install-v4.png" alt-text="Install npm package":::

+</details>

+<details>

+<summary><b>Modify ports</b></summary>

+* Bot

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

+ 1. Replace it with your port.

+ :::image type="content" source="toolkit-v4/images/modify-ports-bot-v4.png" alt-text="Replace your port for bot":::

+* Tab

+ 1. In `.fx/configs/tasks.json`, search for `"53000"`.

+ 1. Replace it with your port.

+ :::image type="content" source="toolkit-v4/images/modify-ports-tab-v4.png" alt-text="Replace your port for tab":::

+</details>

+<details>

+<summary><b>Use your own app package</b></summary>

+In `.fx/configs/tasks.json`, set `"appPackagePath"` under `"Build & upload Teams manifest"` to your app package's path.

+ :::image type="content" source="toolkit-v4/images/app-package-path-v4.png" alt-text="use your own app package path":::

+</details>

+<details>

+<summary><b>Use your own tunnel</b></summary>

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

+ :::image type="content" source="toolkit-v4/images/start-local-tunnel-v4.png" alt-text="Use your own tunnel":::

+1. Launch your own tunnel service then update `"botMessagingEndpoint"` to your own message endpoint in `.fx/configs/tasks.json` under `"Set up bot"`.

+ :::image type="content" source="toolkit-v4/images/set-up-bot-v4.png" alt-text="update messaging endpoint":::

+</details>

+<details>

+<summary><b>Add environment variables</b></summary>

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

+ > [!NOTE]

+ > Ensure to start a new local debug after you add new environment variables, as the environment variables don't support hot reload.

+</details>

+<details>

+<summary><b>Debug partial component</b></summary>

+Teams Toolkit utilizes Visual Studio Code multi-target debugging to debug tab, bot, message extension, and Azure Functions at the same time. You can update `.vscode/launch.json` and `.vscode/tasks.json` to debug partial component. If you want to debug tab only in a tab plus bot with Azure Functions project, use the following steps:

+1. Update `"Attach to Bot"` and `"Attach to Backend"` from debug compound in `.vscode/launch.json`.

+ ```json

+ {

+ "name": "Debug (Edge)",

+ "configurations": [

+ "Attach to Frontend (Edge)",

+ // "Attach to Bot",

+ // "Attach to Backend""

+ ],

+ "preLaunchTask": "Pre Debug Check & Start All",

+ "presentation": {

+ "group": "all",

+ "order": 1

+ },

+ "stopAll": true

+ }

+ ```

+2. Update `"Start Backend"` and `"Start Bot"` from Start All task in .vscode/tasks.json.

+ ```json

+ {

+

+ "label": "Start All",

+ "dependsOn": [

+ "Start Frontend",

+ // "Start Backend",

+ // "Start Bot"

+ ]

+

+ }

+ ```

+</details>

+## Next

+> [!div class="nextstepaction"]

+> [Debug your app locally](/microsoftteams/platform/toolkit/debug-local?tabs=Windows&pivots=visual-studio-code-v4)

+## See also

+* [Teams Toolkit Overview](teams-toolkit-fundamentals.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)

+zone_pivot_groups: teams-toolkit-platform

+* [Add capabilities to your Teams apps](toolkit-v4/add-capability-v4.md)

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

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

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

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](/microsoftteams/platform/toolkit/teams-toolkit-fundamentals?pivots=visual-studio-code-v5) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

+Teams Toolkit helps to deploy or upload the front-end and back-end code in your app to your provisioned cloud resources in Azure.

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

+You can deploy the following to the cloud:

+* The tab, such as front-end apps are deployed to Azure Storage and configured for static web hosting or a SharePoint site.

+* The back-end APIs are deployed to Azure Functions.

+* The bot or message extension is deployed to Azure App Service.

+ > [!NOTE]

+ > Before you deploy app code to Azure cloud, you need to successfully complete the [provisioning of cloud resources](/microsoftteams/platform/toolkit/provision?pivots=visual-studio-code-v4).

+## Deploy Teams apps using Teams Toolkit

+The Get started guide helps to deploy using Teams Toolkit. You can use the following to deploy your Teams app:

+* [Deploy your app to Azure](/microsoftteams/platform/sbs-gs-javascript?tabs=vscode%2Cvsc%2Cviscode%2Cvcode&tutorial-step=4)

+* [Deploy your app to SharePoint](/microsoftteams/platform/sbs-gs-spfx?tabs=vscode%2Cviscode&tutorial-step=4)

+## Details on Teams app workload

+| Teams app workload | Source code | Build artifact| Target resource |

+|-|-|||

+|Tabs with React </br> The front-end workload| `yourProjectFolder/tabs`| `tabs/build` |Azure Storage |

+|Tabs with SharePoint </br> The front-end workload | `yourProjectFolder/SPFx`| `SPFx/sharepoint/solution` |SharePoint app catalog |

+|APIs on Azure Functions </br> The back-end workload | `yourProjectFolder/api`| Not applicable |Azure Functions |

+|Bots and message extensions </br> The back-end workload | `yourProjectFolder/bot` | Not applicable | Azure App Service |

+> [!NOTE]

+> When you include Azure API Management resource in your project and trigger deploy, you can publish your APIs in Azure Functions to Azure API Management service.

+## See also

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

+* [Create and deploy an Azure cloud service](/azure/cloud-services/cloud-services-how-to-create-deploy-portal)

+* [Add capabilities to your Teams apps](toolkit-v4/add-capability-v4.md)

+zone_pivot_groups: teams-toolkit-platform

+> Teams Toolkit v4 extension will soon be deprecated.

+You can explore the Teams Toolkit v4 look and feel within the Visual Studio Code.

+This section gives you a tour of Teams Toolkit v4 and its features.

+## Take a tour of Teams Toolkit v4

+Teams Toolkit appears within Visual Studio Code as an extension. After you install Teams Toolkit, it opens within the Visual Studio Code window.

+| Serial No. | UI Elements | Definition |

+| | | |

+| 1 | **Documentation** | Access the Microsoft Teams Developer documentation. |

+| 2 | **How-to guides** | Access how-to guides for app scenario and app development. |

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

+| 4 | **View samples** | Select and build existing app samples based on common use cases for a Teams app. |

+| 5 | ΓÇó **New File** <br> ΓÇó **Open File** <br> ΓÇó **Open Folder** <br> ΓÇó **Clone Git Repository** | ΓÇó Create a new file. <br> ΓÇó Open the existing file. <br> ΓÇó Open the existing folder. <br> ΓÇó Clone the Git repository of your app project. |

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

+| 7 | **Get Started** | Explore Teams Toolkit and get an overview of the fundamentals. |

+### Explore the Teams Toolkit task pane

+You can explore the available functionalities from the Teams Toolkit task pane. The task pane appears only after you've created an app project using Teams Toolkit. The following video helps you to learn about the process of creating a new Teams app:

+ :::image type="content" source="toolkit-v4/images/javascript-bot-app1_1-v4.gif" alt-text="Create a Teams app":::

+After you create a new Teams app project, the directory structure of the app appears in the left panel and the **`README`** file in the right panel.

+Let's take a tour of Teams Toolkit.

+ In Visual Studio Code activity bar, the following icons are relevant to Teams Toolkit:

+| Select | To... |

+| | |

+| **Explorer** :::image type="icon" source="toolkit-v4/images/file-explorer-icon-v4.png" border="false"::: | View the directory structure of the app. |

+| **Run and Debug** :::image type="icon" source="toolkit-v4/images/run-debug-icon-v4.png" border="false"::: | Start the local or remote debug process. |

+| **Teams Toolkit** :::image type="icon" source="toolkit-v4/images/teams-toolkit-sidebar-icon-v4.PNG" border="false"::: | View the task pane in the Teams Toolkit. |

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

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

+ :::image type="content" source="toolkit-v4/images/accounts1_1-v4.png" alt-text="accounts section":::

+ :::column-end:::

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

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

+

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

+ * **Sign in to Azure**: Use your Azure account for deploying your app on Azure. You can [create a free Azure account](https://azure.microsoft.com/free/) before you start.

+ :::column-end:::

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

+ :::image type="content" source="toolkit-v4/images/environment1-v4.png" alt-text="Environment section"::::::

+ :::column-end:::

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

+ To deploy your Teams app, you need the following environments:

+

+ * **local**: Deploy your app in the default local environment with local environment configurations.

+ * **dev**: Deploy your app in the default dev environment with remote or cloud environment configurations.

+ You can create more environments, such as production or test, as you need.

+ :::column-end:::

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

+ :::image type="content" source="toolkit-v4/images/development-vsc-v4.png" alt-text="Development section":::

+ :::column-end:::

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

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

+

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

+ * **View samples**: Select any of the Teams Toolkit's sample apps. The toolkit downloads the app code from GitHub and you can build the sample app.

+ * **View how-to-guides**: Select to view Teams app scenario guides and development guides.

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

+

+ * **Preview your Teams app (F5)**: Press **F5** to debug and preview your Teams app.

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

+ :::column-end:::

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

+ :::image type="content" source="toolkit-v4/images/deployment1-v4.png" alt-text="Deployment section":::

+ :::column-end:::

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

+ To provision, deploy, and publish your Teams app, you need the following features:

+

+ * **Provision in the cloud**: Allocate Azure resources for your application. Teams Toolkit is integrated with Azure Resource Manager, and it registers your app with Azure AD automatically.

+ * **Zip Teams metadata package**: Create the app package that can be uploaded to Teams or Developer Portal. It contains the app manifest and app icons.

+

+ * **Deploy to the cloud**: Deploy the source code to Azure.

+

+ * **Publish to Teams**: Publish your developed app and distribute it to scopes, such as personal, team, channel, or organization.

+

+ * **Developer Portal for Teams**: Use Developer Portal to configure and manage your Teams app.

+ :::column-end:::

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

+ :::image type="content" source="toolkit-v4/images/help-and-feedback1-v4.png" alt-text="Help and feedback section":::

+ :::column-end:::

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

+ To access more information on Teams Toolkit, you need the following documentation and resources:

+

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

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

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

+ :::column-end:::

+### To view how-to guides

+1. Select **View how-to guides** from the Teams Toolkit task pane under Development section.

+ The **View how-to guides** menu appears.

+2. Select the type of how-to guide that you want to view.

+ :::image type="content" source="toolkit-v4/images/view-how-to-guides-v4.png" alt-text="Screenshot showing the how-to guides menu options." lightbox="toolkit-v4/images/view-how-to-guides-v4.png":::

+ * Select any one of the Teams app scenario guides to view the guide to develop an app for a common app scenario, such as sending notifications using a bot.

+ * Select any one of the Teams app development guides to view a guide that helps in app development, such as embedding a dashboard tab in a Teams app.

+## See also

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

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

+* [App manifest schema](~/resources/schem)

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

+> [Teams Toolkit vs](toolkit-v4/teams-toolkit-fundamentals-vs.md) extension will soon be deprecated.

+zone_pivot_groups: teams-toolkit-platform

+> Teams Toolkit v4 extension will soon be deprecated.

+ The **EXTENSIONS: MARKETPLACE** pane appears.

+The Microsoft Azure Active Directory (Azure AD) manifest contain definitions of all the attributes of an Azure AD application object in the Microsoft identity platform.

+## Prerequisites

+Before installing Teams Toolkit for Visual Studio Code, you need to [download and install Visual Studio Code](https://code.visualstudio.com/Download).

+## Install Teams Toolkit for Visual Studio Code

+You can install Teams Toolkit using **Extensions** in Visual Studio Code, or install it from the Visual Studio Code Marketplace.

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

+1. Launch Visual Studio Code.

+1. Select **View > Extensions** or **Ctrl+Shift+X**. You can also open extensions by selecting the extensions :::image type="icon" source="toolkit-v4/images/vsc-ext-icon-v4.png" border="false":::icon from the Visual Studio Code activity bar.

+ :::image type="content" source="toolkit-v4/images/install toolkit-1_2-v4.PNG" alt-text="Screenshot shows how to install.":::

+ The extensions marketplace pane appears.

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

+ :::image type="content" source="toolkit-v4/images/install-toolkit-2_2_1-v4.png" alt-text="Screenshot show the Toolkit.":::

+ Teams Toolkit appears in the search result list.

+1. Select **Teams Toolkit**, and then from the Teams Toolkit extension page that appears in the right pane, select **Install**.

+ :::image type="content" source="toolkit-v4/images/select-install-ttk_2-v4.png" alt-text="Screenshot shows install toolkit 4.0.0.":::

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

+ :::image type="content" source="toolkit-v4/images/after-install_2-v4.PNG" alt-text="Screenshot shows after install view.":::

+# [Marketplace](#tab/marketplace)

+1. Go to [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension) in a web browser.

+ :::image type="content" source="toolkit-v4/images/install-ttk-marketplace_1-v4.png" alt-text="Screenshot shows the installation of TTK Marketplace.":::

+1. Select **Install**.

+ :::image type="content" source="toolkit-v4/images/Install-ttk_1-v4.png" alt-text="Screenshot shows how to install TTK.":::

+1. In the pop-up window that appears, select **Open**.

+ :::image type="content" source="toolkit-v4/images/select-open_1-v4.png" alt-text="Screenshot shows a pop-up window to open Visual Studio Code.":::

+ Visual Studio Code opens with the Teams Toolkit extension page.

+ :::image type="content" source="toolkit-v4/images/ttk-in-vsc_1-v4.PNG" alt-text="Screenshot shows how to select TTK in VSC." lightbox="toolkit-v4/images/ttk-in-vsc_1-v4.PNG":::

+1. Select **Install**.

+ :::image type="content" source="toolkit-v4/images/select-install-ttk_2-v4.png" alt-text="Screenshot shows how to select Install TTK in VSC.":::

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

+ :::image type="content" source="toolkit-v4/images/after-install_2-v4.PNG" alt-text="Screenshot shows the after installation view.":::

+## Install a different release version

+By default, Visual Studio Code automatically keeps Teams Toolkit up-to-date. If you want to install a different release version, follow these steps:

+1. Select **Extensions** :::image type="icon" source="toolkit-v4/images/extension icon-v4.png" border="false"::: from the Visual Studio Code activity bar.

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

+ :::image type="content" source="toolkit-v4/images/TeamsToolkit-search-v4.png" alt-text="Search for Teams Toolkit.":::

+1. Select **Teams Toolkit**.

+1. On the Teams Toolkit page, select the dropdown next to **Uninstall**.

+1. Select **Install Another Version...** from the dropdown.

+ :::image type="content" source="toolkit-v4/images/InstallAnotherVersion-v4.png" alt-text="Select other version of Visual Studio Code.":::

+1. Select the required version to install.

+ :::image type="content" source="toolkit-v4/images/Olderversions of VS Code-v4.png" alt-text="Screenshot shows versions other than the latest version of Visual Studio Code.":::

+ Teams Toolkit installs the version youΓÇÖve selected.

+## Install a pre-release version

+The Teams Toolkit for Visual Studio Code extension is available in a pre-release version. To install a Teams Toolkit pre-release version, follow these steps:

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

+1. Select **Extensions** :::image type="icon" source="toolkit-v4/images/extension icon-v4.png" border="false"::: from the Visual Studio Code activity bar.

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

+1. On the Teams Toolkit page, select the dropdown arrow next to **Install**.

+1. Select **Install Pre-Release Version**.

+## Next steps

+> [!div class="nextstepaction"]

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

+## See also

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

+* [Prepare to build apps](~/toolkit/build-environments.md)

+* [Provision cloud resources](~/toolkit/provision.md)

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

+* [Create new Teams app](~/toolkit/create-new-project.md)

+zone_pivot_groups: teams-toolkit-platform

+> [!IMPORTANT]

+>

+> We've introduced the [Teams Toolkit v5](/microsoftteams/platform/toolkit/teams-toolkit-fundamentals?pivots=visual-studio-code-v5) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.

+>

+> Teams Toolkit v4 extension will soon be deprecated.

+TeamsFx integrates with Azure and the Microsoft 365 cloud, which allows to place your app in Azure with a single command. TeamsFx integrates with Azure Resource Manager (ARM), which enables to provision Azure resources that your application needs for code approach.

+> [!NOTE]

+> Teams toolkit doesn't provide support to deploy resources to other cloud platforms except Azure, however, the user can deploy manually.

+## Provision using Teams Toolkit in Microsoft Visual Studio Code version 4

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

+## Create Resources

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

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

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

+* Azure resources under your selected Azure subscription.

+When you create a new project, you also need to create Azure resources. The ARM template defines all the Azure resources and helps to create required Azure resources during provision. When you [add a new capability resource](/microsoftteams/platform/toolkit/add-resource) to an existing project, the updated ARM template reflects the latest change.

+> [!NOTE]

+> Azure services incur costs in your subscription. For more information on cost estimation, see [pricing calculator](https://azure.microsoft.com/pricing/calculator/).

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

+<br>

+<details>

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

+|Resource|Purpose|Description |

+|-|--|--|

+| Azure storage | Hosts your tab app. | Enables static web app feature to host your tab app. |

+| User assigned identity | Authenticates Azure service-to-service requests. | Shares across different capabilities and resources. |

+</details>

+<br>

+<details>

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

+|Resource|Purpose| Description |

+|-|--|--|

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

+| App service plan for bot | Hosts the web app of bot. |Not applicable |

+| Web app for bot | Hosts your bot app. | - Adds user assigned identity to access other Azure resources. <br />- Adds app settings required by [TeamsFx SDK](https://www.npmjs.com/package/@microsoft/teamsfx). |

+| User assigned identity | Authenticates Azure service-to-service requests. | Shares across different capabilities and resources. |

+</details>

+<br>

+<details>

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

+|Resource|Purpose| Description|

+|-|--|--|

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

+| Function app | Hosts your Azure Functions APIs. | - Adds user assigned identity to access other Azure resources. <br />- Adds cross-origin resource sharing (CORS) rule to allow requests from your tab app. <br />- Adds an authentication setting that allows requests from your Teams app. <br />- Adds app settings required by [TeamsFx SDK](https://www.npmjs.com/package/@microsoft/teamsfx). |

+| Azure storage for function app | Requires to create function app. |Not applicable|

+| User assigned identity | Authenticates Azure service-to-service requests. | Shares across different capabilities and resources. |

+</details>

+<br>

+<details>

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

+|Resource|Purpose | Description |

+|-|--|--|

+| Azure SQL server | Hosts the Azure SQL database instance. | Allows all Azure services to access the server. |

+| Azure SQL database | Stores data for your app. | Grants user assigned identity, read or write permission to the database. |

+| User assigned identity | Authenticates Azure service-to-service requests. | Shares across different capabilities and resources. |

+</details>

+<br>

+<details>

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

+|Resource|Purpose|

+|-|--|

+| Azure AD app for API management service | Allows Microsoft Power Platform access APIs managed by API management service. |

+| API management service | Manages your APIs hosted in function app. |

+| API management product | Group your APIs, define terms of use, and runtime policies. |

+| API management OAuth server | Enables Microsoft Power Platform to access your APIs hosted in function app. |

+| User assigned identity | Authenticates Azure service-to-service requests. |

+</details>

+<br>

+<details>

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

+|Resource|Purpose of this resource|

+|-|--|

+| Azure Key Vault Service | Manage secrets (for example, Azure AD app client secret) used by other Azure services. |

+| User Assigned Identity | Authenticates Azure service-to-service requests. |

+</details>

+<br>

+## Customize resource provision

+Teams Toolkit enables you to use an infrastructure-as-code approach to define the Azure resources that you want to provision and how you want to configure. Teams toolkit uses the ARM template to define Azure resources. The ARM template is a set of `bicep` files that defines the infrastructure and configuration for your project. You can customize Azure resources by modifying the ARM template. For more information, see [bicep document](/azure/azure-resource-manager/bicep).

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

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

+* ARM template files located at `templates\azure`, this folder contains following files:

+ | File | Function | Allow customization |

+ | | | |

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

+ | provision.bicep | Creates and configures Azure resources. | Yes |

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

+ | provision\xxx.bicep | Creates and configures each Azure resource consumed by `provision.bicep`. | Yes |

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

+> [!NOTE]

+> When you add resources or capabilities to your project, `teamsfx\xxx.bicep` is regenerated, you can't customize the same. To modify the `bicep` files, you can use Git to track your changes to `teamsfx\xxx.bicep` files, which helps you not lose changes while adding resources or capabilities.

+### Azure AD parameters

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

+There are two types of parameters:

+* [Azure AD application-related parameters](#azure-ad-application-related-parameters)

+* [Azure resource-related parameters](#azure-resource-related-parameters)

+##### Azure AD application-related parameters

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

+| | | | |

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

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

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

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

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

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

+##### Azure resource-related parameters

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

+| | | | |

+| azureSqlAdmin | `{{state.fx-resource-azure-sql.admin}}` | Azure SQL Server admin account you provided during provision. | Delete the placeholder and fill the actual value. |

+| azureSqlAdminPassword | `{{state.fx-resource-azure-sql.adminPassword}}` | Azure SQL Server admin password you provided during provision. | Delete the placeholder and fill the actual value. |

+#### Reference environment variables in parameter files

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

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

+```json

+...

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

+...

+```

+#### Customize ARM template files

+If the predefined templates don't meet your app requirements, you can customize the ARM templates under `templates\azure` folder. For example, you can customize the ARM template to create some extra Azure resources for your app. You need to have basic knowledge of the bicep language, which is used to author an ARM template. You can get started with bicep at [bicep documentation](/azure/azure-resource-manager/bicep/).

+> [!NOTE]

+> The ARM template is shared by all environments. You can use [conditional deployment](/azure/azure-resource-manager/bicep/conditional-resource-deployment) if the provision behavior varies between the environments.

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

+> [!NOTE]

+> If you use other tool for further development, you can ignore these requirements.

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

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

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

+### Customize Teams apps

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

+* [Use an existing Azure AD app for your Teams app](#use-an-existing-azure-ad-app-for-your-teams-app)

+* [Use an existing Azure AD app for your bot](#use-an-existing-azure-ad-app-for-your-bot-1)

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

+You can add the following configuration snippet to `.fx\configs\config.{env}.json` file to use an Azure AD app created for your Teams app. If you don't have an Azure AD app yet or you already have one but don't know where to find the correct value, see [how to use existing Azure AD app in TeamsFx project](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/fx-core/using-existing-aad.md):

+```json

+"$schema": "https://aka.ms/teamsfx-env-config-schema",

+"description": "...",

+"manifest": {

+ ...

+},

+// Add code below. Note you need to replace the placeholders with real values.

+"auth": {

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

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

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

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

+}

+```

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

+> [!NOTE]

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

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

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

+```json

+"$schema": "https://aka.ms/teamsfx-env-config-schema",

+"description": "...",

+"manifest": {

+ ...

+},

+// Add code below. Note you need to replace the placeholders with real values.

+"bot": {

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

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

+}

+```

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

+> [!NOTE]

+>

+> * Add the configuration snippet in the `.vscode/tasks.json` file. A Teams Toolkit generated project has a pre-defined set of Visual Studio Code debugging tasks in the `.vscode/tasks.json` file. These pre-defined tasks are generated by Teams Toolkit version 4.1.0 or later. You can use the `.vscode/tasks.json` file for customizing debugging tasks and the `.fx\configs\config.{env}.json` file for cloud environments.

+>

+> * To find the correct values for `appId` and `appPassword`, see [how to use existing Azure AD app in TeamsFx project](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/fx-core/using-existing-aad.md).

+#### Skip adding user for SQL database

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

+```json

+"skipAddingSqlUser": true

+```

+### Specify the name of function app instance

+You can use `contosoteamsappapi` for function app instance instead of using the default name.

+> [!NOTE]

+> If you have already provisioned the environment, specifying the name can create a new function app instance for you, instead of renaming the instance created previously.

+Follow the steps to specify the name of the function app instance:

+1. Open `.fx\configs\azure.parameters.{env}.json` for your current environment.

+2. Add a new property, for example, `functionAppName` under the `provisionParameters` section.

+3. Enter a value of `functionAppName`, for example `contosoteamsappapi`.

+4. Final parameter file is shown in the following snippet:

+ ```json

+ {

+ "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentParameters.json#",

+ "contentVersion": "1.0.0.0",

+ "parameters": {

+ "provisionParameters": {

+ "value": {

+ "functionAppName": "contosoteamsappapi"

+ ...

+ }

+ }

+ }

+ }

+ ```

+To add other Azure resource or storage to the app, consider the following scenario:

+Add Azure storage to your Azure function back-end to store blob data. There's no auto flow to update the `bicep` template with the Azure storage support. However, you can edit the `bicep` file and add the resource. Follow these steps:

+1. Create a tab project.

+2. Add function to the project. For more information, see [add a new capability resource](/microsoftteams/platform/toolkit/add-resource).

+3. Declare the new storage account in ARM template. You can declare the resource at `templates\azure\provision\function.bicep` directly. You can declare the resources in other places.

+ `````````bicep

+ var applicationStorageAccountName = 'myapp${uniqueString(resourceGroup().id)}'

+ resource applicationStorageAccount 'Microsoft.Storage/storageAccounts@2021-06-01' = {

+ name: applicationStorageAccountName

+ location: resourceGroup().location

+ kind: 'Storage'

+ sku: {

+ name: 'Standard_LRS'

+ }

+ }

+ `````````

+4. Update the Azure Functions app settings with Azure storage connection string in `templates\azure\provision\function.bicep`. Add the following snippet to `functionApp` resource's `appSettings` array:

+ ``````````````````bicep

+ {

+ name: 'MyAppStorageAccountConnectionString'

+ value: 'DefaultEndpointsProtocol=https;AccountName=${applicationStorageAccount.name};AccountKey=${listKeys(applicationStorageAccount.id, '2021-06-01').keys[0].value}'

+ }

+ ```````````````````

+5. You can update your function with Azure storage output bindings.

+## See also

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

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

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

+* [Collaborate with other developers on Teams project](~/toolkit/TeamsFx-collaboration.md)

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

+zone_pivot_groups: teams-toolkit-platform

+> * Teams Toolkit v4 extension will soon be deprecated.

+Teams Toolkit is available for free for Visual Studio Code. For more information about installation and set up, see [Install Teams Toolkit](install-Teams-Toolkit.md).

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

+* Start with a project templates for common line-of-business app scenarios or from a sample.

+* Save setup time with automated app registration and configuration.

+* Run and debug to Teams directly from familiar tools.

+* Smart defaults for hosting in Azure using infrastructure-as-code and Bicep.

+* Create unique configurations like dev, test, and prod using the environments feature.

+* Bring your app to your organization or the Teams App Store using built-in publishing tools.

+## Available for Visual Studio Code

+Teams Toolkit v4 is available for free for Visual Studio Code. For more information about installation and setup, see [install Teams Toolkit](~/toolkit/install-teams-toolkit.md).

+| Teams Toolkit | Visual Studio Code |

+| - | |

+| Installation | Available in the VS Code Marketplace |

+| Build with | JavaScript, TypeScript, React, SPFx |

+## Features

+The following list provides the key features of Teams Toolkit:

+* [Project templates](#project-templates)

+* [Automatic registration and configuration](#automatic-registration-and-configuration)

+* [Multiple environments](#multiple-environments)

+* [Quick access to Teams Developer Portal](#quick-access-to-teams-developer-portal)

+### Project templates

+You can start directly with the capability-focused templates such as tabs, bots, and message extensions or by following existing samples if you're already familiar with Teams app development. Teams Toolkit reduces the complexity of getting started with templates for common line-of-business app scenarios and smart defaults to accelerate your time to production.

+### Automatic registration and configuration

+You can save time and let the toolkit automatically register the app in Teams Developer Portal. When you first run or debug the app, configure settings, such as Azure Active Directory (Azure AD) automatically. Sign in with your Microsoft 365 account to control where the app is configured and customized the included Azure AD manifest when you need flexibility.

+### Multiple environments

+You can create different groupings of cloud resources to run and test your app. Use the **dev** environment with your Azure subscription or create a new app with a different subscription for staging, test, and production.

+### Quick access to Teams Developer Portal

+You can access Teams Developer Portal quickly, where you can configure, distribute, and manage your app. For more information, see [manage your Teams apps using Developer Portal](~/concepts/build-and-test/manage-your-apps-in-developer-portal.md).

+## See also

+* [Build tabs for Teams](~/tabs/what-are-tabs.md)

+* [Build bots for Teams](~/bots/what-are-bots.md)

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

+* [Create a new Teams app](~/toolkit/create-new-project.md)

+* [Provision cloud resources](~/toolkit/provision.md)

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

+* [Publish Teams apps](~/toolkit/publish.md)

+> Teams Toolkit v4extension will soon be deprecated.

+ You can create a project with Teams Toolkit that comes with single sign-on (SSO) support by default such as `SSO-enabled tab`. For more information on how to create a new app, see [Create a new Teams app](../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.

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

+- [Customize Teams app manifest](../TeamsFx-preview-and-customize-app-manifest.md)

+- [Debug your Teams app](../debug-overview.md)

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

+ > Before adding collaborators for an environment, project owner needs to [Provision cloud resources](../provision.md) the project first.

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

+* [Provision cloud resources](../provision.md)

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

+| 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 Microsoft Azure Active Directory (Azure AD) app for Teams app | `auth` section in`.fx\config.<envName>.json`| [Use an existing Azure AD app for your Teams app](../provision.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 |`manifest.template.json` file is available under `templates\appPackage`| [Preview app manifest in Toolkit](../TeamsFx-preview-and-customize-app-manifest.md)|

+ > For more information on running provision command with Teams Toolkit, see [how to provision using Teams Toolkit in Microsoft Visual Studio Code](../provision.md#provision-using-teams-toolkit-in-microsoft-visual-studio-code).

+ > For more information on running provision command with Teams Toolkit, see [how to provision using Teams Toolkit in Microsoft Visual Studio Code](../provision.md#provision-using-teams-toolkit-in-microsoft-visual-studio-code).

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

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

+ Title: Customize Teams App Manifest in Teams Toolkit using Visual Studio

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

+ms.localizationpriority: medium

+# Customize Teams app manifest in Teams Toolkit

+Teams Toolkit in Visual Studio loads manifest from `manifest.template.json` with configurations from `state.{env}.json` and `config.{env}.json` while provisioning and preparing app dependencies. You can also create Teams app in Developer Portal with manifest.

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

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

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

+## Customize app manifest in Teams Toolkit

+The following list provides two types of placeholders in `manifest.template.json`:

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

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

+You can add a customized parameter by:

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

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

+ ```JSON

+ {

+ "manifest": {

+ "KEY": "VALUE"

+ }

+ }

+ ```

+## Preview app manifest in Teams Toolkit

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

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

+ :::image type="content" source="images/vs-hover-placeholder1-v4.png" alt-text="Screenshot is an example showing when you hover over placeholder, can view the values for dev and local environment." lightbox="images/vs-hover-placeholder1-v4.png":::

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

+ :::image type="content" source="images/vs-hover-key-placeholder-v4.png" alt-text="Screenshot is an example showing when you hover over key beside placeholder can view the same values for dev and local environment." lightbox="images/vs-hover-key-placeholder-v4.png":::

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

+## Preview manifest file

+You can either sideload for local, or deploy for Azure to preview the manifest file. You can preview the manifest file by performing the following steps:

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

+1. Select to trigger **Prepare Teams App Dependencies** or **Provision in the Cloud** that generates configuration for either for local or remote Teams app.

+ :::image type="content" source="images/vs-preview-manifest1-v4.png" alt-text="Screenshot is an example of showing preview manifest file." lightbox="images/vs-preview-manifest1-v4.png":::

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

+1. From the list of menu select, **Project** > **Teams Toolkit**.

+1. Select **Zip App Package**, then select either **For Local** or **For Azure**.

+ :::image type="content" source="images/vs-zip1-v4.png" alt-text="Screenshot is an example of showing the navigation to zip app package for local and Azure." lightbox="images/vs-zip1-v4.png":::

+1. You can also upload zip app package from **Solution Explorer** section, if you right-click on **MyTeamsApp1**. In this scenario the project name is MyTeamsApp1.

+1. Select **Teams Toolkit** > **Zip App Package** > **For Local** or **For Azure**.

+ :::image type="content" source="images/vs-solution-explorer1-v4.png" alt-text="Screenshot is an example of showing the list of Teams toolkit menus from solution explorer." lightbox="images/vs-solution-explorer1-v4.png":::

+Teams Toolkit generates the zip app package, the following steps help to preview the manifest file:

+1. Right-click on **manifest.template.json** file under **appPackage** folder.

+1. Select **Preview Manifest File** > **For Local** or **For Azure**.

+ :::image type="content" source="images/vs-preview1-v4.png" alt-text="Screenshot is an example of showing the preview manifest menu for local and Azure." lightbox="images/vs-preview1-v4.png":::

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

+## Sync local changes to Developer Portal

+After you've previewed the manifest file in Visual Studio, you can sync the local changes to Developer Portal.

+Select **Project** > **Teams Toolkit** > **Update Manifest in Teams Developer Portal**.

+You can also sync the local changes to Developer Portal from the context menu of **Solution Explorer** section. After the local changes are synced, you can preview the manifest file in Developer Portal.

+The changes are updated to Developer Portal.

+> [!TIP]

+>

+> * Select **Overwrite and update** or **Cancel** from the **Warning** dialog box to make any manual updates that can be overwritten in Developer Portal.

+When you create a Teams command bot using Visual Studio, two app IDs are registered in Microsoft Azure Active Directory (Azure AD). You can identify the app IDs in the Developer Portal as **Application (client) ID** under **Basic information** and existing **bot ID** under **App features**.

+## See also

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

+* [App manifest schema for Teams](~/resources/schem)

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

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

+* [Public developer preview for Microsoft Teams](~/resources/dev-preview/developer-preview-intro.md)

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

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

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

+> This article is applicable only to Teams Toolkit version 4.

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

+* [Provision cloud resources](../provision.md)

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

+* [Azure API Management](../deploy.md): An API gateway can be used to administer APIs created for Teams apps and publish them so other apps can consume them, such as Power app.

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

+* [Provision cloud resources](../provision.md)

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

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

+ Title: Add single sign-on to your Teams app

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

+ms.localizationpriority: medium

+# Add single sign-on to your Teams app

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

+## Add SSO to Teams app in Visual Studio

+For applications that interact with the user in a chat, Team, or channel, SSO manifests as an Adaptive Card, which the user can interact with to invoke the Azure AD consent flow.

+**Advantages**

+The following are the advantages of SSO in Teams:

+* SSO with Azure AD refreshes the authentication token in the background, which minimizes the number of times users need to enter their sign in credentials.

+* SSO signs in the user in different devices automatically, while using the app.

+Teams tabs and bots have similar flow for SSO support, for more information, see:

+1. [SSO authentication in Tabs](~/tabs/how-to/authentication/tab-sso-overview.md)

+2. [SSO authentication in Bots](~/bots/how-to/authentication/auth-aad-sso-bots.md)

+## Enable SSO support

+Teams Toolkit helps you add SSO to the following Teams capabilities in Visual Studio:

+* Tab

+* Notification bot: Restify server

+* Command bot

+### Add SSO using Visual Studio

+You can perform the following steps to add SSO using Teams Toolkit in Visual Studio:

+1. Open **Visual Studio**.

+1. Select **Create a new project** under **Get started**.

+ :::image type="content" source="images/vs-2022-preview-create-proj_1-v4.png" alt-text="open visual studio code to create a new project" lightbox="images/vs-2022-preview-create-proj-v4.png":::

+1. Enter **Teams** in the search box and from the list, select **Microsoft Teams app**.

+1. Select **Next**.

+ :::image type="content" source="images/vs-2022-preview-select-teams_1-v4.png" alt-text="Select a Microsoft Teams project by searching for teams." lightbox="images/vs-2022-preview-select-teams-v4.png":::

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

+1. Enter your **Project name**.

+ > [!NOTE]

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

+1. Select **Create**.

+ > [!NOTE]

+ > You can change the default location of your project by selecting &#x25CF;&#x25CF;&#x25CF;.

+ :::image type="content" source="images/vs-2022-preview-create-teamsapp_1-v4.png" alt-text="enter project and solution name" lightbox="images/vs-2022-preview-create-teamsapp-v4.png":::

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

+1. Select the required application type under **Create a new Teams application**, clear the **Configure with single sign-on** check box.

+1. Select **Create**.

+ :::image type="content" source="images/vs-2022-preview-create-teamsapp-sso-uncheck_1-v4.png" alt-text="select the teams app to be created and uncheck sso check box" lightbox="images/vs-2022-preview-create-teamsapp-sso-uncheck-v4.png":::

+1. After the project is created, select **Project** > **Teams Toolkit** > **Add Authentication Code**.

+ :::image type="content" source="images/vs-2022-preview-add-auth-code_1-v4.png" alt-text="Add authentication code" lightbox="images/vs-2022-preview-add-auth-code-v4.png":::

+## Customize your project using Teams Toolkit

+The following table lists the changes by Teams Toolkit:

+ |**Type**|**File**|**Purpose**|

+ |--|--|--|

+ |Create|`aad.template.json` under `template\appPackage`|Azure AD application manifest represents your Azure AD app. `template\appPackage` helps you to register an Azure AD app during local debug or provision.|

+ |Modify|`manifest.template.json` under `template\appPackage`|`webApplicationInfo` object is added into your Teams app manifest template. Teams requires this field to enable SSO. When local debugging or provisioning is triggered, you can see the change.|

+ |Modify|`appsettings.json` and `appsettings.Development.json`|Configs are added and used by TeamsFx SDK to your app settings. You can update and add the `TeamsFx` object if you have other `appsettings` files.|

+ |Create|`Auth\tab`|Reference code, auth redirect pages and a `README.md` file are generated in the folder `Auth\tab` for a tab project.|

+ |Create|`Auth\bot`|Reference code, auth redirect pages and a `README.md` file are generated in the folder `Auth\bot` for a bot project.|

+> [!NOTE]

+> Teams Toolkit makes no changes in the cloud by adding SSO, until you trigger a local debug. You can update your code to ensure SSO is working in the project.

+## Update your app to use SSO

+The following steps help you to enable SSO in your app:

+> [!NOTE]

+> The changes are based on the scaffold templates.

+<br>

+<br><details>

+<summary><b>Tab project

+</b></summary>

+1. You can move `GetUserProfile.razor` file from the `Auth\tab` folder to the`Components\` folder. `GetUserProfile` file implements a function that uses TeamsFx SDK to call Microsoft Graph API to get the user info.

+1. After getting the user info, you can replace `<AddSSO />` with `<GetUserProfile />` in the `Components/Welcome.razor` file.

+</details>

+<details>

+<summary><b>Command bot project

+</b></summary>

+1. Ensure to upgrade your SDK version to:

+ * TeamsFx, version 1.1.0 or later.

+ * `Microsoft.Bot.Builder`, version 4.17.1 or later.

+2. Create a `Pages` folder, and move files to the `Auth\bot\Pages`, which contains HTML pages that are hosted by bot app. When SSO authentication process is initiated with Azure AD, they redirect user to the HTML pages.

+3. After the user is redirected to the HTML pages, you can create `SSO` folder and move files in `Auth\bot\SSO`. This folder contains three files as a reference for SSO implementation:

+ * `SsoDialog.cs`: This file creates a `ComponentDialog` that is used for SSO.

+ * `SsoOperations.cs`: This file implements a class in the function to get user info with SSO token. You can follow the method defined in `SsoOperations.cs` and create your own method that requires SSO token.

+ * `TeamsSsoBot.cs`: This file creates a `TeamsActivityHandler` with `SsoDialog` that adds and triggers a command `showUserInfo`.

+ > [!NOTE]

+ > Ensure to replace `{Your_NameSpace}` with your project namespace in the three files (`SsoDialog.cs`, `SsoOperations.cs`, and `TeamsSsoBot.cs`).

+ :::image type="content" source="images/vs-2022-preview-replace-namespace_1-v4.png" alt-text="Replace name space with the your name space":::

+4. You can now update `Program.cs`.

+ 1. You can find the following code in the file `Program.cs`, and add the code blocks in step b:

+ ```csharp

+ builder.Services.AddSingleton<BotFrameworkAuthentication, ConfigurationBotFrameworkAuthentication>();

+ ```

+ 1. Add the following code blocks:

+ ```csharp

+ builder.Services.AddRazorPages();

+ // Create the Bot Framework Adapter with error handling enabled.

+ builder.Services.AddSingleton<IBotFrameworkHttpAdapter, AdapterWithErrorHandler>();

+ builder.Services.AddSingleton<IStorage, MemoryStorage>();

+ // Create the Conversation state. (Used by the Dialog system itself.)

+ builder.Services.AddSingleton<ConversationState>();

+ // The Dialog that will be run by the bot.

+ builder.Services.AddSingleton<SsoDialog>();

+ // Create the bot as a transient. In this case the ASP Controller is expecting an IBot.

+ builder.Services.AddTransient<IBot, TeamsSsoBot<SsoDialog>>();

+ builder.Services.AddOptions<AuthenticationOptions>().Bind(builder.Configuration.GetSection("TeamsFx").GetSection(AuthenticationOptions.Authentication)).ValidateDataAnnotations();

+ builder.Services.AddOptions<BotAuthenticationOptions>().Configure<IOptions<AuthenticationOptions>>((botAuthOption, authOptions) => {

+ AuthenticationOptions authOptionsValue = authOptions.Value;

+ botAuthOption.ClientId = authOptionsValue.ClientId;

+ botAuthOption.ClientSecret = authOptionsValue.ClientSecret;

+ botAuthOption.OAuthAuthority = authOptionsValue.OAuthAuthority;

+ botAuthOption.ApplicationIdUri = authOptionsValue.ApplicationIdUri;

+ botAuthOption.InitiateLoginEndpoint = authOptionsValue.Bot.InitiateLoginEndpoint;

+ }).ValidateDataAnnotations();

+ ```

+ 1. After you've added the code blocks, you can find and delete the following code in the file:

+ ```csharp

+ // Create the bot as a transient. In this case the ASP Controller is expecting an IBot.

+ builder.Services.AddTransient<IBot, TeamsBot>();

+ ```

+ 1. Find the following code and replace it with the codes given in step e:

+ ```csharp

+ app.UseEndpoints(endpoints =>

+ {

+ endpoints.MapControllers();

+ });

+ ```

+ 1. Replace the codes in step d with the following codes:

+ ```csharp

+ app.UseEndpoints(endpoints =>

+ {

+ endpoints.MapControllers();

+ endpoints.MapRazorPages();

+ });

+ ```

+5. You can open `Templates\appPackage\manifest.template.json`, and add the following lines under `command` in `commandLists` of your bot to register your command in the Teams app manifest:

+ ```JSON

+ {

+ "title": "show",

+ "description": "Show user profile using Single Sign On feature"

+ }

+ ```

+</details>

+<details>

+<summary><b>Add a new command to the bot

+</b></summary>

+The following steps help to add a new command, after you've added SSO in your project:

+> [!NOTE]

+> The instructions apply only to command bot.

+1. You can create a new method in class `SsoOperations` in `SSO/SsoOperations` and add your own business logic to call Graph API:

+ ```csharp

+ public static async Task GetUserImageInfo(ITurnContext stepContext, string token, BotAuthenticationOptions botAuthOptions)

+ {

+ await stepContext.SendActivityAsync("Retrieving user information from Microsoft Graph ...");

+ var authProvider = new DelegateAuthenticationProvider((request) =>

+ {

+ request.Headers.Authorization =

+ new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", token);

+ return Task.CompletedTask;

+ });

+ var graphClient = new GraphServiceClient(authProvider);

+ // You can add following code to get your photo size:

+ // var photo = await graphClient.Me.Photo.Request().GetAsync();

+ // await stepContext.SendActivityAsync($"Size of your photo is: {photo.Width} * {photo.Height}");

+ }

+ ```

+1. Find the following line to register a new command:

+ ```csharp

+ ((SsoDialog)_dialog).addCommand("showUserInfo", "show", SsoOperations.ShowUserInfo);

+ ```

+1. You can register the new command `"photo"` to configure the method `'GetUserImageInfo'` by adding the following code:

+ ```csharp

+ ((SsoDialog)_dialog).addCommand("getUserImageInfo", "photo", SsoOperations.GetUserImageInfo);

+ ```

+1. Open the file `templates\appPackage\manifest.template.json`, and add the following lines under `command` in `commandLists` of your bot to register your command in the Teams app manifest:

+ ```JSON

+ {

+ "title": "photo",

+ "description": "Show user photo size using Single Sign On feature"

+ }

+ ```

+</details>

+<br>

+ > [!NOTE]

+ > Teams Toolkit uses the Azure AD manifest file to register an Azure AD app for SSO. You need to press **F5** to debug your app and test your SSO configuration.

+## Customize Azure AD app registration

+The [Azure AD app manifest](/azure/active-directory/develop/reference-app-manifest) allows you to customize various aspects of app registration. You can update the manifest file as needed. If you need to include more API permissions to access your required APIs, see [API permissions to access your desired APIs](https://github.com/OfficeDev/TeamsFx/wiki/#customize-aad-manifest-template).

+For more information on viewing your Azure AD app in Azure portal, see [how to view Azure AD application in Azure portal](https://github.com/OfficeDev/TeamsFx/wiki/Manage-AAD-application-in-Teams-Toolkit#How-to-view-the-AAD-app-on-the-Azure-portal).

+### Simplified SSO with TeamsFx

+TeamsFx helps to reduce your tasks by using SSO and accessing cloud resources down to single-line statements with zero configuration. With TeamsFx SDK, you can write user authentication code with the user identity `TeamsUserCredential`, such as in a browser environment.

+For more information on TeamsFx SDK, see:

+* [TeamsFx SDK](../TeamsFx-SDK.md) or [API reference](/javascript/api/@microsoft/teamsfx/?view=msteams-client-js-latest&preserve-view=true)

+* [Microsoft Teams Framework (TeamsFx) Sample Gallery](https://github.com/OfficeDev/TeamsFx-Samples/tree/v2)

+## How to use an existing Azure AD app

+For more information about how to use an existing Azure AD app in your TeamsFx project, see the [steps](https://github.com/OfficeDev/TeamsFx/wiki/Using-existing-Azure-AD-app-in-TeamsFx-project).

+## See also

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

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

+* [Enable SSO for tab app](~/tabs/how-to/authentication/tab-sso-overview.md)

+* [Enable SSO for your bot and message extension](~/bots/how-to/authentication/bot-sso-overview.md)

+* [Prepare Accounts to build your Teams app](tools-prerequisites-v4.md#accounts-to-build-your-teams-app)

+ Title: Prepare to build apps with Teams Toolkit in Visual Studio

+description: Learn about build environments such as C# and blazor of Teams Toolkit in Visual Studio. Toolkit integrates Azure Functions capabilities for building apps.

+# Prepare to build apps using Teams Toolkit in Visual Studio

+Teams Toolkit in Visual Studio offers a set of environments to build your Teams app in C# using Blazor framework.

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

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

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

+ Title: Create a new Teams app using Teams Toolkit

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

+ms.localizationpriority: high

+# Create a new Teams project using Teams Toolkit in Visual Studio

+In this article, learn how to create a new Teams project using Microsoft Visual Studio.

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

+* Tab app

+* Command bot

+* Notification bot

+* Message Extension app

+## Prerequisites

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

+| | | |

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

+| &nbsp; | Visual Studio latest version | You can install the enterprise edition of Visual Studio, and then select the **ASP.NET and web development** workload and **Microsoft Teams Development Tools** for installing.|

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

+| &nbsp; | [Microsoft Teams](https://www.microsoft.com/microsoft-teams/download-app) | Microsoft Teams to sideload your Teams app into local Teams environment for testing app behavior. |

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

+## Create a new Teams app

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

+1. Open Visual Studio.

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

+ * Select **Create a new project** under **Get started** to select a project template.

+ * Select **Continue without Code** to open Visual Studio without selecting a Teams Toolkit template.

+ :::image type="content" source="images/vs-create-new-project1_1_2-v4.png" alt-text="Create new project with code from get started":::

+ * If your open Visual Studio code without selecting a Teams Toolkit template, select **File > New > Project** in Visual Studio to create a Teams app.

+ :::image type="content" source="images/vs-create-new-project2_1_2-v4.png" alt-text="Create new project from file menu":::

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

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

+ :::image type="content" source="images/visual-studio-v4.png" alt-text="Search and choose microsoft teams app":::

+1. Select **Next**.

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

+ :::image type="content" source="images/vs-ms-teams-app-project-name_1_2-v4.png" alt-text="Name your application":::

+ 1. Enter a suitable name for your project.

+ > [!NOTE]

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

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

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

+ 1. If required, select the checkbox to save the project and solution in the same folder. For this tutorial, you don't need this option.

+ 1. Select **Create**.

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

+1. Ensure **Tab** is selected, then select **Create**.

+ > [!NOTE]

+ > If you want to add single sign-on capability to your Teams app, select the Configure with single sign-on checkbox. For more information on single sign-in in Teams app created using Teams Toolkit, see [Add single sign-on to your Teams apps](/microsoftteams/platform/toolkit/add-single-sign-on?pivots=visual-studio).

+ :::image type="content" source="images/vs-ms-teams-app-type_3_1-v4.png" alt-text="Select the teams app type":::

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

+ The **GettingStarted .txt** window appears.

+ :::image type="content" source="images/vs-getting-started-page_1-v4.png" alt-text="Select the Getting Started teams toolkit":::

+You have created the app project scaffolding for your Teams app using Teams Toolkit template.

+### Directory Structure

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

+* **Directory structure for basic Teams apps**

+ :::image type="content" source="images/vs-create-new-project-solution-explorer_1_3-v4.png" alt-text="Select the tab Solution Explorer teams toolkit":::

+* **Directory structure for scenario-based Teams apps**

+ :::image type="content" source="images/vs-create-new-project-solution-explorer_2-v4.png" alt-text="Select the Solution Explorer teams toolkit":::

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

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

+|Teams app templates |Description |

+|||

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

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

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

+|**Message Extension** |Message extension app implements simple features like creating an Adaptive Card, searching Nugget packages, unfurling links for the `dev.botframework.com` domain. |

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

+## See also

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

+* [Build a Teams app with Blazor](~/sbs-gs-blazorupdate.yml)

+* [Build a Teams app with C# or .NET](~/sbs-gs-csharp.yml)

+* [Prerequisites for all types of environment and create your Teams app](tools-prerequisites-v4.md)

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

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

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

+ Title: Debug background processes using Visual Studio

+# Debug background processes using Visual Studio

+For more information, see [Node.js version compatibility table for project type](~/toolkit/build-environments.md#nodejs-version-compatibility-table-for-project-type).

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

+* [Debug your Teams app using Teams Toolkit](../debug-local.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)

+ Title: Debug your Teams app locally using Visual Studio

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

+ms.localizationpriority: high

+# Debug your Teams app locally using Visual Studio

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

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

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

+Use command prompt to run this command:

+```

+ngrok http 5130

+```

+### Set up your Teams Toolkit

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

+1. Right-click on your project.

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

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

+ > [!NOTE]

+ > In this scenario the project name is MyTeamsApp1.

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

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

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

+ > [!Note]

+ > Learn more about sideloading permission by visiting [Prepare your Microsoft 365 tenant](~/concepts/build-and-test/prepare-your-o365-tenant.md).

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

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

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

+ > [!Note]

+ > Learn more by visiting [Teams Toolkit Overview](teams-toolkit-fundamentals-vs.md).

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

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

+ > [!TIP]

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

+ > [!NOTE]

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

+ > [!TIP]

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

+## Next step

+> [!div class="nextstepaction"]

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

+## See also

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

+* [Introduction to Azure Functions](/azure/azure-functions/functions-overview)

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

+* [Add capabilities to your Teams apps](add-capability-v4.md)

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

+* [Manage multiple environments in Teams Toolkit](TeamsFx-multi-env-v4.md)

+ Title: Debug your Teams app using Visual Studio

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

+ms.localizationpriority: high

+# Debug your Teams app using Visual Studio

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

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

+* Prepare Teams app dependencies

+* Start debugging

+* Toggle breakpoints

+* Hot reload

+* Stop debugging

+## Prerequisites

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

+| | | |

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

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

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

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

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

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

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

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

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

+## Key features of Teams Toolkit

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

+### Prepare Teams app dependencies

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

+### Start debugging

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

+### Toggle breakpoints

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

+The following image shows the toggle breakpoints:

+### Hot reload

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

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

+

+ > [!Tip]

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

+### Stop debugging

+Select **Stop Debugging (Shift+F5)** when the local debug is complete.

+## Customize debug settings

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

+### Use your bot endpoint

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

+```JSON

+"bot": {

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

+}

+```

+### Add environment variables

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

+### Launch Teams app as a web app

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

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

+1. Remove the `launchUrl` from the file.

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

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

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

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

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

+1. Select **OK**.

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

+## Next

+> [!div class="nextstepaction"]

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

+## See also

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

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

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

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

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

+ Title: Deploy to the cloud using Visual Studio

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

+ms.localizationpriority: medium

+# Deploy Teams app to the cloud VS

+Teams Toolkit helps to deploy or upload the front-end and back-end code in your app to your provisioned cloud resources in Azure.

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

+You can deploy the following to the cloud:

+* The tab app, such as front-end apps are deployed to Azure Storage, configured for static web hosting.

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

+* The bot app or message extension is deployed to Azure App Services.

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

+## Deploy Teams app using Teams Toolkit

+1. Open **Visual Studio**.

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

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

+ :::image type="content" source="images/vs-deploy-cloud_1-v4.png" alt-text="deploy to cloud":::

+ > [!NOTE]

+ > In this scenario the project name is MyTeamsApp4.

+1. In the pop-up window that appears, select **Deploy**.

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

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

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

+### Preview your app

+To preview your app, you need to create a **Zip App Package** and sideload into the Teams client.

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

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

+ :::image type="content" source="images/vs-deploy-ZipApp-package1-v4.png" alt-text="deploy to cloud popup.":::

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

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

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

+ Now your app is sideloaded into Teams.

+ :::image type="content" source="images/sideload-teams_1-v4.PNG" alt-text="Sideload Teams app in teams client":::

+The other way to preview your app:

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

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

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

+ > [!NOTE]

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

+ Now your app is sideloaded into Teams.

+ :::image type="content" source="images/sideload-teams_1-v4.PNG" alt-text="Sideload Teams app in teams client":::

+## See also

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

+* [Create and deploy an Azure cloud service](/azure/cloud-services/cloud-services-how-to-create-deploy-portal)

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

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

+* [Create new Teams app in Visual Studio](~/toolkit/toolkit-v4/create-new-project-vs.md)

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

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

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

+ Title: Explore Teams Toolkit in Visual Studio

+description: Learn about Teams Toolkit UI elements and task pane in Visual Studio.

+ms.localizationpriority: medium

+# Explore Teams Toolkit in Visual Studio

+Teams Toolkit appears within Visual Studio as a workload. When you've created a Teams Toolkit app, you can see Teams Toolkit options in the following ways:

+# [Project](#tab/prj)

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

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

+1. You can access different Teams Toolkit options:

+ :::image type="content" source="images/teams-toolkit-project-menu-v4.png" alt-text="Teams toolkit project menu" lightbox="images/teams-toolkit-project-menu-v4.png":::

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

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

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

+1. Right-click on your app project name.

+1. Select **Teams Toolkit** to see the menu items.

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

+ > [!NOTE]

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

+After you've created your Teams app project, you can use the following options to develop and build your app:

+|Function |Description |

+|||

+|Prepare Teams App Dependencies |Before you debug locally, ensure that you prepare your app for dependencies. This option helps you to set up the local debug dependencies and register Teams app in the Teams platform. You must have a Microsoft 365 account. For more information, see [how to debug your Teams app locally using Visual Studio](debug-local-vs.md). |

+|Open Manifest File | This option helps you to open Teams app manifest file. Hover over the parameters to preview the values. For more information, see [how to edit Teams app manifest using Visual Studio](TeamsFx-preview-and-customize-app-manifest-vs.md). |

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

+|Add Authentication Code | This option helps you obtain signed-in Teams user token to access Microsoft Graph and other APIs. Teams Toolkit facilitates the interaction by abstracting from the Microsoft Azure Active Directory (Azure AD) which flows and integrates with simple APIs. For more information, see [how to add single sign-on to Teams app](add-single-sign-on-vs.md). |

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

+|Deploy to the Cloud | This option helps you to copy your code to the cloud resources that you provisioned in Azure AD. For more information, see [how to deploy Teams app to the cloud using Visual Studio](deploy-vs.md#deploy-teams-app-to-the-cloud-using-visual-studio). |

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

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

+## See also

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

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

+* [App manifest schema](~/resources/schem)

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

+FAQ for [Provision cloud resources using Teams Toolkit](../provision.md)

+ Title: Install Teams Toolkit in Visual Studio

+description: Learn about installation of Teams Toolkit of different versions in Visual Studio, and marketplace.

+ms.localizationpriority: medium

+# Install Teams Toolkit in Visual Studio

+The Microsoft Azure Active Directory (Azure AD) manifest contain definitions of all the attributes of an Azure AD application object in the Microsoft identity platform.

+## Prerequisites

+Before installing Teams Toolkit for Visual Studio, you need to [download and install Visual Studio 2022](https://aka.ms/VSDownload) using the Visual Studio Installer.

+ > [!IMPORTANT]

+ > It's recommend you use Visual Studio 2022 version 17.4.1 or later for Teams Toolkit. It is the latest release to fix several known issues in previous versions of Visual Studio.

+1. Download the [Visual Studio installer](https://aka.ms/VSDownload), or open it if already installed.

+1. Select **Install** or select **Modify** if you've already installed Visual Studio.

+ Visual Studio installer shows all workloads, whether installed or available for installation.

+ :::image type="content" source="images/visual-studio-install_1_2-v4.png" alt-text="Screenshot shows how to install Visual studio.":::

+ Select the following options to install Teams Toolkit:

+ 1. Select the **Workloads** tab, then select the **ASP.NET and web development** workload.

+ 1. On the right, select the **Microsoft Teams development tools** in the **Optional** section of the **Installation details** panel.

+ 1. Select **Install**.

+1. After the installation completes, select **Launch** to open Visual Studio.

+ :::image type="content" source="images/visual-studio-launch_1_2-v4.png" alt-text="Screenshot shows how to launch visual studio.":::

+Teams Toolkit menu options are available in Visual Studio only when an app project created using Teams Toolkit is open.

+## Next steps

+> [!div class="nextstepaction"]

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

+## See also

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

+* [Prepare to build apps](build-environments-v4.md)

+* [Provision cloud resources](provision-vs.md)

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

+ Title: Use Teams Toolkit to provision cloud resources in Visual Studio

+description: Learn how to do provision cloud resources using Teams Toolkit v4 in Visual Studio Code and Visual Studio, resource creation and customize resource provision.

+ms.localizationpriority: medium

+# Provision cloud resources in Visual Studio

+TeamsFx integrates with Azure and the Microsoft 365 cloud, which allows to place your app in Azure with a single command. TeamsFx integrates with Azure Resource Manager (ARM), which enables to provision Azure resources that your application needs for code approach.

+> [!NOTE]

+> Teams toolkit doesn't provide support to deploy resources to other cloud platforms except Azure, however, the user can deploy manually.

+## Provision using Teams Toolkit in Visual Studio

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

+### Sign in to your Microsoft 365 account

+1. Open **Visual Studio**.

+1. Open the Microsoft Teams app project.

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

+ :::image type="content" source="images/teams-toolkit-vs-prepare-app-dependencies1_1-v4.png" alt-text="Prepare teams app dependencies":::

+1. Select **Sign in...** to sign in to Microsoft 365 account.

+ :::image type="content" source="images/teams-toolkit-vs-prepare1_1-v4.png" alt-text="Sign in to Microsoft 365":::

+ > [!NOTE]

+ > If you are already singed in, your username displays, or you have an option to **Add an account**.

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

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

+ :::image type="content" source="images/teams-toolkit-vs-signin-M365_1-v4.png" alt-text="Confirm by selecting continue":::

+### Sign in to your Azure account

+1. Open **Visual Studio**.

+1. Open the Teams App project.

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

+ :::image type="content" source="images/teams-toolkit-vs-provision-in-cloud2-v4.png" alt-text="Sign in to Azure account":::

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

+ :::image type="content" source="images/teams-toolkit-vs-provision-start_1-v4.png" alt-text="Sign in to your Azure account":::

+ > [!NOTE]

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

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

+### To provision cloud resources

+After you open your project in Visual Studio:

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

+ :::image type="content" source="images/teams-toolkit-vs-provision-in-cloud2-v4.png" alt-text="Provision in cloud":::

+ **Provision** window appears.

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

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

+ 1. Select your **Resource group** from the dropdown menu or you can create new **Resource group** by selecting **New...**.

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

+ 1. Select **Provision**.

+ :::image type="content" source="images/teams-toolkit-vs-provision-select-subscription1_1-v4.png" alt-text="Select resource group":::

+1. In the pop-up window that appears, Select **Provision**.

+ :::image type="content" source="images/teams-toolkit-vs-provision-warning_1-v4.png" alt-text="Provision warning":::

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

+1. In the pop-up window that appears, Select **View Provisioned Resources** to view all the resources that were provisioned.

+ :::image type="content" source="images/teams-toolkit-vs-provision-provision-success_1-v4.png" alt-text="View provisioned resources":::

+## Create resources

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

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

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

+* Azure resources under your selected Azure subscription.

+When you create a new project, you also need to create Azure resources. The ARM templates define all the Azure resources and help you to create the required Azure resources during provision.

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

+<br>

+<details>

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

+| Resource | Purpose | Description |

+| | | |

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

+| App service | Hosts your Blazor tab app. | Not applicable |

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

+</details>

+<br>

+<details>

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

+| Resource | Purpose | Description |

+| | | |

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

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

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

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

+</details>

+<br>

+<details>

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

+| Resource | Purpose | Description |

+| | | |

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

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

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

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

+</details>

+<br>

+<details>

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

+| Resource | Purpose | Description |

+| | | |

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

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

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

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

+</details>

+<br>

+<details>

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

+| Resource | Purpose | Description |

+| | | |

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

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

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

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

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

+</details>

+<br>

+<details>

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

+| Resource | Purpose | Description |

+| | | |

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

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

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

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

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

+</details>

+<br>

+<details>

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

+| Resource | Purpose | Description |

+| | | |

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

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

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

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

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

+</details>

+<br>

+### Manage your resources

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

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

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

+## Customize resource provision

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

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

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

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

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

+ | File | Function | Allow customization |

+ | | | |

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

+ | provision.bicep | Creates and configures Azure resources. | Yes |

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

+ | provision\xxx.bicep | Creates and configures each Azure resource consumed by `provision.bicep`. | Yes |

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

+> [!NOTE]

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

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

+### Azure AD app related parameters

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

+| | | | |

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

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

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

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

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

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

+### Reference environment variables in parameter files

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

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

+```json

+...

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

+...

+```

+### Customize ARM template files

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

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

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

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

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

+### Customize Teams app

+You can customize your bot or the Teams app by adding configuration snippets to use an Azure AD app created for your Teams app.

+Perform in the following ways to customize the Teams app:

+* [Use an existing Azure AD app for your Teams app](#use-an-existing-azure-ad-app-for-your-teams-app)

+* [Use an existing Azure AD app for your bot](#use-an-existing-azure-ad-app-for-your-bot)

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

+You can add the following configuration snippet to `.fx\configs\config.{env}.json` file to use an Azure AD app created for your Teams app. If you don't have an Azure AD app yet or you already have one but don't know where to find the correct value, see [how to use existing Azure AD app in TeamsFx project](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/fx-core/using-existing-aad.md):

+```json

+"$schema": "https://aka.ms/teamsfx-env-config-schema",

+"description": "...",

+"manifest": {

+ ...

+},

+// Add code below. Note you need to replace the placeholders with real values.

+"auth": {

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

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

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

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

+}

+```

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

+> [!NOTE]

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

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

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

+```json

+"bot": {

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

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

+}

+```

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

+#### Skip adding user for SQL database

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

+```json

+"skipAddingSqlUser": true

+```

+## See also

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

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

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

+* [Collaborate with other developers on Teams project](TeamsFx-collaboration-v4.md)

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

+> Teams Toolkit v4 extension will soon be deprecated.

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

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

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

+ Title: Teams Toolkit Visual Studio Overview

+description: Learn about Teams Toolkit, it's installation, navigation, and user journey. Teams Toolkit is available for Visual Studio.

+ms.localizationpriority: medium

+# Teams Toolkit Visual Studio Overview

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

+* Start with a project templates for common line-of-business app scenarios or from a sample.

+* Save setup time with automated app registration and configuration.

+* Run and debug to Teams directly from familiar tools.

+* Smart defaults for hosting in Azure using infrastructure-as-code and Bicep.

+* Bring your app to your organization or the Teams App Store using built-in publishing tools.

+## Available for Visual Studio

+Teams Toolkit is available for free for Visual Studio 2022 Community, Professional, and Enterprise. For more information about installation and setup, see [install Teams Toolkit](~/toolkit/toolkit-v4/install-Teams-Toolkit-vs.md).

+| Teams Toolkit | Visual Studio |

+| - | - |

+| Installation | Available in the Visual Studio Installer |

+| Build with | C#, .NET, ASP.NET, Blazor |

+## Features

+The following list provides the key features of Teams Toolkit:

+* [Project templates](#project-templates)

+* [Automatic registration and configuration](#automatic-registration-and-configuration)

+### Project templates

+You can start directly with the capability-focused templates such as tabs, bots, and message extensions or by following existing samples if you're already familiar with Teams app development. Teams Toolkit reduces the complexity of getting started with templates for common line-of-business app scenarios and smart defaults to accelerate your time to production.

+### Automatic registration and configuration

+You can save time and let the toolkit automatically register the app in Teams Developer Portal. When you first run or debug the app, configure settings, such as Azure Active Directory (Azure AD) automatically. Sign in with your Microsoft 365 account to control where the app is configured and customized the included Azure AD manifest when you need flexibility.

+#### TeamsFx .NET SDK Reference docs

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

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

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

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

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

+## See also

+* [Build tabs for Teams](~/tabs/what-are-tabs.md)

+* [Build bots for Teams](~/bots/what-are-bots.md)

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

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

+* [Provision cloud resources](provision-vs.md)

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

+* [Publish Teams apps](publish-v4.md)

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

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

+* [Debug background process v4](debug-background-process-v4.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 in Teams Toolkit v4](TeamsFx-multi-env-v4.md)

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

+# Prerequisites for creating your Teams app using Visual Studio

+| &nbsp; | Tools | For using | For environment type |

+ | | | |

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

+ | [Microsoft Visual Studio 2022](https://visualstudio.microsoft.com/downloads/) | Use the latest version, *ASP.NET and web development* workload, and *Microsoft Teams development tools* option. | C# or Blazor. |

+ | [Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension) | The Microsoft Visual Studio Code extension to create a Teams app project. Use the latest version. | JavaScript, TypeScript, and SPFx. |

+ | [Microsoft Teams](https://www.microsoft.com/microsoft-teams/download-app) | Sideloading feature to test your app behavior within your local Teams environment.| JavaScript, TypeScript, SPFx, and C# or Blazor. |

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

+ | [Node Package Manager (NPM)](https://www.npmjs.com/package/@microsoft/teamsfx) | Installing and managing packages for use in both Node.js and ASP.NET core applications.| JavaScript, TypeScript, and SPFx. |

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

+ | **Optional** | &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) | Stored data or deploy a cloud-based back-end for your Teams app in Azure. | JavaScript and TypeScript. |

+ | [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) | The browser based DevTools extension for the open-source React JavaScript library. | JavaScript, TypeScript, and SPFx. |

+ | [Microsoft Graph Explorer](https://developer.microsoft.com/graph/graph-explorer) | The browser-based tool that lets you run a query from Microsoft Graph data. | JavaScript, TypeScript, SPFx, and C# or Blazor. |

+ | [Developer Portal for Teams](https://dev.teams.microsoft.com/) | The web-based portal to configure, manage, and distribute your Teams app including to your organization or the Teams store.| JavaScript, TypeScript, SPFx, and C# or Blazor. |

+> [!NOTE]

+> If you're creating a Teams app using Teams Toolkit, ensure that you have a [Microsoft 365 account](#microsoft-365-developer-program). However, if you're creating a Teams app using tools other than Teams Toolkit, ensure that you have an [Azure account](#azure-account).

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

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

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

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

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

+ | &nbsp; | [Node.js](https://nodejs.org/en/download/) | Back-end JavaScript runtime environment. For more information, see [Node.js version compatibility table for project type](~/toolkit/build-environments.md#nodejs-version-compatibility-table-for-project-type).| JavaScript and SPFx|

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

+ | &nbsp; | [Node.js](https://nodejs.org/en/download/) | Back-end JavaScript runtime environment. For more information, see [Node.js version compatibility table for project type](~/toolkit/build-environments.md#nodejs-version-compatibility-table-for-project-type).| JavaScript and SPFx|

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

+> [!NOTE]

+> If you're creating a Teams app using Teams Toolkit, ensure that you have a [Microsoft 365 account](#microsoft-365-developer-program). However, if you're creating a Teams app using tools other than Teams Toolkit, ensure that you have an [Azure account](#azure-account).

+| Building Tools | ΓÇó [Teams Toolkit Overview for Visual Studio Code](../toolkit/teams-toolkit-fundamentals.md) <br> ΓÇó[Teams Toolkit Overview for Visual Studio](../toolkit/toolkit-v4/teams-toolkit-fundamentals-vs.md) <br> ΓÇó [TeamsFx Library](../toolkit/TeamsFx-CLI.md) <br> ΓÇó [TeamsFx SDK](../toolkit/TeamsFx-SDK.md) | No tools are required. |

+| 05/24/2022 | Teams Toolkit version 4.0.0 for Visual Studio Code is now GA | Tools and SDKs > Teams Toolkit for Visual Studio Code > <br> ΓÇó [Teams Toolkit Overview](toolkit/teams-toolkit-fundamentals.md) <br> ΓÇó [Build command bot with JavaScript](toolkit/toolkit-v4/add-capability-v4.md) <br> ΓÇó [Build notification bot with JavaScript](toolkit/toolkit-v4/add-capability-v4.md) <br> ΓÇó [Preview and customize Teams app manifest](toolkit/toolkit-v4/add-capability-v4.md) <br> ΓÇó [Connect to existing APIs](toolkit/add-API-connection.md) <br> ΓÇó [Add capabilities to your Teams apps](toolkit/toolkit-v4/add-capability-v4.md) <br> ΓÇó [Add single sign-on experience](toolkit/add-single-sign-on.md) <br> ΓÇó [Add cloud resources to Teams app](toolkit/add-resource.md) |

+| 17/05/2023 | [Teams Toolkit v4](toolkit/teams-toolkit-fundamentals.md) extension within Visual Studio Code **will be** deprecated. We recommend that you use Teams Toolkit v5 within Visual Studio Code for building your Teams app. | Tools and SDKs > Teams Toolkit > [Teams Toolkit Overview](toolkit/teams-toolkit-fundamentals.md)|