Teams Toolkit for Visual Studio Code Update – April 2023

Junjie Li

Welcome to the April 2023 update for Teams Toolkit for Visual Studio Code! In this update, we are sharing what’s new for developers building Teams apps with the prerelease version of Teams Toolkit for Visual Studio Code. This update includes:

• Integrated and secure tunneling
• SharePoint Framework developer experience update
• New getting started experience with GitHub Codespaces
• Continuous improvement of the generated project files
• Other features, enhancements, and bug fixes

Integrated and secure tunneling

Today, one of the tasks that Teams Toolkit automates for debugging bot and message extension applications is tunneling. Now we are thrilled to announce that Teams Toolkit for Visual Studio Code will be defaulting to use Dev Tunnels for developing bots and message extensions locally. It is the same technology behind Visual Studio Code Remote Tunnels, Visual Studio .NET Web Tools and other Microsoft experiences.

With this integrated dev tunnel feature, Teams Toolkit now offers enhanced security and increased trust for enterprise customers, with the ability to:

• Alert users they are connected to dev tunnels to prevent phishing attacks and accidental leaks of tunnel endpoints.
• Authenticate with Microsoft 365 identity to protect tunnel creations.

Rest assured that Teams Toolkit provides maximum flexibility if you still prefer to use Teams Toolkit without dev tunnels, follow our documentation to switch back.

SharePoint Framework developer experience update

It is another exciting month for SharePoint Framework developers! During the past months, Teams Toolkit has updated the scaffold solutions to use the latest SharePoint Framework version, which brings the fundamental capability that enables you to extend your SharePoint Framework based Teams solutions to Outlook and the Microsoft 365 app.

Now we are excited to announce that to further streamline developer experiences across Teams, Outlook, and the Microsoft 365 app, we have included “out-of-box” scaffold that is equipped with full stack debugging capabilities across Microsoft 365 suite.

We are also committed to continuously optimizing for developers based on the feedback we hear from customers and communities, Teams Toolkit added support so you can:

• Use a single command to add multiple SharePoint Framework web parts as Teams Tab pages and configure the new web parts with Teams app.
• Choose which SharePoint Framework package version to use when creating a SharePoint Framework -based Teams tab app, either from a globally installed version or let Teams Toolkit install the latest version for you.

New getting started experience with GitHub Codespaces

We understand how painful it can be when spending hours setting up the development environment. That’s why we are making these Teams Toolkit compatible samples available for you to instantly get started in a containerized environment – GitHub Codespaces!

• Hello World Tab Sample
• Notification Sample
• NPM Search Message Extension Sample

Click the Open in GitHub Codespaces badge and proceed with creating Codespaces. After a few seconds of set up, you will have a Teams application inside a fully functional Visual Studio Code on the web.

Continuous improvement of the generated project files

• We have been continuously iterating the generated project files since the first Prerelease in February to meet the developer expectations. In this version, we have made the following changes based on the feedback we hear:
• Simplified the default lifecycle steps in teamsapp.yml to be Provision, Deploy, and Publish. The ConfigureApp and RegisterApp steps are removed, and their actions are defaulted to the Provision step. Link to lifecycles doc
• Added support for a new action, uses: script, that can be used to run any script command.  Link to script action doc
• Some actions now support a writeToEnvironmentFile parameter to define generated environment variable names. Link to actions doc
• Added .env.{envName}.user files to store sensitive information like password and are added to .gitignore. And .env.{envName} files now only contain non-sensitive information and are removed from .gitignore. Link to environments doc
• Added auto-complete suggestions and descriptions when editing teamsapp.yml files.

Other features, enhancements, and bug fixes

This prerelease marks the last prerelease before the Teams Toolkit v5 stable version and we have packed in a lot of features and enhancements.

Teams Toolkit for Visual Studio Code

• Updated Teams Toolkit tree view user interface to streamline the development workflow.
• Validate Application command now helps catch errors and warnings that would prevent a successful publish to Teams in addition to schema checks.
• Simplified multiple progress notifications into one for provision, deploy and publish.
• Some commands will now ask for additional inputs like manifest.json file path and environment name so that you have the flexibility to arrange those files.
• Sample: enabled app caching in “My First Meeting App” sample that improves subsequent launch time of the apps that are loaded in the meeting side panel.
• Template: updated templates and samples to use Fluent UI V9 and React 18.

Teams Toolkit CLI: @microsoft/teamsfx-cli v2.0.0@beta

• Updated teamsfx validate command to validate your app package against validation rules.
• Updated teamsfx new command to include a new parameter --spfx-install-latest-package to specify whether to use the latest SPFx package or not.
• Added teamsfx add spfx-web-part command to add multiple web parts.

TeamsFx-React SDK: @microsoft/teamsfx-react v3.0.0@beta

• Added BaseDashboard class: A base component that provides basic functionality to create a dashboard.
• Added BaseWidget class: A base component that provides basic functionality to create a widget.
• Added IWidgetClassNames Interface: An Interface for defining the class names of widget elements.

Bug fixes

• Fixed an issue where we will only display relevant how-to guide for SPFx project.
• Fixed an issue where the hyperlink is highlighted multiple colors from output channel.
• Fixed an issue where you might see duplicate error messages.
• Fixed an issue where you might see Upload failed due to an invalid BotId in your manifest after migrating your project with prerelease version.
• Fixed an issue where teamsApp/update action will not create a new Teams app registration when TEAMS_APP_ID does not exist.

Try Teams Toolkit prerelease today

Follow the steps in install a prerelease version to get started. We encourage you to provide feedback in TeamsFx GitHub issues to help us make Teams Toolkit better.

Visit us at Tools | Microsoft Teams Dev Center. Follow us on @Microsoft365Dev / Twitter for the latest news.

Junjie Li Product Manager

Follow