-* When bot has been added to a conversation.

-* [SDK refernce](/dotnet/api/microsoft.bot.builder.teams.teamsactivityhandler.onteamschannelrestoredasync?view=botbuilder-dotnet-stable&preserve-view=true)

-<details>

-<summary>Will Visual Studio be integrated into Adaptive Card Previewer?</summary>

-No, Adaptive Card Previewer is available in Visual Studio Code only.

-<br>

-&nbsp;

-</details>

-| **Documentation issues** | Select **This page** in the **Submit and view feedback** section available at the footer of the documentation, to open an [issue](https://github.com/MicrosoftDocs/msteams-docs/issues) on the [Microsoft Teams documentation GitHub](https://github.com/MicrosoftDocs/msteams-docs) repository.<br/><br/>:::image type="icon" source="assets/icons/alert-icon.png" border="false"::: **This page** option will be deprecated by May 31, 2024. <br/><br/>:::image type="content" source="assets/images/community-feedback-this-page.png" alt-text="This page feedback"::: <br><br/> You can also select whether the article was helpful or not on the articleΓÇÖs page. Select :::image type="icon" source="assets/icons/feedback-icon.png" border="false"::: **Feedback** in the upper-right corner of the article. Select **Yes** or **No**, provide additional context in the text field and select **Submit**. <br/>:::image type="content" source="assets/images/community-feedback.png" alt-text="Screenshot shows the feedback option in the article.":::<br> If you want to provide additional feedback, you can reach out to the community help through [Microsoft Q&A](#developer-community-forums).|

-> Teams Toolkit support for API-based message extension is available only in Teams Toolkit pre-release version. Before you get started, ensure that you've installed a [Teams Toolkit pre-release version](../toolkit/install-Teams-Toolkit.md#install-a-pre-release-version-1).

-description: In this article, you'll learn how to use tabs and bots together, constructing deep links to tabs in messages from your bot, and teams bots tabs development

-Suppose your tab application uses a proprietary ID system to secure its content. Suppose you also have a bot that can interact with the user. Typically, youΓÇÖll want to show content in the tab that is specific to the viewing user. The challenge is that the user ID in your system is likely different from the Microsoft Teams user ID. So how do you associate these two identities?

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

-Teams Toolkit now manages Microsoft Entra application with the manifest file as the source of truth during your Teams application development lifecycle.

-# Collaborate on Teams project using Microsoft Teams Toolkit

-description: In this module, learn about TeamsFX multi environment such as, create a new environment, select target environment and more

-# Environments in Teams Toolkit

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

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

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

-zone_pivot_groups: teams-toolkit-platform

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

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

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

-App manifest (previously called Teams app manifest) describes how your app integrates into Teams. The app 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 app manifest with actual content, Teams Toolkit generates the preview app 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 app manifest file in local and remote environments.

-<br>

-<details>

-<b><summary>Preview the app manifest file in local environment</b></summary>

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

-You can preview local app manifest file by two methods:

-* Use preview option in CodeLens.

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

-The following steps help to preview local app 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 the local app 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 the app manifest file in remote environment</b></summary>

-To preview the app 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 app 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 the app manifest under `build/appPackage` folder.

-You can preview the app manifest file in remote environment by two methods:

-* Use preview option in CodeLens.

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

-To preview the app 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 the app 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 app manifest file, you can sync your local changes to Developer Portal by the following ways:

-1. Deploy app manifest.

- You can deploy the 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 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 the current app 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 app manifest file is outdated due to configuration file change or template change, select any one of the following actions:

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

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

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

-## Customize your app manifest

-Teams Toolkit consists of the following app 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 the app manifest file 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 app manifest

-During operations such as **Zip Teams metadata package**, Teams Toolkit validates app manifest against its schema. The following list provides different ways to validate app 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 the app 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 dropdown 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](../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)

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

-1. Open your Teams app project in **Visual Studio Code**.

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

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

-> [!NOTE]

-> This article is applicable only to Teams Toolkit version 5. For more information on how to add capabilities to your app using Teams Toolkit version 4, see [Add capability](toolkit-v4/add-capability-v4.md).

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

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

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

-Teams Toolkit allows you to provision the cloud resources for hosting your app. You can add the cloud resources according to your development needs. The advantage of adding more cloud resources in TeamsFx is that you can autogenerate all configuration files and connect to Teams app by using Teams Toolkit.

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

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

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

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

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

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

-zone_pivot_groups: teams-toolkit-platform

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

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

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

-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 Entra ID 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 Microsoft Entra 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**.

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

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

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

