| Service | Microsoft Docs article | Related commit history on GitHub | Change details |
|---|---|---|---|
| platform | Create A Bot Commands Menu | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/create-a-bot-commands-menu.md | A prerequisite to create a command menu for your bot is that you must edit an ex **To create a command menu for your bot using App Studio** 1. Open Teams and select **Apps** from the left pane. In the **Apps** page, search for **App Studio**, and select **Open**.- > [!NOTE] - > If you don't have **App Studio**, you can download it. For more information, see [installing App Studio](~/concepts/build-and-test/app-studio-overview.md#installing-app-studio). - + > [!WARNING] > If you have been using App Studio, we recommend that you'd try the Developer Portal to configure, distribute, and manage your Teams apps. App Studio will be deprecated by June 30, 2022 - :::image type="content" source="/media/AppStudio.png" alt-text="Installing app studio"lightbox="media/AppStudio.png"border="true"::: + :::image type="content" source="/media/AppStudio.png" alt-text="Installing app studio"lightbox="media/AppStudio.png"border="true"::: 2. In **App Studio**, select the **Manifest editor** tab. If you do not have an existing app package, you can create or import an existing app. For more information, see [update an app package](~/get-started/deploy-csharp-app-studio.md). |
| platform | Teamsfx Collaboration | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/TeamsFx-collaboration.md | Title: Collaborate on TeamsFx Project using Teams Toolkit -description: Collaborate on TeamsFx Project using Teams Toolkit +description: Collaborate on TeamsFx Project using Teams Toolkit ms.localizationpriority: medium Last updated 11/29/2021 # Collaborate on Teams project using Teams Toolkit -Multiple developers can work together to debug, provision and deploy for the same TeamsFx project, but it requires manually setting the right permissions of Teams App and Microsoft Azure Active Directory (Azure AD) App.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. +Multiple developers can work together to debug, provision and deploy for the same TeamsFx project, but it requires manually setting the right permissions of Teams App and Microsoft Azure Active Directory (Azure AD) App. 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. ## Prerequisites -* Account prerequisites +* Microsoft 365 subscription +* Azure with valid subscription + + For more information on different accounts, see [prepare accounts to build Teams app](accounts.md). - To provision cloud resources, you must have the following accounts. For more information, see, [prepare accounts to build Teams app](accounts.md). -- * Microsoft 365 subscription - * Azure with valid subscription --* [Install Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension) version v3.0.0+. +* [Install Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension) version v3.0.0+ > [!TIP]-> Ensure you have a Teams app project opened in Microsoft Visual Studio code. +> Ensure you have a Teams app project opened in Visual Studio Code. ## Collaborate with other developers -The following list guides us to understand the collaboration process and its limitation: +The following lists guide us to understand the collaboration process and its limitation: ++* As project owner ++ > [!NOTE] + > Before adding collaborators for an environment, project owner needs to [provision](provision.md) the project first. -### As project owner + 1. In **ENVIRONMENT** section on Teams Toolkit, select **collaborators**. It displays the options **Add Microsoft 365 Teams App (with Azure AD App) Owners** and **List Microsoft 365 Teams App (with Azure AD App) Owners** as shown in the following images: -> [!NOTE] -> Before adding collaborators for an environment, project owner needs to [provision](provision.md) the project first. + :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/add collaborators.png" alt-text="collaborators"::: -* In **ENVIRONMENT** section on Teams Toolkit, select **collaborators**. It displays the options **Add Microsoft 365 Teams App (with Azure AD App) Owners** and **List Microsoft 365 Teams App (with Azure AD App) Owners** as shown in the following images: + 2. Select **Add Microsoft 365 Teams App (with Azure AD App) Owners** and add other Microsoft 365 account email address as collaborator. The account to be added must be on the same tenant as project owner for remote debug as shown in the image: - :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/add collaborators.png" alt-text="collaborators"::: + :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/manifest preview-1.png" alt-text="add envi"::: -* Select **Add Microsoft 365 Teams App (with Azure AD App) Owners** and add other Microsoft 365 account email address as collaborator. The account to be added must be on the same tenant as project owner for remote debug as shown in the image: + 3. To view collaborators in current environment, select **List Microsoft 365 Teams App (with Azure AD App) Owners**, then collaborators are listed in the output channel as shown in following image: - :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/manifest preview-1.png" alt-text="add envi"::: + :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/list of collaborators.png" alt-text="list"::: -* To view collaborators in current environment, select **List Microsoft 365 Teams App (with Azure AD App) Owners**, then collaborators are listed in the output channel as shown in following image: + 4. Push the project to GitHub - :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/list of collaborators.png" alt-text="list"::: + > [!NOTE] + > The newly added collaborators do not receive any notification. The Project owner needs to notify collaborator. -* Push the project to GitHub. +* As project collaborator -> [!NOTE] -> Newly added collaborator doesn't receive any notification. Project owner needs to notify 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. -### As project collaborator + > [!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&branch). -* Clone the project from GitHub. -* Log in to Microsoft 365 account. -* Log in to Azure account, which has contributor permission for all the Azure resources being used in this project. -* To preview your Teams app, deploy the project to remote. -* Launch remote to have a preview of the Teams app. +### Limitations -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&branch). +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: -> [!NOTE] -> Collaborators must log in using the account added by project owner, which is under the same tenant with project owner. +* Using Developer Portal -### Limitation + * 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 -You can't remove collaborators directly from Teams Toolkit extension. Perform the following steps to remove collaborators manually: +* Using Azure Active Directory - 1. Go to Teams Developer Portal and select your Teams app by name or app ID. - 2. Select **Owners** from left panel. - 3. Select and remove the collaborator. - 4. Go to [Azure Active Directory](https://ms.portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps), select **App registration** from left panel, and find your Azure AD App. - 5. Select **Owners** from left panel in Azure AD App management page. - 6. Select and remove the collaborator. + * Go to [Azure Active Directory](https://ms.portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps), select **App registration** from left panel, and find your Azure AD App + * Select **Owners** from left panel in Azure AD App management page + * Select and remove the collaborator -> [!NOTE] -> -> * Collaborator added to your project will not receive any notification. Project owner needs to notify collaborator offline. -> * Azure related permissions must be set manually by Azure subscription administrator on Microsoft Azure portal. Azure account must have contributor role for the subscription so that developers can work together to provision, and deploy TeamsFx project. + > [!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 |
| platform | Teamsfx Multi Env | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/TeamsFx-multi-env.md | Last updated 11/29/2021 You can perform the following with the multiple 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 +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 behaviors for multiple environments such as enable telemetry in production environment, however disable it in development environment +2. **Manage app behaviors in different environments**: You can set up different behaviors for multiple environments such as enable telemetry in production environment, however disable it in development environment. ## Prerequisite * Install the [latest version of Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension). > [!TIP]-> Ensure you have Teams app project opened in Microsoft Visual Studio code. +> Ensure you have Teams app project opened in Visual Studio code. ## Create a new environment After creating a new project, Teams Toolkit by default creates: **To add another remote environment**: -1. Select the **Teams** icon in the sidebar -2. Select **+Teams: Create new environment** under the Environment section as shown in the following image: +1. Select the **Teams** :::image type="content" source="../assets/images/teams-toolkit-v2/add-sso/teams-toolkit-sidebar-icon.png" alt-text="sso add sidebar"::: from left navigation bar. +2. Select **+Teams: Create new environment** under the **Environment** section as shown in the following image: :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/create new env.png" alt-text="create"::: You can select the target environment for all environment-related operations. Th ## Project folder structure -After creating the project, you can view the project folders and files in the explorer area of Visual Studio Code. Besides the custom codes, some files are used by Teams Toolkit to maintain the config, state, and template of the app. The following list provides files and outlines their relationship with multiple environments. +After creating the project, you can view the project folders and files under **Explorer** in VS Code. Besides the custom codes, Teams Toolkit uses some files to maintain the config, state, and template of the app. The following list provides files and outlines their relationship with multiple environments. -* `.fx/configs`: configure files that user can customize for the Teams app - * `config.<envName>.json`: configuration file for per environment - * `azure.parameters.<envName>.json`: per environment parameters file for Azure bicep provision - * `projectSettings.json`: global project settings , which apply to all environments -* `.fx/states`: provision result that is generated by the Toolkit - * `state.<envName>.json`: per-environment provision output file - * `<env>.userdata`: per-environment sensitive user data for the provision output +* `.fx/configs`: Configure files that user can customize for the Teams app + * `config.<envName>.json`: Configuration file per-environment + * `azure.parameters.<envName>.json`: Parameters file for Azure bicep provision per-environment + * `projectSettings.json`: Global project settings that apply to all environments +* `.fx/states`: Provision result that is generated by the Toolkit + * `state.<envName>.json`: Provision output file per-environment + * `<env>.userdata`: User data for the provision output per-environment * `templates`- * `appPackage`: app manifest template files + * `appPackage`: App manifest template files * `azure`: Bicep template files ## Customize resource provision The following table lists the common scenarios for customized resource provision ## Scenarios -There are four scenarios to customized the resources provision in different environments. +You can see the following scenarios to customize the resources provision in different environments. <br> <br><details>-<summary><b>Scenario 1: Customize Teams app name for different environment +<summary><b>Scenario 1: Customize Teams app name for different environment </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`. +You can set the Teams app name to `myapp(dev)` for the default environment `dev` and `myapp(staging)` for the staging environment `staging`. -Perform the following steps for customization: +Follow the steps for customization: -1. Open config file `.fx/configs/config.dev.json` -2. Update the property of *manifest > appName > short* to `myapp(dev)` +1. Open config file `.fx/configs/config.dev.json`. +2. Update the property of *manifest > appName > short* to `myapp(dev)`. The updates to `.fx/configs/config.dev.json` are as follows: Perform the following steps for customization: } ``` -3. Create a new environment and name it `staging` if it doesn't exist -4. Open config file `.fx/configs/config.staging.json` -5. Update the same property `myapp(staging)` -6. Run provision command on `dev` and `staging` environment to update the app name in remote environments. To run provision command with Teams Toolkit, see [provision](provision.md#provision-using-teams-toolkit) -</details> -<br> +3. Create a new environment and name it `staging` if it doesn't exist. +4. Open config file `.fx/configs/config.staging.json`. +5. Update the same property `myapp(staging)`. +6. Run provision command on `dev` and `staging` environment to update the app name in remote environments. To run provision command with Teams Toolkit, see [provision](provision.md#provision-using-teams-toolkit). +</details> <details> <summary><b>Scenario 2: Customize Teams app description for different environment</b></summary> -In this scenario, you will learn how to set different Teams app description for the different environments: +You can set different Teams app description for the different environments: * 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` -Perform the following steps for customization: +Follow the steps for customization: -1. Open config file `.fx/configs/config.dev.json` -2. Add new property of *manifest > description > short* with value `my app description for dev` +1. Open config file `.fx/configs/config.dev.json`. +2. Add new property of *manifest > description > short* with value `my app description for dev`. The updates to `.fx/configs/config.dev.json` are as follows: Perform the following steps for customization: } ``` -3. Create a new environment and name it `staging` if it doesn't exist -4. Open config file `.fx/configs/config.staging.json` -5. Add the same property to `my app description for staging` -6. Open Teams app manifest template `templates/appPackage/manifest.template.json` -7. Update the property `description > short` to use the **variable** defined in configure files with mustache syntax `{{config.manifest.description.short}}` +3. Create a new environment and name it `staging` if it doesn't exist. +4. Open config file `.fx/configs/config.staging.json`. +5. Add the same property to `my app description for staging`. +6. Open Teams app manifest template `templates/appPackage/manifest.template.json`. +7. Update the property `description > short` to use the **variable** defined in configure files with mustache syntax `{{config.manifest.description.short}}`. The updates to `manifest.template.json` are as follows: Perform the following steps for customization: } ``` -8. Run provision command against `dev` and `staging` environment to update the app name in remote environments. To run provision command with Teams Toolkit, see [provision](provision.md#provision-using-teams-toolkit) +8. Run provision command against `dev` and `staging` environment to update the app name in remote environments. </details>-<br> <details> <summary><b>Scenario 3: Customize Teams app description for all environments</b></summary> -In this scenario, you will learn how to set the description of Teams app to `my app description` for all the environments. +You can set the description of Teams app to `my app description` for all the environments. As the Teams app manifest template is shared across all environments, we can update the description value in it for our target: -1. Open Teams app manifest template `templates/appPackage/manifest.template.json` -2. Update the property `description > short` with **hard-coded string** `my app description` +1. Open Teams app manifest template `templates/appPackage/manifest.template.json`. +2. Update the property `description > short` with **hard-coded string** `my app description`. The updates to `manifest.template.json` are as follows: As the Teams app manifest template is shared across all environments, we can upd ``` -3. Run the provision command against **all** environment to update the app name in remote environments. To run provision command with Teams Toolkit, see [provision](provision.md#provision-using-teams-toolkit). +3. Run the provision command against **all** environment to update the app name in remote environments. -<br></details> -<br> +</details> <details> <br><summary><b>Scenario 4: customize Azure resources for different environment</b></summary>-You can customize Azure resources for each environment, for example specify Azure Function name, by editing the environment corresponding to -fx/configs/azure.parameters.{env}.json. file. +You can customize Azure resources for each environment, for example edit the environment corresponding to +fx/configs/azure.parameters.{env}.json file to specify Azure Function name. For more information on Bicep template and parameter files, see [provision cloud resources](provision.md) </details> |
| platform | Accounts | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/accounts.md | Last updated 03/14/2022 # Prepare accounts to build Teams apps -To create a Teams app and upload, you need to prepare the following accounts: +To create and upload a Teams app, you need to prepare the following accounts: -* [Microsoft 365 account with valid subscription.](accounts.md#microsoft-365-account) -* [Azure account to host the backend resources on Azure](accounts.md#azure-account-to-host-backend-resources). +* [Microsoft 365 account with valid subscription](accounts.md#microsoft-365-account) +* [Azure account to host the backend resources on Azure](accounts.md#azure-account-to-host-backend-resources) ## Microsoft 365 account -To create a Microsoft 365 account, sign up for a Microsoft 365 developer program subscription. The subscription is free for 90 days and continues to renew as long as you're using it for development activity. +To create a Microsoft 365 account, sign-up for a Microsoft 365 developer program subscription. The subscription is free for 90 days and continues to renew as long as you're using it for development activity. -If you have a Visual Studio Enterprise or Professional subscription, both programs include a free Microsoft 365 [developer subscription](https://aka.ms/MyVisualStudioBenefits). It's active as long as your Visual Studio subscription is active. For more information, see [Microsoft 365 developer subscription](https://developer.microsoft.com/microsoft-365/dev-program). +If you have a Visual Studio Enterprise or Professional subscription, both programs include free Microsoft 365 [developer subscription](https://aka.ms/MyVisualStudioBenefits). It's active as long as your Visual Studio subscription is active. For more information, see [Microsoft 365 developer subscription](https://developer.microsoft.com/microsoft-365/dev-program). ### Microsoft 365 developer program -To get a free Teams developer account, join the Microsoft 365 developer program and perform the following steps: +To get a free Teams developer account, join the Microsoft 365 developer program and follow the steps: 1. Go to the [Microsoft 365 developer program](https://developer.microsoft.com/microsoft-365/dev-program). 2. Select **Join Now**. 3. Select **Set up E5 subscription**. 4. Set up your administrator account. - The following image is shown after you complete the subscription: + You can see the following image after the completion of the subscription: :::image type="content" source="./images/m365-developer-program.png" alt-text="Diagram that shows Microsoft 365 program"::: ### Microsoft 365 developer account types -You can sign up for the developer program by using one of the following account types: +You can sign-up for the developer program by using one of the following account types: -- **Microsoft account for personal use**+* **Microsoft account for personal use** - The Microsoft account provides you access to Microsoft products and cloud services, such as Outlook, Messenger, OneDrive, MSN, Xbox Live, or Microsoft 365. You can sign up for an Outlook.com mailbox to create a Microsoft account, which can be used to access consumer-related Microsoft cloud services or Azure. + The account provides access to Microsoft products and cloud services, such as Outlook, Messenger, OneDrive, MSN, Xbox Live, or Microsoft 365. You can sign-up for an Outlook.com mailbox to create a Microsoft account, which can be used to access consumer-related Microsoft cloud services or Azure. -- **Microsoft work account for business**+* **Microsoft work account for business** - This account provides access to all small, medium, and enterprise business-level Microsoft cloud services, such as Azure, Microsoft Intune, or Microsoft 365. When you sign up to one of these services as an organization, a cloud-based directory is automatically provisioned in Microsoft Azure Active Directory (Azure AD) to represent your organization. + The account provides access to all small, medium, and enterprise business-level Microsoft cloud services, such as Azure, Microsoft Intune, or Microsoft 365. When you sign-up to one of these services as an organization, a cloud-based directory is automatically provisioned in Azure AD to represent your organization. -- **Visual Studio user id**+* **Visual Studio user ID** - The user ID created to use Visual Studio Professional or Enterprise subscription can be used to join the developer program within the Visual Studio Gallery to avail full benefits as a Visual Studio subscriber. + The user ID for Visual Studio Professional or Enterprise subscription can be used to join the developer program within the Visual Studio Gallery to avail full benefits as a Visual Studio subscriber. ## Azure account to host backend resources Azure account is optional if your existing application is hosted on other cloud If you want to host your application related resources or access resources within Azure, you can [create a free account](https://azure.microsoft.com/free/) before you begin. Alternatively you can select to host your backend resources using another cloud provider, or on your own servers if they're available from the public domain. -## Teams custom app upload or sideload permission +## Upload custom app > [!IMPORTANT] > After creating the app, you must load your app in Teams without distributing it. This process is known as **sideloading**. If you want to host your application related resources or access resources withi * **Verify sideloading permission using Visual Studio Code** 1. Open **Visual Studio Code**.- 1. Select **Teams Toolkit** from the left panel. If you're unable to see the option ensure that you have installed Teams Toolkit extension. - 1. Select **Accounts** and log in to your Microsoft 365 account. - 1. Check whether you can view the option **Sideloading enabled** as shown in the following image: + 2. Select **Teams Toolkit** from the left panel. If you're unable to see the option ensure that you have installed Teams Toolkit extension. + 3. Select **Accounts** and log in to your Microsoft 365 account. + 4. Check whether you can view the option **Sideloading enabled** as shown in the following image: :::image type="content" source="../assets/images/teams-toolkit-v2/sideloading.png" alt-text="Enable sideloading" border="true"::: If you want to host your application related resources or access resources withi 2. Select **Apps** in left panel. 3. Select **Publish an app**. - :::image type="content" source="../assets/images/teams-toolkit-v2/publish.png" alt-text="Publish an app" border="true"::: + :::image type="content" source="../assets/images/teams-toolkit-v2/publish2.png" alt-text="Publish an app" border="true"::: 4. Check whether you can see the option **Upload a custom app** as shown in the following image: - :::image type="content" source="../assets/images/teams-toolkit-v2/upload.png" alt-text="Upload a custom app" border="true"::: + :::image type="content" source="../assets/images/teams-toolkit-v2/upload2.png" alt-text="Upload a custom app" border="true"::: If you are unable to view the option **Upload a custom app,** then it indicates that you don't have the required permission for sideloading.+ * For a tenant admin, enable the sideloading setting for your tenant or organization in the Teams admin center. * If you aren't a tenant admin, you'll need to contact your tenant admin to enable sideloading. -### Upload your custom app +* **Upload custom app using admin center** -> [!IMPORTANT] -> To turn on custom app uploading or sideloading for your developer tenant, you must be the admin for your tenant. + > [!IMPORTANT] + > To turn on custom app uploading or sideloading for your developer tenant, you must be the admin for your tenant. -**To upload the custom app** + Perform the following steps to upload the custom app: -1. Sign in to [Microsoft 365 admin center](https://admin.microsoft.com/Adminportal/Home?source=applauncher#/homepage#/) with your admin credentials. + 1. Sign-in to [Microsoft 365 admin center](https://admin.microsoft.com/Adminportal/Home?source=applauncher#/homepage#/) with your admin credentials. -2. Select **Show All** > **Teams**. + 2. Select **Show All** > **Teams**. - :::image type="content" source="../assets/images/teams-toolkit-v2/5.png" alt-text="show all" border="true"::: + :::image type="content" source="../assets/images/teams-toolkit-v2/5.png" alt-text="show all" border="true"::: - > [!Note] - > It can take **up to 24 hours** for the **Teams** option to appear. You can [upload your custom app to a Teams environment](/microsoftteams/upload-custom-apps) for testing and validation. + > [!Note] + > It can take **up to 24 hours** for the **Teams** option to appear. You can [upload your custom app to a Teams environment](/microsoftteams/upload-custom-apps) for testing and validation. -3. Navigate to **Teams apps** > **Setup policies**. + 3. Go to **Teams apps** > **Setup policies**. - :::image type="content" source="../assets/images/teams-toolkit-v2/3.png" alt-text="set policies"::: + :::image type="content" source="../assets/images/teams-toolkit-v2/3.png" alt-text="set policies"::: -4. Set toggle **Upload custom apps** to **On** position. + 4. Set toggle **Upload custom apps** to **On** position. - :::image type="content" source="../assets/images/teams-toolkit-v2/4.png" alt-text="toggle"::: + :::image type="content" source="../assets/images/teams-toolkit-v2/4.png" alt-text="toggle"::: -5. Select **Save**. + 5. Select **Save**. - > [!Note] - > It can take up to 24 hours for sideloading to become active. In the meantime, you can use **upload for your tenant** to test your app. To upload the .zip package file of the app, see [Upload custom apps](/microsoftteams/teams-app-setup-policies). + > [!Note] + > It can take up to 24 hours for sideloading to become active. In the meantime, you can use **upload for your tenant** to test your app. To upload the .zip package file of the app, see [Upload custom apps](/microsoftteams/teams-app-setup-policies). For more information, see [Manage custom app policies and settings in Teams](/microsoftteams/teams-custom-app-policies-and-settings) and [Manage app setup policies in Teams](/microsoftteams/teams-app-setup-policies). For more information, see [Manage custom app policies and settings in Teams](/mi * [Provision cloud resources](provision.md) * [Deploy Teams app to the cloud](deploy.md) * [Publish your Teams app](../concepts/deploy-and-publish/appsource/publish.md)-* [Manage multiple environments](TeamsFx-multi-env.md) +* [Manage multiple environments](TeamsFx-multi-env.md) |
| platform | Debug Background Process | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/debug-background-process.md | -# Debug background process +# Debug background processes -The local debug workflow involves the `.vscode/launch.json` and `.vscode/tasks.json` files to configure the debugger in VS Code, then the VS Code launches the debuggers, and Microsoft Edge or Chrome debugger launches a new browser instance as follows: +The local debug workflow involves the `.vscode/launch.json` and `.vscode/tasks.json` files to configure the debugger in Visual Studio Code (VS Code). The VS Code launches the debuggers, and Microsoft Edge or Google Chrome launches a new browser instance as follows: 1. The `launch.json` file configures the debugger in VS Code. The local debug workflow involves the `.vscode/launch.json` and `.vscode/tasks.j 3. VS Code then launches the debuggers specified in the compound configurations, such as **Attach to Bot**, **Attach to Backend**, **Attach to Frontend**, and **Launch Bot**. -4. Microsoft Edge or Chrome debugger launches a new browser instance and opens a web page to load Teams client. +4. Microsoft Edge or Google Chrome launches a new browser instance and opens a web page to load Teams client. ## Prerequisites Teams Toolkit checks the following prerequisites during the debug process: |Bot | 14, 16 (recommended)| |Message extension | 14, 16 (recommended) | -* Microsoft 365 account with valid credentials, the Teams toolkit prompts you to sign in to Microsoft 365 account, if you haven't signed in. -+* Microsoft 365 account with valid credentials, the Teams Toolkit prompts you to sign-in to Microsoft 365 account, if you haven't signed in. * Custom app uploading or sideloading for your developer tenant is turned on, if not then the local debug terminates.--* Ngrok binary version 2.3 is applicable for bot and message extension, if Ngrok isn't installed or the version doesn't match the requirement, the Teams toolkit installs Ngrok NPM package `ngrok@4.2.2` in `~/.fx/bin/ngrok`. The Ngrok binary is managed by Ngrok NPM package in `/.fx/bin/ngrok/node modules/ngrok/bin`. --* Azure Functions Core Tools version 4, if Azure Functions Core Tools isn't installed or the version doesn't match the requirement, the Teams Toolkit installs Azure Functions Core Tools NPM package, azure-functions-core-tools@3 for **Windows** and for **MacOs** in `~/.fx/bin/func`. The Azure Functions Core Tools NPM package in `~/.fx/bin/func/node_modules/azure-functions-core-tools/bin` manages Azure Functions Core Tools binary. For Linux, the local debug terminates. -+* Ngrok binary version 2.3 is applicable for bot and message extension, if Ngrok isn't installed or the version doesn't match the requirement, the Teams Toolkit installs Ngrok NPM package `ngrok@4.2.2` in `~/.fx/bin/ngrok`. Ngrok NPM package in `/.fx/bin/ngrok/node modules/ngrok/bin` manages the Ngrok binary. +* Azure Functions Core Tools version 3, if Azure Functions Core Tools isn't installed or the version doesn't match the requirement, the Teams Toolkit installs Azure Functions Core Tools NPM package, azure-functions-core-tools@3 for **Windows** and for **macOs** in `~/.fx/bin/func`. The Azure Functions Core Tools NPM package in `~/.fx/bin/func/node_modules/azure-functions-core-tools/bin` manages Azure Functions Core Tools binary. For Linux, the local debug terminates. +* .NET Core SDK version applicable for Azure Functions, if .NET Core SDK isn't installed or the version doesn't match the requirement, the Teams Toolkit installs .NET Core SDK for Windows and MacOS in `~/.fx/bin/dotnet`. For Linux, the local debug terminates. +* Ngrok binary version 2.3 is applicable for bot and message extension, if Ngrok isn't installed or the version doesn't match the requirement, the Teams Toolkit installs Ngrok NPM package `ngrok@4.2.2` in `~/.fx/bin/ngrok`. The Ngrok binary is managed by Ngrok NPM package in `/.fx/bin/ngrok/node modules/ngrok/bin`. +* Azure Functions Core Tools version 4, if Azure Functions Core Tools isn't installed or the version doesn't match the requirement, the Teams Toolkit installs Azure Functions Core Tools NPM package, azure-functions-core-tools@3 for **Windows** and for **MacOs** in `~/.fx/bin/func`. The Azure Functions Core Tools NPM package in `~/.fx/bin/func/node_modules/azure-functions-core-tools/bin` manages Azure Functions Core Tools binary. For Linux, the local debug terminates. * .NET Core SDK version applicable for Azure Functions, if .NET Core SDK isn't installed or the version doesn't match the requirement, the Teams Toolkit installs .NET Core SDK for Windows and MacOS in `~/.fx/bin/dotnet`. For Linux, the local debug terminates. The following table lists the .NET Core versions: Teams Toolkit checks the following prerequisites during the debug process: |Windows, macOs (x64), and Linux | **3.1 (recommended)**, 5.0, 6.0 | |macOs (arm64) |6.0 | -* Development certificate, if the development certificate for localhost isn't installed for tab in Windows or MacOS, the Teams toolkit prompts you to install it. -+* Development certificate, if the development certificate for localhost isn't installed for tab in Windows or MacOS, the Teams Toolkit prompts you to install it. * Azure Functions binding extensions defined in `api/extensions.csproj`, if Azure Functions binding extensions isn't installed, the Teams Toolkit installs Azure Functions binding extensions.- * NPM packages, applicable for tab app, bot app, message extension app, and Azure Functions. If NPM isn't installed, the Teams Toolkit installs all NPM packages.- * Bot and message extension, the Teams Toolkit starts Ngrok to create an HTTP tunnel for bot and message extension.- * Ports available, if tab, bot, message extension, and Azure Functions ports are unavailable, the local debug terminates. The following table lists the ports available for components: Teams Toolkit checks the following prerequisites during the debug process: |Tab with Azure functions | Node.js LTS versions 10, 12, **14 (recommended)** |The local debug terminates, if Node.js isn't installed or the version doesn't match the requirement.| |Bot | Node.js LTS versions 10, 12, **14 (recommended)**, 16|The local debug terminates, if Node.js isn't installed or the version doesn't match the requirement.| |Message extension | Node.js LTS versions 10, 12, **14 (recommended)**, 16 |The local debug terminates, if Node.js isn't installed or the version doesn't match the requirement.|-|Sign in to Microsoft 365 account | Microsoft 365 credentials |Teams toolkit prompts you to sign in to Microsoft 365 account, if you haven't signed in. | -|Bot, message extension | Ngrok version 2.3| ΓÇó If Ngrok isn't installed or the version doesn't match the requirement, the Teams toolkit installs Ngrok NPM package `ngrok@4.2.2` in `~/.fx/bin/ngrok`. </br> ΓÇó The Ngrok binary is managed by Ngrok NPM package in `/.fx/bin/ngrok/node modules/ngrok/bin`.| -|Azure functions | Azure Functions Core Tools version 3| ΓÇó If Azure Functions Core Tools isn't installed or the version doesn't match the requirement, the Teams toolkit installs Azure Functions Core Tools NPM package, azure-functions-core-tools@3 for **Windows** and for **macOs** in `~/.fx/bin/func`. </br> ΓÇó The Azure Functions Core Tools NPM package in `~/.fx/bin/func/node_modules/azure-functions-core-tools/bin` manages Azure Functions Core Tools binary. For Linux, the local debug terminates.| -|Azure functions |.NET Core SDK version|ΓÇó If .NET Core SDK isn't installed or the version doesn't match the requirement, the toolkit installs .NET Core SDK for Windows and macOS in `~/.fx/bin/dotnet`.</br> ΓÇó For Linux, the local debug terminates.| -|Azure functions | Azure functions binding extensions defined in `api/extensions.csproj`| If Azure functions binding extensions isn't installed, the toolkit installs Azure functions binding extensions.| -|NPM packages| NPM packages for tab app, bot app, message extension app, and Azure functions|If NPM isn't installed, the toolkit installs all NPM packages.| +|Sign-in to Microsoft 365 account | Microsoft 365 credentials |Teams Toolkit prompts you to sign-in to Microsoft 365 account, if you haven't signed in. | +|Bot, message extension | Ngrok version 2.3| ΓÇó If Ngrok isn't installed or the version doesn't match the requirement, the Teams Toolkit installs Ngrok NPM package `ngrok@4.2.2` in `~/.fx/bin/ngrok`. </br> ΓÇó The Ngrok binary is managed by Ngrok NPM package in `/.fx/bin/ngrok/node modules/ngrok/bin`.| +|Azure functions | Azure Functions Core Tools version 3| ΓÇó If Azure Functions Core Tools isn't installed or the version doesn't match the requirement, the Teams Toolkit installs Azure Functions Core Tools NPM package, azure-functions-core-tools@3 for **Windows** and for **macOs** in `~/.fx/bin/func`. </br> ΓÇó The Azure Functions Core Tools NPM package in `~/.fx/bin/func/node_modules/azure-functions-core-tools/bin` manages Azure Functions Core Tools binary. For Linux, the local debug terminates.| +|Azure functions |.NET Core SDK version|ΓÇó If .NET Core SDK isn't installed or the version doesn't match the requirement, the Toolkit installs .NET Core SDK for Windows and macOS in `~/.fx/bin/dotnet`.</br> ΓÇó For Linux, the local debug terminates.| +|Azure functions | Azure functions binding extensions defined in `api/extensions.csproj`| If Azure functions binding extensions isn't installed, the Toolkit installs Azure functions binding extensions.| +|NPM packages| NPM packages for tab app, bot app, message extension app, and Azure functions|If NPM isn't installed, the Toolkit installs all NPM packages.| |Bot and message extension | Ngrok |Toolkit starts Ngrok to create a HTTP tunnel for bot and message extension. | > [!NOTE] Use the following .NET Core versions: |macOs (arm64) |6.0 | > [!NOTE]-> If the development certificate for localhost isn't installed for tab in Windows or MacOS, the Teams toolkit prompts you to install it.</br> --> +> If the development certificate for localhost isn't installed for tab in Windows or MacOS, the Teams Toolkit prompts you to install it.</br> --> When you select **Start Debugging (F5)**, the Teams Toolkit output channel displays the progress and result after checking the prerequisites. :::image type="content" source="../assets/images/teams-toolkit-v2/debug/prerequisites-debugcheck.png" alt-text="prerequisites"::: -## Register and configure your Teams app +## Register and configure Teams app In the set-up process, Teams Toolkit prepares the following registrations and configurations for your Teams app: In the set-up process, Teams Toolkit prepares the following registrations and co 4. Configures API permissions. Adds Microsoft Graph permission to **User.Read**. The following table lists the configuration of the authentication:- + | Project type | Redirect URIs for web | Redirect URIs for single-page application | | | | | | Tab | `https://localhost:53000/auth-end.html` | `https://localhost:53000/auth-end.html?clientId={appId>}` | | Bot or message extension | `https://ngrok.io/auth-end.html` | NA | - The following table lists the configurations of Microsoft 365 client application with the client Ids: - - | Microsoft 365 client application | Client ID | + The following table lists the configurations of Microsoft 365 client application with the client IDs: ++ | Microsoft 365 client application | Client ID | | | | | Teams desktop, mobile | 1fec8e78-bce4-4aaf-ab1b-5451cc387264 | | Teams web | 5e3ce6c0-2b1f-4285-8d4b-75ee78787346 | In the set-up process, Teams Toolkit prepares the following registrations and co | Outlook desktop | d3590ed6-52b3-4102-aeff-aad2292ab01c | | Outlook Web Access | 00000002-0000-0ff1-ce00-000000000000 | | Outlook Web Access | bc59ab01-8403-45c6-8796-ac3ef710b3e3 |- + ### Registers and configures bot For tab app or message extension app: For tab app or message extension app: 1. Registers a bot in [Microsoft Bot Framework](https://dev.botframework.com/) using the Azure AD application. -1. Adds Microsoft Teams channel. +1. Adds Teams channel. 1. Configures messaging endpoint as `https://{ngrokTunnelId}.ngrok.io/api/messages`. For tab app or message extension app: Registers a Teams app in [Developer](https://dev.teams.microsoft.com/home) using the manifest template in `templates/appPackage/manifest.template.json`. -After registering and configuring the app, local debug files generates. +After registration and configuration of the app, local debug files generates. ## Take a tour of your app source code -You can view the project folders and files in the Explorer area of VS Code after the Teams Toolkit registers and configures your app. The following table lists the local debug files and the configuration types: +You can view the project folders and files under **Explorer** in VS Code after the Teams Toolkit registers and configures your app. The following table lists the local debug files and the configuration types: | Folder name| Contents| Debug configuration type | | | | | | `.fx/configs/config.local.json` | Local debug configuration file | The values of each configuration generate and saves during local debug. |-| `templates/appPackage/manifest.template.json` | Teams app manifest template file for local debug | The placeholders in the file resolve during local debug. | -| `tabs/.env.teams.local` | Environment variables file for tab | The values of each environment variable generate and saves during local debug. | +| `templates/appPackage/manifest.template.json` | Teams app manifest template file for local debug | The placeholders in the file during local debug. | +| `tabs/.env.teams.local` | Environment variables file for tab | The values of each environment variable generate and saves during local debug. | | `bot/.env.teamsfx.local` | Environment variables file for bot and message extension| The values of each environment variable generate and saves during local debug. | | `api/.env.teamsfx.local` | Environment variables file for Azure Functions | The values of each environment variable generate and saves during local debug. | ## See also -[Debug your Teams app using Teams Toolkit](debug-local.md) +* [Debug your Teams app using Teams Toolkit](debug-local.md) +* [Use Teams Toolkit to provision cloud resources](provision.md) +* [Deploy to the cloud](deploy.md) +* [Preview and customize Teams app manifest](TeamsFx-preview-and-customize-app-manifest.md) |
| platform | Debug Local | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/debug-local.md | Teams Toolkit helps you to debug and preview your Teams app locally. Debug is th * [Hot reload](#hot-reload) * [Stop debugging](#stop-debugging) - During the debug process, Teams Toolkit automatically starts app services, launches debuggers, and sideloads the Teams app. The 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. ## Prerequisite Install the [latest version of Teams Toolkit](https://marketplace.visualstudio.c ## Key features of Teams Toolkit -#### Start debugging +The following list provides the key features of Teams Toolkit: ++### Start debugging -You can perform single operation, select **F5** to start debugging. The Teams Toolkit starts checking prerequisites, registering Azure Active Directory app, registering Teams app, registering bot, starting services, and launching browser. +You can perform single operation, press **F5** to start debugging. The Teams Toolkit starts to check prerequisites, registers Azure AD app, Teams app, and registers bot, starts services, and launches browser. -#### Multi-target debugging +### 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 +### 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 the toggle breakpoints: :::image type="content" source="../assets/images/teams-toolkit-v2/debug/toggle-points.png" alt-text="toggle breakpoints"::: -#### Hot reload +### Hot reload You can update and save the source codes of tab, bot, message extension, and Azure Functions at the same time when you are debugging the Teams app. The app reloads and the debugger reattaches to the programming languages. :::image type="content" source="../assets/images/teams-toolkit-v2/debug/hot-reload.png" alt-text="hot-reload for source codes"::: -#### Stop debugging +### Stop debugging When you complete local debug, you can select **Stop** or **Disconnect** from the floating debugging toolbar to stop all debug sessions and terminate tasks. The following image shows the stop debug action: When you complete local debug, you can select **Stop** or **Disconnect** from th ## Debug your Teams app locally -#### 1. Set up your Teams Toolkit +The following steps help you to debug your Teams app locally: -Complete the following steps to debug your app after creating a new app using the Teams Toolkit: +### Set up your Teams Toolkit -<br> +Perform the following steps to debug your app after you create a new app using the Teams Toolkit: -<details> -<summary><b>Windows</b></summary> +# [Windows](#tab/Windows) -1. Select **Debug Edge** or **Debug Chrome** from the **Run and Debug** in the activity bar +1. Select **Debug Edge** or **Debug Chrome** from the **Run and Debug** in the activity bar. :::image type="content" source="../assets/images/teams-toolkit-v2/debug/debug-run.png" alt-text="Browser option" border="false"::: -1. Select **Start Debugging (F5)** or **Run** to run your Teams app in debug mode +1. Select **Start Debugging (F5)** or **Run** to run your Teams app in debug mode. :::image type="content" source="../assets/images/teams-toolkit-v2/debug/start-debugging.png" alt-text="Start debugging" border="false"::: -3. Select **Sign in** to Microsoft 365 account +3. Select **Sign in** to Microsoft 365 account. :::image type="content" source="../assets/images/teams-toolkit-v2/debug/microsoft365-signin.png" alt-text="Sign in" border="true"::: - > [!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. + > You can select **Read more** to learn about Microsoft 365 Developer Program. Your default web browser opens to let you sign-in to your Microsoft 365 account using your credentials. -4. Select **Install** for installing the development certificate for localhost +4. Select **Install** to install the development certificate for localhost. :::image type="content" source="../assets/images/teams-toolkit-v2/debug/install-certificate.png" alt-text="certificate" border="true"::: Complete the following steps to debug your app after creating a new app using th :::image type="content" source="../assets/images/teams-toolkit-v2/debug/development-certificate.png" alt-text="certification authority" border="true"::: -Toolkit launches a new Edge or Chrome browser instance depending on your selection and opens a web page to load Teams client. +Toolkit launches a new Edge or Chrome browser instance based on your selection and opens a web page to load Teams client. -</details> --<details> -<summary><b>macOS</b></summary> +# [macOS](#tab/macOS) 1. Select **Debug Edge** or **Debug Chrome** from the **Run and Debug** in the activity bar. Toolkit launches a new Edge or Chrome browser instance depending on your selecti :::image type="content" source="../assets/images/teams-toolkit-v2/debug/microsoft365-signin.png" alt-text="Sign into M365 account" border="true"::: > [!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. + > You can select **Read more** to learn about Microsoft 365 Developer Program. Your default web browser opens to let you sign-in to your Microsoft 365 account using your credentials. 4. Select **Install** to install the development certificate for localhost. Toolkit launches a new Edge or Chrome browser instance depending on your selecti Toolkit launches a new Edge or Chrome browser instance depending on your selection and opens a web page to load Teams client. -</details> + -#### 2. Debug your app +### Debug your app After the initial set up process, the Teams Toolkit starts the following processes: -a. [Starts app services](#starts-app-services) </br> -b. [Launches debuggers](#launches-debuggers) </br> -c. [Sideloads the Teams app](#sideloads-the-teams-app) - -#### Starts app services +<br> ++<details> +<summary><b>Starts app services</b></summary> Runs the tasks defined in `.vscode/tasks.json` as follows: The following image displays task names on the **Output** **Terminal** tab of th :::image type="content" source="../assets/images/teams-toolkit-v2/debug/Terminal.png" alt-text="Start app services"::: -#### Launches debuggers +</details> +<details> +<summary><b>Launches debuggers</b></summary> Launches the debug configurations defined in `.vscode/launch.json` as follows: The following table lists the debug configuration names and types for project wi | Bot or message extension | **Attach to Bot** | pwa-node | | Azure Functions | **Attach to Backend** | pwa-node | -#### Sideloads the Teams app +</details> +<details> +<summary><b>Sideloads the Teams app</b></summary> -The configuration **Attach to Frontend** or **Launch Bot** launches a new Edge or Chrome browser instance and opens a web page to load Teams client. After the Teams client is loaded, Teams sideloads the Teams app controlled by the sideloading url defined in the launch configurations [Microsoft Teams](https://teams.microsoft.com/l/app/>${localTeamsAppId}?installAppPackage=true&webjoin=true&${account-hint}). When Teams client loads in the web browser, select **Add** or select one from the dropdown list as per your requirement. +The configuration **Attach to Frontend** or **Launch Bot** launches a new Edge or Chrome browser instance and opens a web page to load Teams client. After the Teams client is loaded, Teams sideloads the Teams app controlled by the sideloading URL defined in the launch configurations [Microsoft Teams](https://teams.microsoft.com/l/app/>${localTeamsAppId}?installAppPackage=true&webjoin=true&${account-hint}). When Teams client loads in the web browser, select **Add** or select one from the dropdown list as per your requirement. :::image type="content" source="../assets/images/teams-toolkit-v2/debug/hello-local-debug.png" alt-text="local debug" border="true"::: Your app is added to Teams! +</details> + ## Customize debug settings -Teams Toolkit allows you to customize the debug settings to create your tab or bot by unchecking some prerequisites: +Teams Toolkit unchecks some prerequisites and allows you to customize the debug settings to create your tab or bot: <br> Teams Toolkit allows you to customize the debug settings to create your tab or b 1. In Visual Studio Code settings, clear **Ensure Ngrok is installed and started (ngrok)**. -1. Set siteEndpoint configuration in `.fx/configs/config.local.json` to your endpoint. +1. Set `siteEndpoint` configuration in `.fx/configs/config.local.json` to your endpoint. ```json { Teams Toolkit allows you to customize the debug settings to create your tab or b 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 adding new environment variables as the environment variables don't support hot reload. + > Ensure to start a new local debug after you add new environment variables as the environment variables don't support hot reload. </details> <details> <summary><b>Debug partial component</b></summary> - Teams Toolkit utilizes Visual Studio Code multi-target debugging to debug tab, bot, message extension, and Azure Functions at the same time. You can update `.vscode/launch.json` and `.vscode/tasks.json` to debug partial component. If you want to debug tab only in a tab plus bot with Azure Functions project, use the following steps: 1. Comment **Attach to Bot** and **Attach to Backend** from debug compound in `.vscode/launch.json`. |
| platform | Use CICD Template | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/use-CICD-template.md | Last updated 04/20/2022 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.| +|[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: You can set up pipelines with the following platforms: 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 +## Set up pipelines with GitHub To set up pipelines with GitHub for CI/CD: -1. Create workflow templates. +* Create workflow templates. - * Visual Studio Code - * TeamsFx CLI + * Visual Studio Code + * TeamsFx CLI -1. Customize CI/CD workflow. +* Customize CI/CD workflow. +### Create workflow templates -## Create workflow templates with GitHub +You can create the following workflow templates with GitHub: -**Create workflow templates using the Teams Toolkit in Visual Studio Code** +**Teams Toolkit in Visual Studio Code** 1. Create a new Teams app project using Teams Toolkit.-1. Select **Teams Toolkit** icon in the Visual Studio Code activity bar. +1. Select **Teams Toolkit** icon :::image type="icon" source="../assets/images/teams-toolkit-v2/add-API/api-add-icon.png" alt-text="api icon"::: from the left navigation bar. 1. Select **Add CI/CD Workflows**. 1. Select an environment from the command prompt. 1. Select **GitHub** as the CI/CD provider. To set up pipelines with GitHub for CI/CD: 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. -**Create workflow templates using TeamsFx CLI** +**TeamsFx CLI** 1. Enter `cd` to your Teams app project directory. 2. Enter `teamsfx add cicd` command to start the interactive command process. You can change or remove the test scripts to customize CI/CD workflow: 1. Change the build scripts if necessary. 1. Remove the test scripts as required. -### Set up pipelines with Azure DevOps +## Set up pipelines with Azure DevOps To set up pipelines with Azure DevOps for CI/CD: -1. Create workflow templates. +* Create workflow templates. - * Visual Studio Code - * TeamsFx CLI + * Visual Studio Code + * TeamsFx CLI -1. Customize CI/CD workflow. +* Customize CI/CD workflow. +### Create workflow templates -## Create workflow templates with Azure DevOps +You can create the following workflow templates with Azure DevOps: -**Create workflow templates using the Teams Toolkit in Visual Studio Code** +**Teams Toolkit in Visual Studio Code** 1. Create a new Teams app project using Teams Toolkit.-2. Select **Teams Toolkit** icon in the Visual Studio Code activity bar. +2. Select **Teams Toolkit** icon :::image type="icon" source="../assets/images/teams-toolkit-v2/add-API/api-add-icon.png" alt-text="api icon"::: from the left navigation bar. 3. Select **Add CI/CD Workflows**. 4. Select an environment from the command prompt. 5. Select **Azure DevOps** as CI/CD provider. To set up pipelines with Azure DevOps for CI/CD: 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. -**Create workflow templates using the TeamsFx CLI** +**TeamsFx CLI** 1. Enter `cd` to your Teams app project directory. 2. Enter `teamsfx add cicd` command to start the interactive command process. To set up pipelines with Azure DevOps for CI/CD: ### Customize CI workflow -The following are the changes you can make for the script or workflow definition: +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 -The following are the changes you can make for the script or workflow definition: +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 +## Set up pipelines with Jenkins To set up pipelines with Jenkins for CI/CD: -1. Create workflow templates. +* Create workflow templates. ++ * Visual Studio Code + * TeamsFx CLI - * Visual Studio Code - * TeamsFx CLI +* Customize CI/CD workflow. -1. Customize CI/CD workflow. +### Create workflow templates -## Create workflow templates with Jenkins +You can create the following workflow templates with Jenkins: -**Create workflow templates using the Teams Toolkit in Visual Studio Code** +**Teams Toolkit in Visual Studio Code** 1. Create a new Teams app project using Teams Toolkit.-2. Select **Teams Toolkit** icon in the Visual Studio Code sidebar. +2. Select **Teams Toolkit** icon :::image type="icon" source="../assets/images/teams-toolkit-v2/add-API/api-add-icon.png" alt-text="api icon"::: from the left navigation bar. 3. Select **Add CI/CD Workflows**. 4. Select an environment from the command prompt. 5. Select **Jenkins** as CI/CD provider. To set up pipelines with Jenkins for CI/CD: 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. -**Create workflow templates using TeamsFx CLI** +**TeamsFx CLI** 1. Enter `cd` to your Teams app project directory. 2. Enter `teamsfx add cicd` command to start the interactive command process. To set up pipelines with Jenkins for CI/CD: ### Customize CI workflow -The following are some of the changes you can make to your project: +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: Perform the following steps to customize the CD pipeline: 1. Change the build scripts if necessary. 1. Remove the test scripts if you don't have tests. --### Set up pipelines for other platforms +## 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: The scripts are based on a cross-platform TeamsFx command line tool [TeamsFx-CLI 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. For more information, see [Azure service principals guidelines](/azure/active-di ## 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). +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 by selecting `App -> Import app -> Replace`. +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 by selecting `Publish -> Publish to your org`. +4. Publish your app, select `Publish -> Publish to your org`. ### See also * [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) +* [Manage your apps with the Developer Portal for Microsoft Teams](../concepts/build-and-test/teams-developer-portal.md) |