Teams Toolkit for Visual Studio Code 5 now available

Ji Dong

John Miller

May 17th, 20230 8

We’re excited to announce that Teams Toolkit for Visual Studio Code 5 is now generally available. This release introduces major upgrades that make it simpler to debug bots, build for Microsoft 365, and use existing web app projects, hosting resources, app registrations, and more.

Flexible and composable automation

Teams Toolkit for Visual Studio Code 5 introduces a new way for developers to write individual, focused tasks that are tuned for automating setup and other repetitive actions during development of Teams apps. Those tasks are composed into groups – referred to as lifecycles: Provision, Deploy, and Publish. All that orchestration is controlled by you, the developer, and expressed in a YAML file that lives in the root of your project. Now you control exactly what automation the tooling can help with and have the flexibility to customize the inputs and outputs. These features make it simpler to:

  • Use existing infrastructure, resource groups, and more when provisioning
  • Use an existing Teams app ID or bot ID
  • Use an existing Azure AD app registration ID
  • Customizable tunneling solution
  • Add custom steps to debugging, provisioning, deploying, and publishing.

For example, by adding a new file named `teamsapp.yml` to your project directory, you can automate the creation of a Teams app registration and save the App ID to an environment file during the Provision step like this:

provision:
    - uses: teamsApp/create
      with:
           name: "MyTeamsApp"
      writeToEnvironmentFile:
           teamsAppId: TEAMS_APP_ID

The above example is using `teamsApp/create`, one of the many built-in automation tasks, or actions, available in this release. There are actions for many of the common tasks needed during app development for Teams and we have a complete guide available on GitHub.

Creating and scaffolding a new project with Teams Toolkit will include `teamsapp.yml` by default which also works with TeamsFx CLI and can be integrated with your CI/CD pipelines. If you created a project in a previous version of Teams Toolkit, you’ll be able to use this release to automatically upgrade your projects to support the latest features.

Built-in tunneling for debugging bots

In this release, we’ve made it simpler to debug apps with a bot using the same tech that powers Visual Studio dev tunnels. The new `debug-start-local-tunnel` task will create a networking tunnel and save the generated endpoints to environment variables. The variables are configurable and can be used in `teamsapp.yml` actions to save you time by automating the setup of redirect URLs, bot endpoints, etc. – making it seamless to F5 or Start Debugging. Using Dev Tunnels by default also brings these advantages to your Teams app development:

  1. Enhanced security awareness: receive alerts when connected to Dev Tunnels, helping prevent phishing attacks and accidental disclosure of tunnel endpoints.
  2. Microsoft 365 identity authentication: tunnel creation can be safeguarded by authenticating with your Microsoft 365 identity, giving an added layer of protection.

This flexibility also makes it possible to use any tunneling solution with the toolkits automation and debug your apps on mobile devices. More info about customizing this task is available on GitHub.

Image showing built-in tunneling for debugging bots.

More of Microsoft 365

Build an Outlook Add-in

You can now build for more of Microsoft 365 with Teams Toolkit for Visual Studio Code 5 by creating, debugging, and deploying an Outlook Add-in. In this update, you can:

  • Create a new Outlook Add-in project using the latest app manifest
  • Run and debug the app in an Outlook desktop client* using Visual Studio Code with hot reload
  • Deploy the Outlook Add-in project to Azure
  • Import an existing Outlook Add-in project and upgrade to the latest app manifest schema
  • Start from a new sample that that demonstrates a single app with both an Outlook Add-in and Teams Tab capability

* Currently supports Outlook for Windows Beta Channel, Build 16320 or higher

SharePoint Framework

If you’re building apps with SharePoint Framework (SPFx), you’ll love that this release includes support for the latest SPFx version, which means you can start extending SPFx-based solutions to Outlook and the Microsoft 365 app. If you’re just getting started, we’ve also included a project template that supports debugging SPFx apps across Microsoft 365. In this release you can also:

  • Add and configure new SPFx web parts using a single command.
  • Better control which version of SPFx you want to build with.

Image of how to start extending SPFx-based solutions to Outlook and the Microsoft 365 app

A more familiar getting started experience

Start from a project template

In this release, we’ve made it simpler to find the right project template to get started with by using familiar terminology that matches the rest of the Teams Platform. We’ve also started making it easier for you to customize the templates for your apps by simplifying the scaffolded code. More complex examples are available as samples.

New project code sample

Set up app features using a bot

Jump right in with GitHub Codespaces

As part of this release, we’re introducing a few samples that can run directly in GitHub Codespaces. This containerized experience sets up Teams Toolkit for Visual Studio Code in a new browser instance and will be ready to run after you sign-in with your Microsoft 365 account. You can view any of these samples and select the Open in GitHub Codespaces button to get started:

View samples that can run directly in GitHub Codespaces.

We 💖 your feedback

Thank you for all your feedback that has helped make this release possible. Build with us on GitHub, share feedback as an issue, or email our team directly at ttkfeedback@microsoft.com. In case you missed it, check out our previous posts on the pre-releases that went into this release.

We’re excited for you to try Teams Toolkit for Visual Studio Code 5 and share your experience with us.

Join us for HackTogether: The Microsoft Teams Global Hack, our virtual hackathon to learn how to build powerful apps for Microsoft Teams. Join live events, connect with Microsoft experts and win awesome prizes! 1-15 June 2023. Register today: https://aka.ms/hack-together-teams

Ji Dong Senior Product Manager

John Miller Senior Product Manager, Teams Developer Tools

Read next

0 comments

Discussion is closed.

Feedback usabilla icon