-1. 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` | Microsoft Entra application manifest represents your Microsoft Entra app. `template\appPackage` helps to register a Microsoft Entra app during local debug or provision stage. |

-| Modify | `manifest.template.json` under `template\appPackage` | A `webApplicationInfo` object is added into your app manifest (previously called 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 Microsoft Entra ID for Microsoft Entra ID'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>Command bot project

-</b></summary>

-<a name='set-up-the-azure-ad-redirects'></a>

-#### Set up the Microsoft Entra ID 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 Microsoft Entra ID, 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 a Microsoft Entra 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 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 Microsoft Entra ID, Microsoft Entra ID 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 Microsoft Entra app manifest file to register a Microsoft Entra app for SSO. For Teams Toolkit local debug functionalities, see [how to debug your app locally](~/toolkit/debug-local.md).

-<a name='customize-azure-ad-app-registration'></a>

-## Customize Microsoft Entra app registration

-The [Microsoft Entra app manifest](/azure/active-directory/develop/reference-app-manifest) allows you to customize various aspects of app registration. You can update the app 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 Microsoft Entra app in Azure portal, see [view Microsoft Entra 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 Microsoft Entra ID 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)

-Teams Toolkit supports different build environments for creating apps. It helps to integrate Azure Functions capabilities and cloud services in the Teams app that you've built.

-Teams Toolkit in Visual Studio Code offers a set of environments to build your Teams app. You can choose any of the following environments:

-* Message extension: You can interact with your web service through buttons and forms in the Microsoft Teams client.

-zone_pivot_groups: teams-toolkit-platform

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

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

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

-| `src/views/hello.html`| A HTML template that is bind to the tab endpoint. |

-| `src/static` | The static assets like CSS and JavaScript files that can be served by the web server. |

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

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

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

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

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

-zone_pivot_groups: teams-toolkit-platform

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

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

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

-1. Select **Debug (Edge)** or **Debug (Chrome)** from the **RUN AND DEBUG Γû╖** dropdown.

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

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

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

-1. 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/macOS1)

-1. Select **Debug Edge** or **Debug Chrome** from the **RUN AND DEBUG Γû╖** dropdown.

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

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

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

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

-* [Uploads the Teams app](#uploads-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 |

-### Uploads 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 uploads the custom app that is controlled by the uploading 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)

-You can view the project folders and files under **Explorer** in the Visual Studio Code.

-zone_pivot_groups: teams-toolkit-platform

-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 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 uploads 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 Entra 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 Microsoft Entra app client id for your existing bot.

-1. Update `botPassword` with the Microsoft Entra 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 app manifest](TeamsFx-preview-and-customize-app-manifest.md)

-> Teams App Test Tool is available in the latest prerelease version of the Teams Toolkit. Ensure that you install the [latest prerelease version](install-Teams-Toolkit.md#install-a-pre-release-version) of the Teams Toolkit.

-Teams App Test Tool (Test Tool) makes debugging bot-based apps effortless. You can chat with your bot and see its messages and Adaptive Cards as they appear in Teams. You donΓÇÖt need a Microsoft 365 developer account, tunneling, or Teams app and bot registration to use Test Tool.

-zone_pivot_groups: teams-toolkit-platform

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

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

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

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

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

-zone_pivot_groups: teams-toolkit-platform

-You can explore the look and feel of Teams Toolkit within the Visual Studio Code.

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

-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="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/environment1.png" alt-text="Screenshot shows the Environment section.":::

- :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/utility.png" alt-text="Screenshot shows the the Utility section.":::

- :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/help-and-feedback1.png" alt-text="Screenshot shows the Help section.":::

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

- :::column span="":::

- :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/feedback.png" alt-text="Screenshot shows the Feedback section.":::

- :::column-end:::

- :::column span="":::

- You can help us improve by giving us your feedbacks!

- :::column-end:::

-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 app manifest (previously called 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 Microsoft Entra ID 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)

-zone_pivot_groups: teams-toolkit-platform

-This section helps you to know about the prerequisites, install Teams Toolkit for Visual Studio Code, and install a different version of Teams Toolkit.

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

- :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/after-install_2.jpg" alt-text="Screenshot shows the Teams Toolkit icon in the activity bar.":::

- :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/install-ttk-marketplace_1.png" alt-text="Screenshot shows the Teams Toolkit Marketplace screen.":::

- :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/Install-ttk_1.png" alt-text="Screenshot shows the Install option.":::

- :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/ttk-in-vsc_1.png" alt-text="Screenshot shows how to select Teams Toolkit in Visual Studio Code." lightbox="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/ttk-in-vsc_2.png":::

- :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/select-install-ttk_2.png" alt-text="Screenshot shows the selection of Install option in Teams Toolkit.":::

- :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/after-install_2.jpg" alt-text="Screenshot shows the Teams Toolkit icon in the activity bar after installation.":::

- :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/InstallAnotherVersion.png" alt-text="Screenshot shows the option to select other version of Visual Studio Code.":::

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

-The Microsoft Entra manifest contain definitions of all the attributes of a Microsoft Entra 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)

-zone_pivot_groups: teams-toolkit-platform

-## Provision using Teams Toolkit in Microsoft Visual Studio Code

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

-| - | |

-| Microsoft Entra 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, Microsoft Entra 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.

-<a name='azure-ad-parameters'></a>

-### Microsoft Entra 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:

-* [Microsoft Entra application-related parameters](#azure-ad-application-related-parameters)

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

-<a name='azure-ad-application-related-parameters'></a>

-##### Microsoft Entra 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 Microsoft Entra app client Id is created during provision. | [Use an existing Microsoft Entra app for your bot](#use-an-existing-azure-ad-app-for-your-bot-1). |

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

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

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

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

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

-##### 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 the app manifest (previously called Teams app manifest) file.

-### Customize Teams apps

-You can customize your bot or the Teams app by adding configuration snippets to use a Microsoft Entra app created by you. Perform the following ways to customize the Teams app:

-* [Use an existing Microsoft Entra app for your Teams app](#use-an-existing-azure-ad-app-for-your-teams-app-1)

-* [Use an existing Microsoft Entra app for your bot](#use-an-existing-azure-ad-app-for-your-bot-1)

-<a name='use-an-existing-azure-ad-app-for-your-teams-app-1'></a>

-#### Use an existing Microsoft Entra app for your Teams app

-You can add the following configuration snippet to `.fx\configs\config.{env}.json` file to use a Microsoft Entra app created for your Teams app. If you don't have a Microsoft Entra app yet or you already have one but don't know where to find the correct value, see [how to use existing Microsoft Entra 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 Microsoft Entra app client id>",

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

- "objectId": "<your Microsoft Entra 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 Microsoft Entra app in multiple environments. If you don't have permission to update the Microsoft Entra app, you get a warning with instructions about how to manually update the Microsoft Entra app. Follow the instructions to update your Microsoft Entra app after provision.

-<a name='use-an-existing-azure-ad-app-for-your-bot-1'></a>

-#### Use an existing Microsoft Entra app for your bot

-You can add following configuration snippet to `.fx\configs\config.{env}.json` file to use a Microsoft Entra 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 Microsoft Entra 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 Microsoft Entra 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 app manifest using Visual Studio](~/toolkit/TeamsFx-preview-and-customize-app-manifest.md)

-You can configure and manage your app in Developer Portal within Teams Toolkit.

-1. Select **Open Developer Portal to Publish** for Teams under **UTILITY**.

-You can add a custom app to Teams by uploading an [app package](../concepts/build-and-test/apps-package.md) in `.zip` file directly to a team or in personal context. Adding a custom app by uploading an app package is known as custom app upload. It allows you to test app while being uploaded in Teams. You can build and test app in the following scenarios:

-When the app is ready for use in production, you can submit the app using the Teams app submission API, called from Microsoft Graph API. Teams app submission API is an integrated development environment (IDE) such as Microsoft Visual Studio Code installed with Teams toolkit. The following steps help you to publish the app to your organization:

-description: Learn about Teams Toolkit, it's installation, navigation, and user journey. Teams Toolkit is available for Visual Studio code.

-zone_pivot_groups: teams-toolkit-platform

-# Teams Toolkit Overview

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

-| Installation | Available in the VS Code Marketplace |

-## Version Mapping

-The following table list out the version support for the Teams Toolkit extension for each release cycle:

-| &nbsp; | Teams Toolkit for Visual Studio Code|Teams Toolkit for Visual Studio| Teams Toolkit CLI | TeamsFx SDK |Teams SDK|Manifest|

-|-|-|-|-|-|-|-|

-|Public Preview|v3.8.x|v17.2|v0.14.x|v0.7.x|v1.11.x, v1.12.x|v1.11|

-|GA|v4.0.0|v17.3|v1.0.0|v1.0.0|v1.12.x|v1.11|

-|Latest*|v5.x.x|v17.6|-|v2.x.x|v2.x.x|v1.16|

-|Beta**|Prerelease|v17.7 Preview|v2.x.x-beta|v2.x.x-beta|v2.x.x-beta|Dev preview|

-*Latest is aligned on the major version.<br>

-**Beta indicates developer preview.

-## See also

-[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 custom app built for your org (LOB 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 Microsoft Teams 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 |

-## Version Mapping

-The Teams Toolkit lifecycle and support policy covers Generally available (GA) and future versions.

-| &nbsp; | Teams Toolkit for Visual Studio Code|Teams Toolkit for Visual Studio| Teams Toolkit CLI | TeamsFx SDK |Teams SDK|Manifest|

-|-|-|-|-|-|-|-|

-|Public Preview|v3.8.x|v17.2|v0.14.x|v0.7.x|v1.11.x, v1.12.x|v1.11|

-|GA|v4.0.0|v17.3|v1.0.0|v1.0.0|v1.12.x|v1.11|

-|Latest*|v5.x.x|v17.6|-|v2.x.x|v2.x.x|v1.16|

-|Beta**|Prerelease|v17.7 Preview|v2.x.x-beta|v2.x.x-beta|v2.x.x-beta|Dev preview|

-*Latest is aligned on the major version.<br>

-**Beta indicates developer preview.

-## 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 custom app built for your org (LOB 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 Microsoft Entra ID automatically. Sign in with your Microsoft 365 account to control where the app is configured and customized the included Microsoft Entra 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).

-* [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 app tutorials and related code samples

-You can upload your Teams app to Microsoft Teams without having to publish to your organization or the Microsoft Teams Store in the following scenarios:

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

-To host your development and production code and their HTTPS endpoints, you need to remotely test your teams app using provisioning and deploying on Microsoft Entra ID. You need to ensure that all domains are accessible from your Teams app listed in the `validDomains` object in the `manifest.json` file.

-description: In this module, learn how to edit, customize, and preview the Microsoft Entra manifest with CodeLens in Teams Toolkit v4.

-# Edit Microsoft Entra manifest in Teams Toolkit v4

-The Microsoft Entra manifest contain definitions of all the attributes of a Microsoft Entra application object in the Microsoft identity platform.

-Teams Toolkit now manages Microsoft Entra application with the manifest file as the source of truth during your Teams application development lifecycle.

-<a name='customize-azure-ad-manifest-template'></a>

-## Customize Microsoft Entra manifest template

-You can customize Microsoft Entra manifest template to update Microsoft Entra application.

-1. Open `aad.template.json` in your project.

-

- :::image type="content" source="images/add template-v4.png" alt-text="template":::

-2. Update the template directly or [reference values from another file](https://github.com/OfficeDev/TeamsFx/wiki/Manage-AAD-application-in-Teams-Toolkit#Placeholders-in-AAD-manifest-template). Following are the customization scenarios:

-

- <details>

- <summary>Add an application permission</summary>

- If the Teams application requires more permissions to call an API with additional permissions, you need to update `requiredResourceAccess` property in the Microsoft Entra manifest template. You can see the following example for this property:

- ```JSON

- "requiredResourceAccess": [

- {

- "resourceAppId": "Microsoft Graph",

- "resourceAccess": [

- {

- "id": "User.Read", // For Microsoft Graph API, you can also use uuid for permission id

- "type": "Scope" // Scope is for delegated permission

- },

- {

- "id": "User.Export.All",

- "type": "Role" // Role is for application permission

- }

- ]

- },

- {

- "resourceAppId": "Office 365 SharePoint Online",

- "resourceAccess": [

- {

- "id": "AllSites.Read",

- "type": "Scope"

- }

- ]

- }

- ]

- ```

- The following permissions are used property IDs:

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

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

- * The `resourceAccess.type` property is used for delegated permission or application permission. `Scope` means delegated permission and `Role` means application permission.

- </details>

- <details>

- <summary>Pre-authorize a client application</summary>

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

- ```JSON

- "preAuthorizedApplications": [

- {

- "appId": "1fec8e78-bce4-4aaf-ab1b-5451cc387264",

- "permissionIds": [

- "{{state.fx-resource-aad-app-for-teams.oauth2PermissionScopeId}}"

- ]

- }

- ...

- ]

- ```

- `preAuthorizedApplications.appId` property is used for the application you want to authorize. If you don't know the application ID and know only the application name, use the following steps to search application ID:

- 1. Go to [Azure portal](https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps) and open **Application Registrations**.

- 1. Select **All applications** and search for the application name.

- 1. Select the application name and get the application ID from the overview page.

- </details>

- <details>

- <summary>Update redirect URL for authentication response</summary>

- Redirect URLs are used while returning authentication responses such as tokens after successful authentication. You can customize redirect URLs using property `replyUrlsWithType`. For example, to add `https://www.examples.com/auth-end.html` as redirect URL, you can add it as the following example:

- ``` JSON

- "replyUrlsWithType": [

- ...

- {

- "url": "https://www.examples.com/auth-end.html",

- "type": "Spa"

- }

- ]

- ```

- </details>

-<details>

-<summary>3. Deploy Microsoft Entra application changes for local environment</summary>

- 1. Select `Preview` CodeLens in `aad.template.json`.

-

- :::image type="content" source="images/add deploy1-v4.png" alt-text="deploy1":::

- 2. Select **local** environment.

-

- :::image type="content" source="images/add deploy2-v4.png" alt-text="deploy2":::

- 3. Select `Deploy Azure AD Manifest` CodeLens in `aad.local.json`.

- :::image type="content" source="images/add deploy3-v4.png" alt-text="deploy3" lightbox="images/add deploy3-v4.png":::

- 4. The changes for Microsoft Entra application used in local environment are deployed.

-</details>

-<details>

-<summary>4. Deploy Microsoft Entra application changes for remote environment</summary>

-* Open the command palette and select: **Teams: Deploy Microsoft Entra app manifest**.

-

- :::image type="content" source="images/add deploy4-v4.png" alt-text="deploy4":::

-* Additionally you can right click on the `aad.template.json` and select **Deploy Microsoft Entra app manifest** from the context menu.

-

- :::image type="content" source="images/add deploy5-v4.png" alt-text="deploy5":::

-</details>

-<a name='azure-ad-manifest-template-placeholders'></a>

-## Microsoft Entra manifest template placeholders

-The Microsoft Entra manifest file contains placeholder arguments with {{...}} statements, it's replaced during build for different environments. You can build references to config file, state file, and environment variables with the placeholder arguments.

-<a name='reference-state-file-values-in-azure-ad-manifest-template'></a>

-### Reference state file values in Microsoft Entra manifest template

-The state file is located in `.fx\states\state.xxx.json`. The following example shows state file:

-``` JSON

-{

- "solution": {

- "teamsAppTenantId": "uuid",

- ...

- },

- "fx-resource-aad-app-for-teams": {

- "applicationIdUris": "api://xxx.com/uuid",

- ...

- }

- ...

-}

-```

