DEV Community

Cover image for Developing Enterprise-Ready Microsoft Teams Apps with Teams ToolKit v3.0
Tomomi Imura 🐱 for Microsoft Azure

Posted on

Developing Enterprise-Ready Microsoft Teams Apps with Teams ToolKit v3.0

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

Since then, the tool has evolved with more powerful features and better user-experience. Thereby, in this article, I would like to introduce new features in the Toolkit v3.0, especially to empower enterprise Teams developers πŸš€

Doodle that describes Microsoft Teams Toolkit v3 features

Quick Introβ€”What are Teams Toolkit & TeamsFx CLI?

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.

There are a visual interface tool and a command line interfaceβ€”With 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, which lets you run tasks with keyboard-centric experience, as well as enabling CI/CD scenarios.

Now, let's 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'd recommend reading Get started documentation on Microsoft Teams developer platform docs first.

☁️ Multi-Env Management

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, dev, qa, stage, and the production environment, prod to deploy.

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 configurations by default.

Now, with this new Toolkit, you can enable more remote environment πŸŽ‰

To add an extra environment:

  1. Open a project in Teams Toolkit, and find Environment on the left pane
  2. Click the Create new environment button (a little "Plus sign" button)

MS Teams Toolkit v3 - Multi-env setting

3.Give a name to the new environment and press Enter key

MS Teams Toolkit v3 - Multi-env setting

MS Teams Toolkit v3 - Multi-env setting

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.parameters.<your_new_env>.json) will be copied from an existing one.

For more info, please read Manage multiple environments in Teams Toolkit.

🀝 Collaboration Among Multiple Developers

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.

Previously, you needed to manually handle the permissions for Teams and Azure AD. But from now on, the Toolkit handles this for you.

To add a collaborator:

  1. First, make sure you have logged in to both M365 and Azure accounts from the menu under Account in Teams Toolkit

MS Teams Toolkit v3 - Add collaborator

2.Under Development , click Provision in the cloud
3.Then choose an environment (if you have multiple working environments).

MS Teams Toolkit v3 - Add collaborator

You may see some popup notifications. Follow the instructions. This will create necessary cloud resources.

4.Once the provision process is completed, now you see the Collaborators list is available under Environment. Click the little Add M365 Teams App (with AAD App) Owners icon

MS Teams Toolkit v3 - Add collaborator

5.Then enter an email address of the person who you want to invite

MS Teams Toolkit v3 - Add collaborator

6.To view collaborators in the environment, select List M365 Teams App (with AAD App) Owners button, then collaborators will be listed in the output channel

MS Teams Toolkit v3 - Add collaborator

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!

πŸ’ͺ Provision Azure Resources Using ARM and Bicep

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.

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.

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

To provision with ARM, you can customize Azure resources by changing these two sets of files:

Azure parameters

β”” πŸ“ .fx/configs
  β”œ πŸ“„ `azure.parameters.{your_env_name}.json`
  β”œ πŸ“„ `azure.parameters.{your_env2_name}.json`
  β”œ ...
Enter fullscreen mode Exit fullscreen mode

ARM Templates (Bicep files)

β”” πŸ“ templates/azure
  β”œ πŸ“„ main.bicep
  β”œ πŸ“„ provision.bicep
  β”œ πŸ“„ config.bicep
β”” πŸ“ provision
  β”œ πŸ“„ {each_Azure_resource}.bicep
  β”œ ...
Enter fullscreen mode Exit fullscreen mode

There are predefined parameters and templates. To learn what exactly you can customize and how, please read Customize resource provision section in the documentation.

πŸ₯½ CI/ CD Support

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.

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

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

We prepared sample configuration files, including GitHub, Jenkins, Azure DevOps, and other platforms by scripts (Grab templates of your choice!), as well as GitHub Actions template, which I will show you howβ€”

Setting Up GitHub Actions

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

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

See how to set up GitHub Actions in this GIF:
Showing how to create a GitHub Actions with the CI template

These files are now stored under .github/workflows.

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

Also, for Azure account, the account's security defaults should be turned off at Azure Portal, at Azure Active Directory > Properties > Manage security defaults.

Setting Up CI/CD Pipelines with Something Else

If you would like to set up your workflow with other platforms, such as Azure DevOps and Jenkins, please refer to the docs at CI or CD support for Teams application developers.


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't hesitate to drop your comments and feedback here.

πŸ“š Learn More

Discussion (4)

Collapse
techwatching profile image
Alexandre

@girlie_mac Really interesting post. I am glad to see that tooling for developing Teams app is finally more enterprise-ready (it took quite a long time unfortunately).
A few questions thought:

  • What about supporting other back and front-end frameworks ? It seems only React is supported for the front-end and only node.js for the back-end. What about using vue.js for the frontend and ASP.NET Core for the backend ?
  • This extension for vscode seems very active in terms of developement, what about extensions for other IDEs (Visual Studio 2022, Rider ...). The VS2019 extension seems way behind vs code extension
Collapse
girlie_mac profile image
Tomomi Imura 🐱 Author

Thank you Alexandre for your feedback!
True, it would be nice to support more langs and frameworks. and I am certainly let the teams know your requests!

Collapse
girlie_mac profile image
Tomomi Imura 🐱 Author • Edited on

@techwatching Okay, I can share some part of our roadmap for you!

  • Teams Toolkit for VS2022 will be shipped for .NET developers
  • Vue.js support in in consideration, as well as other JS frameworks like Angular

πŸ™Œ

Thread Thread
techwatching profile image
Alexandre

Great. Thanks for the information.
@girlie_mac . One thing that I would love is to be able to :

  • not only be limited to a node.js backend when doing a react / vue / angular front, it's not because I develop with a JavaScript framework that I want my back to be node.js, I want to be able to have an ASP.Net Core API with a vue.js front for instance
  • not only be limited to to razor / blazor in Visual Studios 2022. Yes doing C# in the back and the front is great but that's not necessarily the way we develop web application today. Often we use a JavaScript framework for the front and ASP.NET Core for the back