{"id":9023,"date":"2021-12-02T11:33:55","date_gmt":"2021-12-02T19:33:55","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=9023"},"modified":"2022-10-13T21:09:50","modified_gmt":"2022-10-14T04:09:50","slug":"developing-enterprise-ready-microsoft-teams-apps-with-teams-toolkit-v3-0","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/developing-enterprise-ready-microsoft-teams-apps-with-teams-toolkit-v3-0\/","title":{"rendered":"Developing enterprise-ready Microsoft Teams apps with Teams ToolKit v3.0"},"content":{"rendered":"

In the earlier posts, I introduced Teams Toolkit v2 Developer Preview extension for Visual Studio Code<\/a> that generates scaffolding to help you get started with Microsoft Teams apps. I also introduced TeamsFx<\/a>, the core library that lets you handle things like authorization and making Microsoft Graph API calls.<\/p>\n

Since then, the tool has evolved with more powerful features and a better user-experience. In this article, I am introducing the new features in the Toolkit v3.0 for developers, especially to empower Teams enterprise developers. \ud83d\ude80<\/p>\n

\"New<\/a><\/p>\n

Quick intro\u2014What are Teams Toolkit & TeamsFx CLI?<\/h3>\n

Teams Toolkit is a collection of development tools that helps you to create and deploy Microsoft Teams apps with integrated identity, access to cloud storage, data from Microsoft Graph, and other services in Azure and Microsoft 365.<\/p>\n

There are a visual interface tool and a command line interface\u2014With Teams Toolkit extension for Visual Studio, you can take advantage of the familiar VS Code visual interface for Teams app development. Teams Toolkit comes with a Command-line tool, called TeamsFx CLI<\/em>, which lets you run tasks with keyboard-centric experience, as well as enabling CI\/CD scenarios.<\/p>\n

Now, let\u2019s take a look at what the new features these tools offer! And if you are looking to learn how to get started with Teams Toolkit and the requirement to start developing Teams apps in general, I\u2019d recommend reading Get started documentation<\/a> on Microsoft Teams developer platform docs first.<\/p>\n

\u2601\ufe0f Multi-environment management<\/h3>\n

You typically start developing in your local environment, but sooner or later, you will need to manage multiple environments as you go. Besides your local env, you probably end up having multiple environments, such as, \u201cdev\u201d, \u201cqa\u201d, \u201cstage\u201d, and the production environment to deploy.<\/p>\n

Teams Toolkit provides a simple way for you to create and manage multiple environments. When you created a new project with Teams Toolkit, it generates `local` for your local machine configurations, and `dev`, to represent a remote environment configuration by default.<\/p>\n

Now, with this new Toolkit, you can enable a more remote environment. \ud83c\udf89<\/p>\n

To add an extra environment:<\/p>\n

    \n
  1. Open a project in Teams Toolkit, and find Environment <\/strong>on the left pane<\/li>\n
  2. Click the Create new environment<\/strong> button (a little \u201cplus sign\u201d button)<\/li>\n<\/ol>\n

    \"Image<\/a><\/p>\n

    3. Give a name to the new environment and press Enter key<\/p>\n

    \"Image<\/a><\/p>\n

    \"Give<\/a><\/p>\n

    To add more environments, select an existing environment to add a new one. Every time you create an extra environment, the configuration file (`config.<your_new_env>.json` and `azure.parametersm<your_new_env>.json`) will be copied from an existing one.<\/p>\n

    For more info, please read Manage multiple environments in Teams Toolkit.<\/a><\/p>\n

    \ud83e\udd1d Collaboration among multiple developers<\/h3>\n

    Have you wished it was easier to collaborate on a Teams app project with your coworkers? Well, I have good news! This much-anticipated feature to manage multiple environments was introduced in the latest version of Teams Toolkit, and it supports project collaborations among multiple developers.<\/p>\n

    Previously, you needed to manually handle the permissions for Teams and Azure AD. But from now on, the Toolkit handles this for you.<\/p>\n

    To add a collaborator:<\/p>\n

      \n
    1. First, make sure you have logged in to both M365 and Azure accounts from the menu under Account <\/strong>in Teams Toolkit<\/li>\n
    2. Under Development<\/strong>, click Provision in the cloud<\/strong><\/li>\n<\/ol>\n

      \"Under<\/a><\/p>\n

      3. Then choose an environment (if you have multiple working environments).<\/p>\n

      \"Choose<\/a><\/p>\n

      You may see some popup notifications. Follow the instructions. This will create necessary cloud resources.<\/p>\n

        \n
      1. Once the provision process is completed, now you see the Collaborators list is available under Environment<\/strong>. Click the little Add M365 Teams App (with AAD App) Owners<\/strong> icon<\/li>\n<\/ol>\n

        \"see<\/a><\/p>\n

          \n
        1. Then enter an email address of the person who you want to invite<\/li>\n<\/ol>\n

          \"Then<\/a><\/p>\n

          6. To view collaborators in the environment, select List M365 Teams App (with AAD App) Owners<\/strong> button, then collaborators will be listed in the output channel.<\/p>\n

          \"To<\/a><\/p>\n

          Once the collaborator joins, they can develop, provision and deploy the project. You can push the project to GitHub, so that your collaborators can clone the repository and work on the project remotely by signing in on their own M365 and Azure account credentials!<\/p>\n

          \ud83d\udcaa Provision Azure resources using ARM and Bicep<\/h3>\n

          One of the last major upgrades of Teams Toolkit (v2) was the features that let you provision Azure resources using infrastructure-as-a-code approach and deploy your apps to Azure.<\/p>\n

          Now with this new Teams Toolkit v3, you can declaratively provision to author ARM (Azure Resource Manager) template, which is a set of Bicep files that defines the infrastructure and configuration for your project.<\/p>\n

          Bicep<\/a> is a domain-specific language (DSL) that uses declarative syntax to deploy Azure resources. The advantage of using Bicep instead of JSON is that Bicep is verbose and uses simpler syntax to develop your ARM templates.<\/p>\n

          To provision with ARM, you can customize Azure resources by changing these two sets of files:<\/p>\n

          \"Teams<\/a><\/p>\n

           <\/p>\n

           <\/p>\n

           <\/p>\n

           <\/p>\n

           <\/p>\n

           <\/p>\n

           <\/p>\n

           <\/p>\n

           <\/p>\n

           <\/p>\n

           <\/p>\n

           <\/p>\n

          There are predefined parameters and templates. To learn what exactly you can customize and how, please read Customize resource provision<\/a> section in the documentation.<\/p>\n

          \ud83e\udd7d CI\/ CD support<\/h3>\n

          In your real-life development process, your team is highly likely to rely on a CI\/CD platform to automate your builds, testing, and deployment.<\/p>\n

          Now with Toolkit v3, you can enable CI\/CD workflows to automate Teams app development process for multiple environments scenario.<\/p>\n

          The Toolkit bundles with TeamsFx CLI<\/strong> that comes with various useful commands for your Teams app development, including the integration for the automated CI\/CD workflows.<\/p>\n

          > To enable CI\/CD workflow in multiple environment, make sure you have TeamsFx CLI version 0.8.0 or above as its dev dependency in the root package.json!<\/em><\/p>\n

          We prepared sample configuration files, including GitHub, Jenkins, Azure DevOps, and other platforms by scripts (Grab templates of your choice!)<\/a>, as well as GitHub Actions template, which I will show you how\u2014<\/p>\n

          Setting up GitHub Actions<\/h3>\n

          For example, if you would like to set up CI\/CD flow with GitHub Actions with TeamsFx from the web interface:<\/p>\n

            \n
          1. On your project repo on GitHub.com, click Actions <\/strong>tab<\/li>\n
          2. Click \u201cset up a workflow yourself\u201d<\/li>\n
          3. Copy the sample file for Continuous Integrations (CI)<\/a><\/li>\n
          4. Paste it in the editor<\/li>\n
          5. Customize the workflow to fit your scenarios<\/li>\n
          6. Click Start commit<\/strong> button to commit the file<\/li>\n
          7. Repeat the process with the sample file for Continuous Deployment (CD)<\/a><\/li>\n
          8. Fill out your M365 and Azure credentials in the CD config file, under the `env` section<\/li>\n
          9. Commit the file<\/li>\n<\/ol>\n

            \"Image<\/a><\/p>\n

            These files are now stored under .github\/workflows. <\/strong><\/p>\n

            If you run into a problem with your M365 account permission, please disable the multi-factor authentication from Microsoft 365 admin center.<\/a> You should be able to change the setting at Users <\/strong>> Active users<\/strong> > Multi-factor<\/strong> authentication<\/strong>.<\/p>\n

            Also, for Azure account, the account’s security defaults should be turned off at Azure Portal,<\/a> at Azure Active Directory<\/strong>\u00a0>\u00a0Properties > Manage security defaults<\/strong>.<\/p>\n

            Setting up CI\/CD Pipelines with something else<\/h3>\n

            If you would like to set up your workflow with other platforms, such as Azure DevOps and Jenkins, please refer to the TeamsFx Readme<\/a>.<\/p>\n

            —<\/p>\n

            I hope these new features give more confidence to your Teams app development workflow and we are looking forward to seeing your amazing apps on production! And please don\u2019t hesitate to drop your comments and feedback here.<\/p>\n

            References<\/h3>\n