-> [!NOTE]

-> xxx represents different environment.

-You can use this placeholder argument in the Microsoft Entra manifest. `{{state.fx-resource-aad-app-for-teams.applicationIdUris}}` to point out `applicationIdUris` value in `fx-resource-aad-app-for-teams` property.

-<a name='reference-config-file-values-in-azure-ad-manifest-template'></a>

-### Reference config file values in Microsoft Entra manifest template

-The following config file is located in `.fx\configs\config.xxx.json`:

-``` JSON

-{

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

- "description": "description.",

- "manifest": {

- "appName": {

- "short": "app",

- "full": "Full name for app"

- }

- }

-}

-```

-You can use the placeholder argument in the Microsoft Entra manifest `{{config.manifest.appName.short}}` to refer `short` value.

-<a name='reference-environment-variable-in-azure-ad-manifest-template'></a>

-### Reference environment variable in Microsoft Entra manifest template

-When the value is a secret, you don't need to enter permanent values in Microsoft Entra manifest template. Microsoft Entra manifest template file supports reference environment variables values. You can use the syntax `{{env.YOUR_ENV_VARIABLE_NAME}}` in the tool as parameter values to resolve the current environment variable values.

-<a name='edit-and-preview-azure-ad-manifest-with-codelens'></a>

-## Edit and preview Microsoft Entra manifest with CodeLens

-Microsoft Entra manifest template file has CodeLens to review and edit the code.

-<a name='azure-ad-manifest-template-file'></a>

-### Microsoft Entra manifest template file

-There's a preview CodeLens at the beginning of the Microsoft Entra manifest template file. Select the CodeLens to generate a Microsoft Entra manifest based as per your environment.

-### Placeholder argument CodeLens

-Placeholder argument CodeLens helps you to see the values for local debug and develop your environment. If you hover the mouse on the placeholder argument, it shows tooltip box for the values of all the environments.

-### Required resource access CodeLens

-Microsoft Entra manifest template in Teams Toolkit also supports user readable strings for `Microsoft Graph` and `Office 365 SharePoint Online` permissions. The official [Microsoft Entra manifest schema](/azure/active-directory/develop/reference-app-manifest), which is the `resourceAppId` and `resourceAccess` in `requiredResourceAccess` property supports only the UUID. If you enter UUID, the CodeLens shows user readable strings, otherwise it shows the UUID.

-### Pre-authorized applications CodeLens

-CodeLens shows the application name for the pre-authorized application ID for the `preAuthorizedApplications` property.

-<a name='view-azure-ad-application-on-the-azure-portal'></a>

-## View Microsoft Entra application on the Azure portal

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

-

- :::image type="content" source="images/add view1-v4.png" alt-text="view1" lightbox="images/add view1-v4.png":::

- > [!NOTE]

- > xxx in the client ID indicates the environment name where you have deployed the Microsoft Entra application.

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

-

- > [!NOTE]

- > Ensure that login credentials of Teams application and M365 account are the same.

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

-

- :::image type="content" source="images/add view2-v4.png" alt-text="view2":::

-4. Select Microsoft Entra application from search result to view the detail information.

-

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

-

- :::image type="content" source="images/add view3-v4.png" alt-text="view3":::

-6. You can select **Other Menu** to view or configure Microsoft Entra application through its portal.

-

-<a name='use-an-existing-azure-ad-application'></a>

-## Use an existing Microsoft Entra application

-You can use the existing Microsoft Entra application for the Teams project. For more information, see [use an existing Microsoft Entra application for your Teams application](https://github.com/OfficeDev/TeamsFx/wiki/Customize-provision-behaviors#use-an-existing-aad-app-for-your-teams-app).

-<a name='azure-ad-application-in-teams-application-development-lifecycle'></a>

-## Microsoft Entra application in Teams application development lifecycle

-You need to interact with Microsoft Entra application during various stages of your Teams application development lifecycle.

-1. **To create Project**

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

-2. **To add SSO to your Bot or Tab**

- After you create a Teams application without built-in SSO, Teams Toolkit progressively helps you to add SSO for the project. As a result, a Microsoft Entra manifest file is automatically created for you in `templates\appPackage\aad.template.json`.

- Teams Toolkit creates or updates the Microsoft Entra application during next local development session or while you move the application to the cloud.

-3. **To build Locally**

- Teams Toolkit performs the following functions during local development:

- * Read the `state.local.json` file to find an existing Microsoft Entra application. If a Microsoft Entra application already exists, Teams Toolkit reuses the existing Microsoft Entra application. Otherwise you need to create a new application using the `aad.template.json` file.

- * Initially ignores some properties in the manifest file that requires more context, such as `replyUrls` property that requires a local development endpoint during the creation of a new Microsoft Entra application with the manifest file.

- * After the local dev environment starts successfully, the Microsoft Entra application's `identifierUris`, `replyUrls`, and other properties that aren't available during creation stage are updated accordingly.

- * The changes you've done to your Microsoft Entra application are loaded during next local development session. You can see [Microsoft Entra application changes](https://github.com/OfficeDev/TeamsFx/wiki/) applied manually.

-4. **To provision for cloud resources**

- You need to provision cloud resources and deploy your application while moving your application to the cloud. At stages, such as local debug, Teams Toolkit:

- * Reads the `state.{env}.json` file to find an existing Microsoft Entra application. If a Microsoft Entra application already exists, Teams Toolkit re-uses the existing Microsoft Entra application. Otherwise you need to create a new application using the `aad.template.json` file.

- * Ignores some properties in the manifest file initially that requires more context such as `replyUrls` property. This property requires frontend or bot endpoint during the creation of a new Microsoft Entra application with the manifest file.

- * Completes other resources provision, then Microsoft Entra application's `identifierUris`, and `replyUrls` are updated according to the correct endpoints.

-5. **To build application**

- * The cloud command deploys your application to the provisioned resources. It doesn't include deploying Microsoft Entra application changes you've made.

- * Teams Toolkit updates the Microsoft Entra application according to the Microsoft Entra manifest template file.

-## Limitations

-1. Teams Toolkit extension doesn't support all the properties listed in Microsoft Entra manifest schema.

-

- The following table lists the properties that aren't supported in Teams Toolkit extension:

- |**Not supported properties**|**Reason**|

- |--|-|

- |`passwordCredentials`|Not allowed in manifest|

- |`createdDateTime`|Read-only and can't change|

- |`logoUrl`|Read-only and can't change|

- |`publisherDomain`|Read-only and can't change|

- |`oauth2RequirePostResponse`|Doesn't exist in Graph API|

- |`oauth2AllowUrlPathMatching`|Doesn't exist in Graph API|

- |`samlMetadataUrl`|Doesn't exist in Graph API|

- |`orgRestrictions`|Doesn't exist in Graph API|

- |`certification`|Doesn't exist in Graph API|

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

- * Register a new Microsoft Entra application on [Azure portal](https://ms.portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps).

- * Select `API permissions` from the Microsoft Entra application page.

- * Select `add a permission` to add the permission you need.

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

-## See also

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

-* [Microsoft Entra manifest](/azure/active-directory/develop/reference-app-manifest)

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

-description: In this article, learn how to collaborate on TeamsFx Project using Teams Toolkit v4 and collaborate with other developers.

-# Collaborate on Teams project using Microsoft Teams Toolkit v4

-Multiple developers can work together to debug, provision and deploy for the same TeamsFx project, but it requires manually setting the right permissions of Teams App and Microsoft Entra ID. Teams Toolkit supports collaboration feature to allow developers and project owner to invite other developers or collaborators to the TeamsFx project to debug, provision, and deploy the same TeamsFx project.

-## Collaborate with other developers

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

-### As project owner

- > [!NOTE]

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

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

-

- :::image type="content" source="images/select-teams-toolkit-v4.png" alt-text="Select teams toolkit from activity bar":::

- 1. In **ENVIRONMENT** section, select collaborators, that displays as option **1** **Add Microsoft 365 Teams App (with Microsoft Entra App) Owners** and **2** **List Microsoft 365 Teams App (with Microsoft Entra App) Owners** as shown in the following image:

- :::image type="content" source="images/add collaborators-v4.png" alt-text="collaborators":::

- 2. Select **Add Microsoft 365 Teams App (with Microsoft Entra App) Owners** and add other Microsoft 365 account email address as collaborator. The account to be added must be on the same tenant as project owner for remote debug as shown in the image:

- :::image type="content" source="images/add-owner-v4.png" alt-text="Add project owner":::

- 3. To view collaborators in current environment, select **List Microsoft 365 Teams App (with Microsoft Entra App) Owners**, then you can see collaborators listed in the output channel as shown in following image:

- :::image type="content" source="images/list of collaborators-v4.png" alt-text="list":::

- 4. Push the project to GitHub.

- > [!NOTE]

- > The newly added collaborators do not receive any notification. The Project owner needs to notify collaborator.

-### As project collaborator

- 1. Clone the project from GitHub.

- 2. Log on to Microsoft 365 account.

- 3. Log on to Azure account, it has contributor permission for all the Azure resources, which are used in the project.

- 4. To preview your Teams app, deploy the project to remote.

- 5. Launch remote to have a preview of the Teams app.

- > [!NOTE]

- > Collaborators must log in using the account that project owner adds under the same tenant with project owner. For more information, see [build and run your Teams app in remote environment](/microsoftteams/platform/sbs-gs-javascript?tabs=vscode%2Cvsc%2Cviscode%2Cvcode&tutorial-step=3).

-## Remove Collaborators

-If you want to remove collaborators from Teams Toolkit extension, you need to remove manually as you can't remove them directly. Perform the following steps to remove collaborators manually:

-* Using Developer Portal

- * Go to [Teams Developer Portal](https://dev.teams.microsoft.com/home) and select your Teams app by name or app ID.

- * Select **Owners** from left panel.

- * Select and remove the collaborator.

-* Using Microsoft Entra ID

- * Go to [Microsoft Entra ID](https://ms.portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps), select **App registration** from left panel, and find your Microsoft Entra App.

- * Select **Owners** from left panel in Microsoft Entra App management page.

- * Select and remove the collaborator.

- > [!NOTE]

- >

- > * Collaborator added to your project doesn't receive any notification. Project owner needs to notify collaborator offline.

- > * Azure related permissions must be set manually by Azure subscription administrator on Azure portal.

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

-## See also

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

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

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

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

-description: In this module, learn about TeamsFX multi environment such as, create a new environment, select target environment and more in Teams Toolkit v4.

-# Manage multiple environments in Teams Toolkit v4

- Teams Toolkit provides a simple way for you to create and manage multiple environments. You can use environments to provision resources and deploy artifacts to the target environment for your Microsoft Teams app.

- You can perform the following activities with environments:

-1. **Test before production**: You can set up multiple environments, such as dev, test, and staging before publishing a Teams app to production environment in modern app development lifecycle.

-2. **Manage app behaviors in different environments**: You can set up different app behaviors for multiple environments, such as enabling telemetry in the production environment.

- > [!NOTE]

- > Ensure that telemetry is disabled in the development environment.

-## Create a new environment

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

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

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

-To create a new environment:

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

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

-3. Select **+ Create new environment** under **ENVIRONMENT**.

- :::image type="content" source="images/create_new_env_1-v4.PNG" alt-text="Create new environment":::

- If you've more than one environment, you need to select an existing environment to create the new environment. The command copies the file contents of `config.<newEnv>.json` and `azure.parameters.<newEnv>.json` from the selected environment to the new environment that youΓÇÖre creating.

-## Target environment

-Teams Toolkit prompts you to select a target environment when you've multiple remote environments.

-## Project folder structure

-After creating the project, you can view the project folders and files under **EXPLORER** in Visual Studio Code. Besides the custom codes, Teams Toolkit uses some files to maintain the `configs`, `states`, and `templates` of the app. The following list provides files and outlines their relationship with multiple environments:

-* `.fx\configs`: Configuration files that the user can customize for the Teams app.

- * `config.<envName>.json`: Configuration file for the environment. This file exists for every environment individually.

- * `azure.parameters.<envName>.json`: Parameters file for Azure bicep provision for every environment.

- * `projectSettings.json`: Global project settings that apply to all environments.

-* `.fx\states`: Teams Toolkit generates the provision output in this folder after you provision resources for your app.

- * `state.<envName>.json`: Provision output file for the environment. This file exists for every environment individually.

- * `<env>.userdata`: User data for the provision output for the environment. This file exists for every environment individually.

-* `templates`

- * `appPackage`: App manifest (previously called Teams app manifest) template files.

- * `azure`: `bicep` template files.

-## Customize resource provision

-Teams Toolkit allows you to customize the resource provision in each environment by changing the configuration and template files.

-The following table lists the common scenarios for customized resource provision:

-| Scenarios | Location| Description |

-| | | |

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

-| Reuse existing Microsoft Entra app for Teams app | `auth` section in`.fx\config.<envName>.json`| [Use an existing Microsoft Entra app for your Teams app](../provision.md#use-an-existing-azure-ad-app-for-your-teams-app) |

-| Reuse existing Microsoft Entra app for bot |`bot` section in`.fx\config.<envName>.json`| [Use an existing Microsoft Entra 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)|

-## Scenarios

-The following scenarios show how to customize the resource provision in different environments:

-<br>

-<br><details>

-<summary><b>Scenario 1: Customize the Teams app name for different environments

-</b></summary>

-You can set the Teams app name to `myapp(dev)` for the default environment **dev** and `myapp(staging)` for the staging environment, **staging**. Here, myapp denotes the name of your app project or app name.

-Steps for customization:

-1. Open the configuration file `.fx\configs\config.dev.json`.

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

- The updates to `.fx\configs\config.dev.json` are:

- ```json

- {

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

- "description": "You can customize the TeamsFx config for different environments. Visit https://aka.ms/teamsfx-env-config to learn more about this.",

- "manifest": {

- "appName": {

- "short": "myapp(dev)"

- ...

- }

- }

- ...

- }

- ```

-3. Create a new environment and name it **staging**, if a staging environment doesn't exist.

-4. Open the configuration file `.fx\configs\config.staging.json`.

-5. Update the value of the property manifest > appname > short to `myapp(staging)`.

-6. Run provision command on **dev** and **staging** environments to update the app name in remote environments.

- > [!NOTE]

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

-</details>

-<details>

-<summary><b>Scenario 2: Customize the Teams app description for different environments</b></summary>

-You can define Teams app description for each environment:

-* For the default environment **dev**, the description is **my app description for dev**.

-* For the staging environment **staging**, the description is **my app description for staging**.

-Follow these steps customizing the environment description:

-1. Open the configuration file `.fx\configs\config.dev.json`.

-2. Add a new property for `manifest` > `description` > `short` and enter its value as **my app description for dev**.

- The updates to `.fx\configs\config.dev.json` are:

- ```json

- {

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

- "description": "You can customize the TeamsFx config for different environments. Visit https://aka.ms/teamsfx-env-config to learn more about this.",

- "manifest": {

- ...

- "description": {

- "short": "`my app description for dev"

- ...

- }

- }

- ...

- }

- ```

-3. Create a new environment and name it **staging**, if a staging environment doesnΓÇÖt exist.

-4. Open the configuration file `.fx\configs\config.staging.json`.

-5. Add a new property as you did in config.dev.json and enter its value as **my app description for staging**.

-6. Open the app manifest template `templates\appPackage\manifest.template.json`.

-7. Update the value of property `description` > `short` to use the variable defined in configure files with braces. Use the following syntax `{{config.manifest.description.short}}`.

-

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

- ```json

- {

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

- "manifestVersion": "1.11",

- "version": "1.0.0",

- ...

- "description": {

- "short": "{{config.manifest.description.short}}",

- ...

- },

- ...

- }

- ```

-8. Run provision command against **dev** and **staging** environments to update the app name in remote environments.

- > [!NOTE]

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

-</details>

-<details>

-<summary><b>Scenario 3: Customize Teams app description for all environments</b></summary>

-You can set the description of Teams app to **my app description** for all the environments.

-Teams Toolkit shares the same app manifest templates across all environments, you can update the description value in it for your target:

-1. Open the app manifest template `templates\appPackage\manifest.template.json`.

-2. Update the value of the property `description` > `short` with the permanent string **my app description**.

-

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

- ```json

- {

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

- "manifestVersion": "1.11",

- "version": "1.0.0",

- ...

- "description": {

- "short": "my app description",

- ...

- },

- ...

- }

- ```

-3. Run the provision command against all environments to update the app name in remote environments.

-</details>

-<details>

-<summary><b>Scenario 4: Customize Azure resources for different environments</b></summary>

-You can customize Azure resources provisioned for each environment. For example, edit the environment corresponding to `.fx\configs\azure.parameters.{env}.json` file to specify an Azure Function name.

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

-</details>

-## See also

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

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

-* [Add more cloud resources](add-resource-v4.md)

-* [Collaborate with other developers on Teams project](TeamsFx-collaboration-v4.md)

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

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

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

-description: Learn how toolkit v4 allows bootstrap sample access to existing APIs. List of different authentication types.

-# Integrate existing third-party APIs using Teams Toolkit v4

-Teams Toolkit allows you to access and use existing APIs for building Teams apps. Your organization or a third-party might have developed these APIs. When you use Teams Toolkit to connect to an existing API, Teams Toolkit performs the following functions:

-* Generate sample code in the `./bot` or `./api` folder.

-* Add a reference to the `@microsoft/teamsfx` package to `package.json`.

-* Add app settings for your API in `.env.teamsfx.local` that configures local debugging.

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

-## Configure API connection

-You can add an existing third-party API to your Teams app using:

-* [Teams Toolkit](#add-api-connection-using-teams-toolkit)

-* [TeamsFx CLI commands](#add-api-connection-using-teamsfx-cli)

-### Add API connection using Teams Toolkit

-Add a connection to an existing third-party API using the following steps:

-1. Open your Teams app project in **Visual Studio Code**.

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

-3. Select **Add features** in the **DEVELOPMENT** section.

- :::image type="content" source="images/api-add-features_1-v4.png" alt-text="api add features":::

- The **Add Feature** dropdown list appears.

-4. Select **API Connection**.

- :::image type="content" source="images/api-select-features_1-v4.png" alt-text="api select features":::

-5. Enter endpoint for the API, and then press **Enter**.

- Ensure that the endpoint is a valid http(s) URL. Teams Toolkit adds the endpoint to the project's local app settings, and it's the base URL for API requests.

- :::image type="content" source="images/api-endpoint_1-v4.png" alt-text="api endpoint":::

-7. Select the component that needs to connect to the API, and then select **OK**.

- :::image type="content" source="images/api-invoke_1-v4.png" alt-text="api invoke":::

-9. Enter an alias for the API, and then press **Enter**.

- The alias generates an app setting name for the API. Teams Toolkit adds the alias to the project's local app setting.

- :::image type="content" source="images/api-alias_1-v4.png" alt-text="api alias":::

-11. Select the required authentication for the API request from the **API authentication type**.

- :::image type="content" source="images/myAPI connection-v4.png" alt-text="api auth":::

- Teams Toolkit generates appropriate sample code and adds corresponding local application settings based on authentication that you select. To configure authentication:

-# [Basic](#tab/basic)

-For implementing basic authentication using username and password:

-* Select **Basic**.

-* Enter the username for basic Auth.

-Teams Toolkit generates the sample code to call your API at bot\myAPI.js.

-# [Certification](#tab/certification)

-* Select **Certification** to authenticate requests using certificates.

-Teams Toolkit generates the sample code to call your API at bot\myAPI.js.

-# [Microsoft Entra ID](#tab/AAD)

-* Select **Microsoft Entra ID** to authenticate requests using Microsoft Entra access tokens.

-Teams Toolkit generates the sample code to call your API at bot\myAPI.js.

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

-* Select **API Key** to implement authentication using an API key.

-* Select the required API key position in request.

-* Enter an API key name.

-Teams Toolkit generates the sample code to call your API at bot\myAPI.js.

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

-* Select **Custom Auth Implementation** to customize authentication according to your app requirement.

-Teams Toolkit generates the sample code to call your API at bot\myAPI.js.

-You've successfully added a connection in your Teams app to an existing API.

-## Add API connection using TeamsFx CLI

-The base command of this feature is `teamsfx add api-connection [authentication type]`. The following table provides a list of different authentication types and their corresponding sample commands:

- > [!TIP]

- > You can use `teamsfx add api-connection [authentication type] -h` to get help document.

- |**Authentication type**|**Sample command**|

- |--||

- |**Basic**|teamsfx add api-connection basic--endpoint <https://example.com> --component bot--alias example--user-name example user--interactive false|

- |**API Key**|teamsfx add api-connection apikey--endpoint <https://example.com> --component bot--alias example--key-location header--key-name example-key-name--interactive false|

- |**Microsoft Entra ID**|teamsfx add api-connection aad--endpoint <https://example.com> --component bot--alias example--app-type custom--tenant-id your_tenant_id--app-id your_app_id--interactive false|

- |**Certificate**|teamsfx add api-connection cert--endpoint <https://example.com> --component bot--alias example--interactive false|

- |**Custom**|teamsfx add api-connection custom--endpoint <https://example.com> --component bot--alias example--interactive false|

-## Directory structure updates to your project

- Teams Toolkit modifies `bot` or `api` folder based on your selection:

-1. Generate `{your_api_alias}.js\ts` file. The file initializes an API client for your API and exports the API client.

-2. Add `@microsoft\teamsfx` package to `package.json`. The package provides support for the common API authentication methods.

-3. Add environment variables to `.env.teamsfx.local`. You must configure environment variables for the selected authentication type. The generated code reads values from the environment variables.

-## See also

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

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

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

-# Add capabilities of Teams Toolkit to Microsoft Teams app

-> [!IMPORTANT]

->

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

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

-> * This article is applicable only to Teams Toolkit version 4. For more information on how to add capabilities to your app using Teams Toolkit version 5, see [How-to guides](../add-How-to-guides-v5.md).

-Adding capabilities with Teams Toolkit allows you to extend the functionality of your existing Microsoft Teams app. The advantage of adding more capabilities is that you can add more functions to your app by using Teams Toolkit to automatically add necessary code and project files. You can select different capabilities based on the app project you've created for your Teams app. The following table lists the Teams app capabilities:

-|Capability|Description|Other supported capabilities|

-|--|-|--|

-|**Basic Teams app**|&nbsp;|&nbsp;|

-| **Tab** | Basic tabs are simple HTML tags that refer to domains declared in the app manifest. You can add tabs as a part of channel inside a team, group chat, or personal app for an individual user.|Basic tab, notification bot, command bot, basic bot, and basic message extension|

-| **Bot** | Bots help to interact with your web service through text, interactive cards, and dialogs (referred as task modules in TeamsJS v1.x).|Basic message extension, SSO-enabled tab, and basic tab|

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

-|**Scenario-based Teams app**|&nbsp;|&nbsp;|

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

-| **Command bot** | Command bot allows you to automate repetitive tasks using a command bot. It responds to simple commands sent in chats with the Adaptive Cards. |SSO-enabled tab and basic tab|

-| **Workflow bot** | Workflow bot allows users to interact with an Adaptive Card enabled by the Adaptive Card action handler in the workflow bot app.|SSO-enabled tab and basic tab|

-| **SPFx tab** | Microsoft 365 hosts the SPFx tab apps and supports developing and hosting your client-side SharePoint Framework (SPFx) solution.|None|

-| **SSO-enabled tab** |You can build SSO-enabled tab app that allows the user access to your app with single sign-on (SSO).|SSO-enabled tab, notification bot, command bot, basic bot, and basic message extension|

-> [!NOTE]

-> You can add tabs up to 16 instances. You can add one bot and one message extension to each instance at a time.

-## Add capabilities

-You can add capabilities in the following ways:

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

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

-* [Use TeamsFx CLI](#use-teamsfx-cli)

-### Use Teams Toolkit pane

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

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

- 1. Select **Add features** in the **DEVELOPMENT** section.

- :::image type="content" source="images/select-feature123_1-v4.png" alt-text="Add capabilities from Teams Toolkit":::

- 1. From the dropdown list that appears, select the capability you want to add to your app.

- :::image type="content" source="images/notification-add-capabilities_1-v4.png" alt-text="notification":::

- Teams Toolkit adds the selected capability to your app and updates the app directory structure for the new capability. After successfully adding the capability to your Teams app, you need to provision for each environment.

-### Use the Command Palette

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

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

- :::image type="content" source="images/add-capabilities-command-palette_1-v4.png" alt-text="Add capabilities from command palette":::

- 1. Select **Teams: Add features**.

- :::image type="content" source="images/teams-add-features_1-v4.png" alt-text="To add capabilities by using command palette.":::

- 1. From the dropdown list that appears, select the capability you want to add to your app.

- :::image type="content" source="images/notification-add-capabilities_1-v4.png" alt-text="notification":::

- Teams Toolkit adds the selected capability to your app and updates the app directory structure for the new capability. After successfully adding the capability to your Teams app, you need to provision for each environment.

-### Use TeamsFx CLI

-You can use TeamsFx CLI as an alternative way for adding capabilities to your Teams app project.

-This section lists the capabilities you can add to your Teams app using TeamsFx CLI commands. Before you add capabilities to your app, ensure that youΓÇÖve changed the directory to your project directory.

-The following table lists the capabilities and the TeamsFx CLI commands for adding them:

- |Capability and Scenario| Command|

- |--|-|

- |To add notification bot |`teamsfx add notification`|

- |To add command bot |`teamsfx add command-and-response`|

- |To add SSO-enabled tab |`teamsfx add sso-tab`|

- |To add tab |`teamsfx add tab`|

- |To add bot |`teamsfx add bot`|

- |To add message extension |`teamsfx add message extension`|

-## Changes after adding capabilities

-The following table shows the changes that you can see in the files of your app after adding capabilities:

-|Add capability|Description| Changes|

-||||

-|Basic bot, basic message extension, and basic tab|Includes a basic bot or basic tab app template into your project.|Teams Toolkit adds a front-end bot or tab template code into a subfolder with path `yourProjectFolder\bot` or `yourProjectFolder\tab`, respectively.|

-|Basic bot, message extension, and basic tab |Includes necessary scripts for Visual Studio Code and is executed when you want to debug your app locally. |Teams Toolkit updates the `launch.json` and `task.json` files under the `.vscode` folder. |

-|Basic bot and basic message extension|Updates the manifest file for a basic bot or basic tab app. This information represents your app in the Teams Platform.|Teams Toolkit updates the file `manifest.template.json` under `templates\appPackage` folder. The manifest file includes tab-related information that represents your app in the Teams Platform. The changes are visible in the ID of your bot, the scopes of your bot, and the commands that your bot or tab app can respond to.|

-|Basic tab|Includes information in the manifest file for a basic bot or basic tab. This information represents your app in the Teams Platform.|Teams Toolkit updates `manifest.template.json` under `templates\appPackage` folder. The manifest file includes tab-related information that represents your app in the Teams Platform. The changes are visible in the configurable and static tabs and scopes of the tabs.|

-|Basic bot, basic message extension, and basic tab|Includes information in TeamsFx for a basic bot or tab app. It also includes provision files that are for integrating Azure Functions.|Files under `templates\azure\teamsfx` are updated and `templates\azure\provision\xxx.bicep` files are regenerated.|

-|Basic bot, basic message extension, and basic tab|Ensures that you've set up your project with the right configuration for the newly added capability.|Teams Toolkit regenerates the files under `.fx\config`.|

-## Step-by-step guides

-* Follow the [step-by-step](~/sbs-gs-commandbot.yml) guide to build command bot in Teams.

-* Follow the [step-by-step](~/sbs-gs-notificationbot.yml) guide to build notification bot in Teams.

-* Follow the [step-by-step](~/sbs-gs-workflow-bot.yml) guide to build workflow bot in Teams.

-## See also

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

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

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

-* [Build message extensions for Teams](~/messaging-extensions/what-are-messaging-extensions.md)

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

-* [Authenticate users in Microsoft Teams](~/concepts/authentication/authentication.md)

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

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

-* [Combine bots with tabs](~/resources/bot-v3/bots-with-tabs.md)

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

-# Add cloud resources of Teams Toolkit v4 to Teams app

-Teams Toolkit allows you to provision the cloud resources for hosting your app. You can add the cloud resources according to your development needs. The advantage of adding more cloud resources in TeamsFx is that you can autogenerate all configuration files and connect to Teams app by using Teams Toolkit.

-> [!NOTE]

-> If you've created SharePoint Framework (SPFx) based tab project, you can't add Azure cloud resources.

-## Add cloud resources

-You can add cloud resources in the following ways:

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

- 1. Open your Teams app project in **Visual Studio Code**.

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

- 1. Select **Add features** in the **DEVELOPMENT** section.

- :::image type="content" source="images/select-feature-updated_1-v4.png" alt-text="Add feature from Teams Toolkit":::

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

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

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

- :::image type="content" source="images/Teams-add-features-v4.png" alt-text="Add feature from command palette":::

- 1. Select **Teams: Add features**.

- :::image type="content" source="images/Teams-add-features1_1-v4.png" alt-text="Type add feature and enter":::

- A list of cloud resources appears.

- 1. Select the **Cloud resources** to add to your project.

- :::image type="content" source="images/updated-final-cloud_1-v4.png" alt-text="final":::

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

-### Add cloud resources using TeamsFx CLI

-* Before you add cloud resources, ensure that you change the directory to your **project directory**.

-* The following table lists the capabilities and required commands:

- |Cloud Resource|Command|

- ||-|

- | **Azure Functions**|`teamsfx add azure-function`|

- | **Azure SQL Database**|`teamsfx add azure-sql`|

- | **Azure API Management**|`teamsfx add azure-apim`|

- | **Azure Key Vault**|`teamsfx add azure-keyvault`|

-## Types of cloud resources

-In the following scenarios, TeamsFx integrates the Azure services with your Teams app:

-* [Azure Functions](/azure/azure-functions/functions-overview): A serverless solution to meet your on-demand requirements, such as creating web APIs for your Teams app back-end.

-* [Azure SQL Database](/azure/azure-sql/database/sql-database-paas-overview): A platform as a service (PaaS) database engine to serve as your Teams app data store.

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

-* [Azure Key Vault](/azure/key-vault/general/overview): Safeguard cryptographic keys and other secrets used by cloud apps and services.

-## Changes after adding Azure resources

-The following changes appear after adding Azure cloud resources in your project:

-* New parameters added to `azure.parameter.{env}.json` to provide the required information for provision.

-* New content is included to ARM template under `templates\azure`. The files are in `templates\azure\teamsfx` folder for the Azure resources.

-* Teams Toolkit regenerates the files under `templates\azure\teamsfx` folder to ensure configuration required for TeamsFx is up to date for added Azure resources.

-* `.fx\configs\projectSettings.json` is updated to track the available resources in your project.

-The following additional changes appear after adding resources in your project:

-|Resources|Changes|Description|

-|||--|

-|**Azure Functions**|The Azure Functions template code is added into a subfolder with path `yourProjectFolder\api`</br></br>`launch.json` and `task.json` are updated under `.vscode` folder.| Includes a hello world http trigger template into your project.</br></br> Includes necessary scripts for Visual Studio Code to be executed when you want to debug your app locally.|

-|**Azure API Management**|An open API specification file added into a subfolder with path `yourProjectFolder\openapi`.|Defines your API after publishing. It's the API specification file.|

-## See also

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

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

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

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

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

-description: Learn about build environments such as C# and blazor of Teams Toolkit in Visual Studio. Toolkit integrates Azure Functions capabilities for building apps.

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

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

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

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

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

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

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

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

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

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

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

-* [Collaborate with other developers on Teams project](TeamsFx-collaboration-v4.md)

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

-* [Collaborate with other developers on Teams project](TeamsFx-collaboration-v4.md)

-description: In this module, learn how to publish Teams apps using Teams Toolkit v4 and publish to individual scope or custom app upload permission.

-# Publish Teams apps using Teams Toolkit v4

-After creating the app, you can distribute your app to different scopes, such as an individual, a team, or an organization. The distribution depends on multiple factors such as needs, business and technical requirements, and your goal for the app. Distribution to different scope may need different review process. In general, the bigger the scope, the more review the app needs to go through for security and compliance concerns.

-Here's what you'll learn in this section:

-* [Publish to individual scope or custom app upload permission](#publish-to-individual-scope-or-custom-app-upload-permission)

-* [Publish to your organization](#publish-to-your-organization)

-* [Publish to Microsoft Teams Store](#publish-to-teams-store)

-## Prerequisites

-* Ensure to create your [app package](~/concepts/build-and-test/apps-package.md) and [validate it](https://dev.teams.microsoft.com/appvalidation.html) for errors.

-* [Enable custom app uploading](~/concepts/build-and-test/prepare-your-o365-tenant.md#enable-custom-teams-apps-and-turn-on-custom-app-uploading) in Teams.

-* Ensure that your app is running and accessible using HTTPs.

-* Ensure you have followed set of guidelines in the publish your app to the Teams Store to publish your app.

-## Publish to individual scope or custom app upload permission

-You can add a custom app to Teams by uploading an [app package](~/concepts/build-and-test/apps-package.md) in `.zip` file directly to a team or in personal context. Adding a custom app by uploading an app package is known as custom app upload. It allows you to test app while being uploaded in Teams. You can build and test app in the following scenarios:

-* Test and debug an app locally.

-* Build an app for yourself, such as to automate a workflow.

-* Build an app for small set of users, such as, your work group.

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

-### Build app package

-You need to run **Provision in the cloud** before you build the app package. The following step helps you to build the app package:

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

- The generated app package is located in `{your project folder}\build\appPackage\appPackage.{env}.zip`.

-### Upload app package

-Perform the following steps to upload app package:

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

- :::image type="content" source="images/upload-an-app.png" alt-text="Screenshot of upload an app":::

- **Upload an app** window appears.

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

- :::image type="content" source="images/upload-custom-app-v4.png" alt-text="Screenshot shows the option to upload a custom app.":::

- Now the custom app is uploaded into the Teams client and you can add and view.

-## Publish to your organization

-When the app is ready for use in production, you can submit the app using the Teams app submission API, called from Microsoft Graph API. Teams app submission API is an integrated development environment (IDE) such as Microsoft Visual Studio Code installed with Teams toolkit. The following steps help you to publish the app to your organization:

-* [Publish from Teams Toolkit](#publish-from-teams-toolkit)

-* [Approve on Admin Center](#approve-on-admin-center)

-### Publish from Teams Toolkit

-The following steps help you to publish the app from Teams Toolkit:

-1. You can publish your Teams app in one of the following ways:

- * Select **Publish to Teams** under **DEPLOYMENT**.

- * Select **View** > **Command Palette...** > **Teams: Publish to Teams**.

- :::image type="content" source="images/select-publish_1-v4.png" alt-text="Select Publish":::

-1. Select **Install for your organization**.

- :::image type="content" source="images/installforyourorganization_1-v4.png" alt-text="Install for your organization":::

- Now the app is successfully published to the admin portal and you see the following notice:

- :::image type="content" source="images/confirm-publish_1-v4.png" alt-text="Confirm Publish":::

-Now the app is available on the **Manage apps** of Microsoft Teams admin center, where you and the admin can review and approve it.

-> [!NOTE]

-> The app doesn't publish to your organization's app store yet. The step submits the app to the Teams admin center where you can approve it for publishing to your organization's app store.

-### Approve on Admin Center

-Teams toolkit for Visual Studio Code built on top of the Teams App Submission API and it allows you to automate the submission-to-approval process for custom apps on Teams.

- > [!NOTE]

- > Ensure that you have Teams app project in Visual Studio code. As an admin, **Manage apps** in the [Microsoft Teams admin center](https://admin.teams.microsoft.com/policies/manage-apps) is where you can view and manage all Teams apps for your organization. You can do the following activities in the admin center:

- >

- > * See the org level status and properties of apps.

- > * Approve or upload new custom apps to your organization's app store.

- > * Block or allow apps at the org level.

- > * Add apps to Teams.

- > * Purchase services for third-party apps.

- > * View permissions requested by apps.

- > * Grant admin consent to apps.

- > * [Manage org wide app settings](https://admin.teams.microsoft.com/policies/manage-apps).

-The following steps help you to approve from Admin Center:

-1. Select **Go to admin portal**.

-1. Select the :::image type="icon" source="images/Showall-v4.png"::: icon > **Teams apps** > **Manage apps**.

- :::image type="content" source="images/select-manage-apps.png" alt-text="Screenshot of Select Manage apps":::

- You can view all Teams app for your organization.

- In the **Pending approval** widget at the top of the page lets you know when a custom app is submitted for approval. In the table, a newly submitted app automatically publishes the status of submitted and blocked apps. You can sort the publishing status column in descending order to find the app.

- :::image type="content" source="images/admin-approval-for-teams-app.png" alt-text="Screenshot shows the option of custom app submitted for approval.":::

-1. Select the app name to go to the app details page. On the **About** tab, you can view details about the app, including description, status, and app ID.

- :::image type="content" source="images/about-submitted-app.png" alt-text="Screenshot shows the option of custom app submitted.":::

-1. Select the status dropdown and change from **Submitted** to **Publish**.

- After you publish the app, the publishing status changes to published and the status automatically changes to allowed.

- For more information, see [Publish to your org](/microsoftteams/manage-apps?toc=%2Fmicrosoftteams%2Fplatform%2Ftoc.json&bc=%2Fmicrosoftteams%2Fplatform%2Fbreadcrumb%2Ftoc.json)

-## Publish to Teams Store

-You can distribute your app directly to the Teams Store inside Microsoft Teams and reach millions of users around the world. If your app is also featured in the Teams Store, you can instantly reach potential customers. The apps published to the Teams Store also automatically list on Microsoft AppSource, which is the official marketplace for Microsoft 365 apps and solutions.

-For more information, see [how to publish to the Teams Store](~/concepts/deploy-and-publish/appsource/publish.md#publish-your-app-to-the-teams-store).

-## See also

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

-* [Distribute your Microsoft Teams app](~/concepts/deploy-and-publish/apps-publish-overview.md)

-* [Create Teams app package](~/concepts/build-and-test/apps-package.md)

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

-* [Manage Teams app in the Microsoft Teams admin center](/microsoftteams/manage-apps?toc=%2Fmicrosoftteams%2Fplatform%2Ftoc.json&bc=%2Fmicrosoftteams%2Fplatform%2Fbreadcrumb%2Ftoc.json)

-description: Learn how to integrate with Developer Portal in Teams Toolkit v4.

-# Publish your Teams apps using Developer Portal v4

-You can configure and manage your app in Developer Portal within Teams Toolkit.

-## To Publish app using Developer Portal

-You can publish your app, which is created in Visual Studio and Visual Studio Code using Developer Portal:

-# [Visual Studio Code](#tab/visualstudiocode)

-The following are the steps to publish your app in Teams Developer Portal:

-1. In **Teams Toolkit**, under **DEPLOYMENT** select **Developer Portal for Teams**.

- :::image type="content" source="images/dev-portal-ttk_1-v4.png" alt-text="Developer Portal for Teams":::

- Developer Portal opens in a browser.

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

-1. To import your app package in zip format, select **Apps** > **Import app**.

- :::image type="content" source="images/Select_Import_app-v4.png" alt-text="Select Import app":::

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

- :::image type="content" source="images/select_publish_1_v4.png" alt-text="Select to publish the app to your organization.":::

-# [Visual Studio](#tab/visualstudio)

-The following are the steps to publish your app in Teams Developer Portal:

-1. Select **Project** > **Teams Toolkit** > **Open Teams Developer Portal to Publish**.

- :::image type="content" source="images/tdp-vs-v4.png" alt-text="Screenshot shows you how to open developer portal from visual studio.":::

-1. Select the app package.

-1. Teams Toolkit opens your app in **Teams Developer Portal** and direct you to the **Publish to your org** page, from there you can select **Publish your app** to continue with your publishing process.

- :::image type="content" source="images/vs-tdp-v4.png" alt-text="Screenshot shows you the app open in Teams Developer Portal.":::

-## To update Manifest file and app package

-If there are any changes related to Teams app's manifest file, you can update the manifest and publish the Teams app again. To publish Teams app manually, you can use [Developer Portal for Teams](https://dev.teams.microsoft.com/home).

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

-1. Select **Apps** > **Import app** to import your app package in zip format.<br>

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

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

-You can do the following configuration for your app in the Developer Portal:

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

-* **Branding**: This section allows you to add **Color icon** and **Outline icon** in `.png` format.

-* **App features**: This section allows you to add the following features to your app:

- * Personal app

- * Bot

- * Connector

- * Scene

- * Group and channel app

- * Messaging extension

- * Meeting extension

- * Activity feed notification

-* **Permissions**: This section allows you to give **Device permissions**, **Team Permissions**, **Chat/Meeting Permissions**, and **User Permissions** for your app.

-* **Single sign-on**: This section allows you to configure your app to authenticate users with single sign-on (SSO) and to specify your app's resource for getting authorization tokens.

-* **Languages**: This section allows you to set up or change the language of your app.

-* **Domain**: This section allows you to add the domains to load your apps in the Teams client, such as *.example.com.

-## See also

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

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

-* [Manage your apps in Developer Portal](~/concepts/build-and-test/manage-your-apps-in-developer-portal.md)

-* [Develop your apps with Teams Toolkit](~/concepts/build-and-test/develop-your-apps-with-teams-toolkit.md)

-description: In this module, learn how to upload and test the custom apps in different environment using Teams toolkit v4.

-# Upload and test the custom apps in Teams environment v4

-After adding API connection, you can test API connection in the Teams Toolkit local environment and deploy your application to the cloud. In CI/CD pipeline, after set-up with different platform, you need to create Azure service principal to provision and deploy resources.

-In this section, you'll learn:

-* [Test API connection in local environment](#test-api-connection-in-local-environment)

-* [Deploy your application to Azure](#deploy-your-application-to-azure)

-* [Provision and deploy CI/CD resources](#provision-and-deploy-cicd-resources)

-## Test API connection in local environment

-The following steps help to test the API connection in the Teams Toolkit local environment:

- 1. **Run npm install**

- Run `npm install` under `bot` or `api` folder to install added packages.

- 2. **Add API credentials to the local application settings**

- Teams Toolkit doesn't ask for credentials, but it leaves placeholders in the local application settings file. Replace the placeholders with the appropriate credentials to access the API. The local application settings file is the `.env.teamsfx.local` file in the `bot` or `api` folder.

- 3. **Use the API client to make API requests**

- Import the API client from the source code that needs access to the API:

- ```BASH

- import { yourApiClient } from '{relative path to the generated file}'

- ```

- 4. **Generate http(s) requests to target API (with Axios)**

- The generated API client is an Axios API client. Use the Axios client to make requests to the API.

- > [!Note]

- > [Axios](https://www.npmjs.com/package/axios) is a popular nodejs package that helps you with http(s) requests. For more information on how to make http(s) requests, see [Axios example documentation](https://axios-http.com/docs/example) to learn how to make http(s).

-## Deploy your application to Azure

-To deploy your application to Azure, you need to add the authentication to the application settings for the appropriate environment. For example, your API might have different credentials for `dev` and `prod`. Based on environment needs, configure Teams Toolkit.

-Teams Toolkit configures your local environment. The bootstrapped sample code contains comments that tell you what app settings you need to configure. For more information on application settings, see [Add app settings](https://github.com/OfficeDev/TeamsFx/wiki/%5BDocument%5D-Add-app-settings)

-## Provision and deploy CI/CD resources

-To provision and deploy resources targeting Azure inside CI/CD, you must create an Azure service principal for use.

-Perform the following steps to create Azure service principals:

-1. Register a Microsoft Entra application in single tenant.

-2. Assign a role to your Microsoft Entra application to access your Azure subscription. The `Contributor` role is recommended.

-3. Create a new Microsoft Entra application secret.

-> [!TIP]

-> Save your tenant id, application id (AZURE_SERVICE_PRINCIPAL_NAME), and the secret (AZURE_SERVICE_PRINCIPAL_PASSWORD) for future use.

-For more information, see [Azure service principals guidelines](/azure/active-directory/develop/howto-create-service-principal-portal). The following are the three ways to create service principals:

-* [Microsoft Azure portal](/azure/active-directory/develop/howto-create-service-principal-portal)

-* [Windows PowerShell](/azure/active-directory/develop/howto-authenticate-service-principal-powershell)

-* [Microsoft Azure CLI](/cli/azure/create-an-azure-service-principal-azure-cli)

-## See also

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

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

-Perform the following the steps to select templates and app capbaility:

-description: This tutorial helps you to select the app that you want to build and lists the associated guides.

-# Teams app tutorials and code samples v4

-You can build your own Teams app with different capabilities using the step-by-step guide or tutorial and code samples.

-## Teams app tutorials

-Now, let's build your first Teams app. You can use the following language (or framework) and prepare your development environment to build your app.

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

-| | | | |

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

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

-## Code samples

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

-description: In this module, learn how to test app behavior in different environment using Teams toolkit v4.

-# Test app behavior in different environment v4

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

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

-* **Cloud-hosted in Teams**: For testing your Teams app remotely, you need to Cloud-host it using provisioning and deploying on Microsoft Entra ID. It involves uploading your solution to the Microsoft Entra ID and then upload into Teams.

-> [!NOTE]

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

-## Locally hosted environment

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

-> [!NOTE]

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

-## Cloud-hosted environment

-To host your development and production code and their HTTPS endpoints, You need to remotely test your teams app using provisioning and deploying on Microsoft Entra ID. You need to ensure that all domains are accessible from your Teams app listed in the [`validDomains`](~/resources/schem#validdomains) object in the `manifest.jason` file

-> [!NOTE]

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

-## See also

-* [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 how to use CI/CD pipeline templates in GitHub, Azure DevOps, and Jenkins for Teams Application DevelopersCI/CD templates using Teams toolkit v4.

-# Set up CI/CD pipelines v4

-TeamsFx helps to automate your development workflow while building Teams application. The following are the tools and templates you can use to set up CI/CD pipelines, create workflow templates, and customize CI/CD workflow with GitHub, Azure DevOps, Jenkins, and other platforms. To provision and deploy resources, you can create Azure service principals and publish the Teams app using Teams Developer Portal. To publish Teams app manually, you may leverage [Developer Portal for Teams](https://dev.teams.microsoft.com/home).

-|Tools and Templates | Description |

-|||

-|[TeamsFx-CLI-Action](https://github.com/OfficeDev/teamsfx-cli-action)|GitHub action that integrates with TeamsFx CLI.|

-|[Teams Toolkit in Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension)| Visual Studio Code extension that helps you to develop Teams app and automation workflows for GitHub, Azure DevOps, and Jenkins. |

-|[TeamsFx CLI](https://www.npmjs.com/package/@microsoft/teamsfx-cli) | Command Line tool that helps you to develop Teams app and automation workflows for GitHub, Azure DevOps, and Jenkins.|

-|[script-ci-template.sh](https://github.com/OfficeDev/TeamsFx/blob/main/docs/cicd_insider/others-script-ci-template.sh) and [script-cd-template.sh](https://github.com/OfficeDev/TeamsFx/blob/main/docs/cicd_insider/others-script-cd-template.sh)| Script templates for automation outside of GitHub, Azure DevOps, or Jenkins. |

-## Set up pipelines

-You can set up pipelines with the following platforms:

-1. [Set up pipelines with GitHub](#set-up-pipelines-with-github)

-1. [Set up pipelines with Azure DevOps](#set-up-pipelines-with-azure-devops)

-1. [Set up pipelines with Jenkins](#set-up-pipelines-with-jenkins)

-1. [Set up pipelines for other platforms](#set-up-pipelines-for-other-platforms)

-## Set up pipelines with GitHub

-To set up pipelines with GitHub for CI/CD:

-* Create workflow templates.

- * Visual Studio Code

- * TeamsFx CLI

-* Customize CI/CD workflow.

-### Create workflow templates

-You can create the following workflow templates with GitHub:

-**Teams Toolkit in Visual Studio Code**

-1. Create a new Teams app project using Teams Toolkit.

-1. Select **Teams Toolkit** icon :::image type="icon" source="images/api-add-icon-v4.PNG"::: from the left pane.

-1. Select **Add features**

- :::image type="content" source="images/add-feature-v4.png" alt-text="Adding feature":::

-1. Select **Add CI/CD Workflows**.

- :::image type="content" source="images/toolkit-ci-cd-workflow-v4.png" alt-text="Select CI/CD workflow":::

-1. Select an environment from the command prompt.

-1. Select **GitHub** as the CI/CD provider.

-1. Select at least one template from these options: CI, CD, Provision, or Publish to Teams.

-1. Open the template and customize the workflows that fit into your scenarios.

-1. Follow the README files under `.github/workflows` to set up the workflow in GitHub.

-**TeamsFx CLI**

-1. Enter `cd` to your Teams app project directory.

-2. Enter `teamsfx add cicd` command to start the interactive command process.

-3. Select an environment from the command prompt.

-4. Select **GitHub** as the CI/CD provider.

-5. Select at least one template from these options: CI, CD, Provision, or Publish to Teams.

-7. Open the template and customize the workflows that fit into your scenarios.

-8. Follow the README files under `.github/workflows` to set up the workflow in GitHub.

-> [!NOTE]

-> If you need to add additional workflow templates, you can follow the same procedure to create workflow template in Visual Studio Code or TeamsFx CLI.

-### Customize CI/CD workflow

-You can change or remove the test scripts to customize CI/CD workflow:

-1. By default, the CD workflow is triggered, when new commits are made to the `main` branch.

-1. Change the build scripts if necessary.

-1. Remove the test scripts as required.

-## Set up pipelines with Azure DevOps

-To set up pipelines with Azure DevOps for CI/CD:

-* Create workflow templates.

- * Visual Studio Code

- * TeamsFx CLI

-* Customize CI/CD workflow.

-### Create workflow templates

-You can create the following workflow templates with Azure DevOps:

-**Teams Toolkit in Visual Studio Code**

-1. Create a new Teams app project using Teams Toolkit.

-1. Select **Teams Toolkit** icon :::image type="icon" source="images/api-add-icon-v4.PNG"::: from the left pane.

-1. Select **Add CI/CD Workflows**.

-1. Select an environment from the command prompt.

-1. Select **Azure DevOps** as CI/CD provider.

-1. Select at least one template from these options: CI, CD, Provision, and Publish to Teams.

-1. Open the template and customize the workflows that fit into your scenarios.

-1. Follow the README files under `.azure/pipelines` to set up the workflow in Azure DevOps.

-**TeamsFx CLI**

-1. Enter `cd` to your Teams app project directory.

-2. Enter `teamsfx add cicd` command to start the interactive command process.

-3. Select an environment from the command prompt.

-4. Select **Azure DevOps** as CI/CD provider.

-5. Select at least one template from these options: CI, CD, Provision, or Publish to Teams.

-7. Open the template and customize the workflows that fit into your scenarios.

-8. Follow the README files under `.azure/pipelines` to set up the workflow in Azure DevOps.

-> [!NOTE]

-> If you need to add additional workflow templates, you can follow the same procedure to create workflow template in Visual Studio Code or TeamsFx CLI.

-### Customize CI workflow

-You can make the following changes for the script or workflow definition:

-1. Use npm build script or customize the way you build in the automation code.

-1. Use npm test script, which returns zero for success, and change the test commands.

-### Customize CD workflow

-You can make the following changes for the script or workflow definition:

-1. Ensure you have an npm build script or customize the way you build in the automation code.

-1. Ensure you have an npm test script, which returns zero for success or change the test commands.

-## Set up pipelines with Jenkins

-To set up pipelines with Jenkins for CI/CD:

-* Create workflow templates.

- * Visual Studio Code

- * TeamsFx CLI

-* Customize CI/CD workflow.

-### Create workflow templates

-You can create the following workflow templates with Jenkins:

-**Teams Toolkit in Visual Studio Code**

-1. Create a new Teams app project using Teams Toolkit.

-1. Select **Teams Toolkit** icon :::image type="icon" source="images/api-add-icon-v4.PNG"::: from the left pane.

-1. Select **Add CI/CD Workflows**.

-1. Select an environment from the command prompt.

-1. Select **Jenkins** as CI/CD provider.

-1. Select at least one template from these options: CI, CD, Provision, or Publish to Teams.

-1. Open the template and customize the workflows that fit into your scenarios.

-1. Follow the README files under `.jenkins/pipelines` to set up the workflow with Jenkins.

-**TeamsFx CLI**

-1. Enter `cd` to your Teams app project directory.

-2. Enter `teamsfx add cicd` command to start the interactive command process.

-3. Select an environment from the command prompt.

-4. Select **Jenkins** as CI/CD provider.

-5. Select at least one template from these options: CI, CD, Provision, or Publish to Teams.

-7. Open the template and customize the workflows that fit into your scenarios.

-8. Follow the README files under `.jenkins/pipelines` to set up the workflow with Jenkins.

-> [!NOTE]

-> If you need to add additional workflow templates, you can follow the same procedure to create workflow template in Visual Studio Code or TeamsFx CLI.

-### Customize CI workflow

-You can make the following changes to your project:

-1. Change how the CI flow is triggered. The default is to use the triggers of **pollSCM** when a new change is pushed into the **dev** branch.

-1. Ensure you have an npm build script or customize the way you build in the automation code.

-1. Ensure you have an npm test script, which returns zero for success or change the test commands.

-### Customize CD workflow

-Perform the following steps to customize the CD pipeline:

-1. Change the CD flow. The default is to use the triggers of `pollSCM` when a new change is pushed into the `main` branch.

-1. Change the build scripts if necessary.

-1. Remove the test scripts if you don't have tests.

-## Set up pipelines for other platforms

-You can follow the predefined listed example bash scripts to build and customize CI/CD pipelines on the other platforms:

-* [CI Scripts](https://github.com/OfficeDev/TeamsFx/blob/main/docs/cicd_insider/others-script-ci-template.sh)

-* [CD Scripts](https://github.com/OfficeDev/TeamsFx/blob/main/docs/cicd_insider/others-script-cd-template.sh)

-The scripts are based on a cross-platform TeamsFx command line tool [TeamsFx-CLI](https://www.npmjs.com/package/@microsoft/teamsfx-cli). You can install it with `npm install -g @microsoft/teamsfx-cli` and follow the [documentation](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/cli/user-manual.md) to customize the scripts.

-> [!NOTE]

->

-> * To enable `@microsoft/teamsfx-cli` running in CI mode, turn on `CI_ENABLED` by `export CI_ENABLED=true`. In CI mode, `@microsoft/teamsfx-cli` is friendly for CI/CD.

-> * To enable `@microsoft/teamsfx-cli` running in the non-interactive mode, set a global config with command: `teamsfx config set -g interactive false`. In the non-interactive mode, `@microsoft/teamsfx-cli` does not prompt for inputs.

-Ensure to set up Azure and Microsoft 365 credentials in your environment variables safely. For example, if you're using GitHub as your source code repository, see [GitHub Secrets](https://docs.github.com/en/actions/reference/encrypted-secrets).

-## Provision and deploy resources

-To provision and deploy resources targeting Azure inside CI/CD, you must create an Azure service principal for use.

-Perform the following steps to create Azure service principals:

-1. Register a Microsoft Entra application in single tenant.

-2. Assign a role to your Microsoft Entra application to access your Azure subscription. The `Contributor` role is recommended.

-3. Create a new Microsoft Entra application secret.

-> [!TIP]

-> Save your tenant id, application id (AZURE_SERVICE_PRINCIPAL_NAME), and the secret (AZURE_SERVICE_PRINCIPAL_PASSWORD) for future use.

-For more information, see [Azure service principals guidelines](/azure/active-directory/develop/howto-create-service-principal-portal). The following are the three ways to create service principals:

-* [Microsoft Azure portal](/azure/active-directory/develop/howto-create-service-principal-portal)

-* [Windows PowerShell](/azure/active-directory/develop/howto-authenticate-service-principal-powershell)

-* [Microsoft Azure CLI](/cli/azure/create-an-azure-service-principal-azure-cli)

-## Publish Teams app using Teams Developer Portal

-If there are any changes related to Teams app's manifest file, you can update the manifest and publish the Teams app again. To publish Teams app manually, you may leverage [Developer Portal for Teams](https://dev.teams.microsoft.com/home).

-Perform the following steps to publish your app:

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

-2. Import your app package in zip, select **App** > **Import app** > **Replace**.

-3. Select the target app in app list.

-4. Publish your app, select `Publish -> Publish to your org`.

-## See also

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

-* [Quick Start for GitHub Actions](https://docs.github.com/en/actions/quickstart#creating-your-first-workflow)

-* [Create your first Azure DevOps Pipeline](/azure/devops/pipelines/create-first-pipeline)

-* [Create your first Jenkins Pipeline](https://www.jenkins.io/doc/pipeline/tour/hello-world/)

-* [Manage your apps with the Developer Portal for Microsoft Teams](~/concepts/build-and-test/teams-developer-portal.md)

-Before you create your Teams app project, ensure that the prerequisites are in place. You must:

-TeamsFx helps to automate your development workflow while building Teams application. The tools and templates to set up CI/CD pipelines are create workflow templates and customize CI/CD workflow with GitHub, Azure DevOps, Jenkins, and other platforms. To provision resources, you can create Azure service principals and use the Provision pipeline or do it manually by using bicep files. To publish Teams app, you can use the Publish pipeline or do it manually by leveraging [Developer Portal for Teams](https://dev.teams.microsoft.com/home).

-|[Teams Toolkit for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension)| Visual Studio Code extension that helps you to develop Teams app and automation workflows for GitHub, Azure DevOps, and Jenkins. |

-|[Teams Toolkit for CLI](https://www.npmjs.com/package/@microsoft/teamsfx-cli) | Command Line tool that helps you to develop Teams app and automation workflows for GitHub, Azure DevOps, and Jenkins.|

- * **Client ID**: Fill in **1fec8e78-bce4-4aaf-ab1b-5451cc387264** which is Client ID for Teams on mobile and client.

-**2024 February**

-* ***February 28, 2024*** : [Extend a Teams meeting app to work with Outlook.](m365-apps/extend-m365-meeting-app.md)

-* ***February 28, 2024***: [Design Teams app lightbox view to emphasize important information.](concepts/design/design-teams-app-light-box-view.md)

-* ***February 15, 2024***: [Share to Teams from personal app or tab for mobile clients.](concepts/build-and-test/share-to-teams-from-personal-app-or-tab.md)

-* ***February 01, 2024***: [Use Adaptive Card-based Loop components to build collaborative experiences within Teams message extensions that work across Microsoft 365.](m365-apps/cards-loop-component.md)

-* ***February 01, 2024***: [Use application RSC permissions for chat scope.](graph-api/rsc/resource-specific-consent.md#rsc-permissions-for-a-chat-or-meeting)

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

-| 08/23/2022 | Share apps to the Teams meeting stage in mobile. | Build apps for Teams meetings and calls > [Enable and configure apps for meetings](/microsoftteams/platform/apps-in-teams-meetings/enable-and-configure-your-app-for-teams-meetings) |

-* ***February 16,2024***: The feedback option, **This page**, located in the **Submit and view feedback** section of the article, will be deprecated by May 31, 2024. You can select :::image type="icon" source="assets/icons/feedback-icon.png" border="false"::: **Feedback** in the upper-right corner of the article to submit feedback.