{"id":13858,"date":"2023-05-17T09:00:14","date_gmt":"2023-05-17T16:00:14","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=13858"},"modified":"2023-05-31T08:00:36","modified_gmt":"2023-05-31T15:00:36","slug":"teams-toolkit-for-visual-studio-code-v5-0-now-available","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/teams-toolkit-for-visual-studio-code-v5-0-now-available\/","title":{"rendered":"Teams Toolkit for Visual Studio Code 5 now available"},"content":{"rendered":"<p>We&#8217;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.<\/p>\n<h2>Flexible and composable automation<\/h2>\n<p>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 &#8211; 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:<\/p>\n<ul>\n<li>Use existing infrastructure, resource groups, and more when provisioning<\/li>\n<li>Use an existing Teams app ID or bot ID<\/li>\n<li>Use an existing Azure AD app registration ID<\/li>\n<li>Customizable tunneling solution<\/li>\n<li>Add custom steps to debugging, provisioning, deploying, and publishing.<\/li>\n<\/ul>\n<p>For example, by adding a new file named `<code>teamsapp.yml<\/code>` 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:<\/p>\n<pre class=\"prettyprint language-default\"><code class=\"language-default\">provision:\r\n    - uses: teamsApp\/create\r\n      with:\r\n           name: \"MyTeamsApp\"\r\n      writeToEnvironmentFile:\r\n           teamsAppId: TEAMS_APP_ID<\/code><\/pre>\n<p>The above example is using `<code>teamsApp\/create<\/code>`, 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 <a href=\"https:\/\/aka.ms\/teamsfx-v5.0-guide\">complete guide available on GitHub<\/a>.<\/p>\n<p>Creating and scaffolding a new project with Teams Toolkit will include `<code>teamsapp.yml<\/code>` by default which also works with <a href=\"https:\/\/learn.microsoft.com\/en-us\/microsoftteams\/platform\/toolkit\/teamsfx-cli\">TeamsFx CLI<\/a> and can be integrated with your CI\/CD pipelines. If you created a project in a previous version of Teams Toolkit, you&#8217;ll be able to use this release to automatically upgrade your projects to support the latest features.<\/p>\n<h2>Built-in tunneling for debugging bots<\/h2>\n<p>In this release, we&#8217;ve made it simpler to debug apps with a bot using the same tech that powers <a href=\"https:\/\/learn.microsoft.com\/en-us\/aspnet\/core\/test\/dev-tunnels?view=aspnetcore-7.0\">Visual Studio dev tunnels<\/a>. The new `<code>debug-start-local-tunnel<\/code>` task will create a networking tunnel and save the generated endpoints to environment variables. The variables are configurable and can be used in `<code>teamsapp.yml<\/code>` actions to save you time by automating the setup of redirect URLs, bot endpoints, etc. &#8211; making it seamless to F5 or Start Debugging. Using Dev Tunnels by default also brings these advantages to your Teams app development:<\/p>\n<ol>\n<li>Enhanced security awareness: receive alerts when connected to Dev Tunnels, helping prevent phishing attacks and accidental disclosure of tunnel endpoints.<\/li>\n<li>Microsoft 365 identity authentication: tunnel creation can be safeguarded by authenticating with your Microsoft 365 identity, giving an added layer of protection.<\/li>\n<\/ol>\n<p>This flexibility also makes it possible to use any tunneling solution with the toolkits automation and <a href=\"https:\/\/aka.ms\/teamsfx-mobile\">debug your apps on mobile devices<\/a>. More info about customizing this task <a href=\"https:\/\/github.com\/OfficeDev\/TeamsFx\/wiki\/%7BDebug%7D-Teams-Toolkit-VS-Code-Tasks\">is available on GitHub<\/a>.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/1.jpg\"><img decoding=\"async\" class=\"alignnone wp-image-13928 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/1.jpg\" alt=\"Image showing built-in tunneling for debugging bots.\" width=\"1989\" height=\"1172\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/1.jpg 1989w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/1-300x177.jpg 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/1-1024x603.jpg 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/1-768x453.jpg 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/1-1536x905.jpg 1536w\" sizes=\"(max-width: 1989px) 100vw, 1989px\" \/><\/a><\/p>\n<h2>More of Microsoft 365<\/h2>\n<h2>Build an Outlook Add-in<\/h2>\n<p>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:<\/p>\n<ul>\n<li>Create a new Outlook Add-in project using the latest app manifest<\/li>\n<li>Run and debug the app in an Outlook desktop client* using Visual Studio Code with hot reload<\/li>\n<li>Deploy the Outlook Add-in project to Azure<\/li>\n<li>Import an existing Outlook Add-in project and upgrade to the latest app manifest schema<\/li>\n<li>Start from a new sample that that demonstrates a single app with both an Outlook Add-in and Teams Tab capability<\/li>\n<\/ul>\n<p>*\u00a0Currently supports Outlook for Windows Beta Channel,\u00a0Build\u00a016320 or higher<\/p>\n<h2>SharePoint Framework<\/h2>\n<p>If you&#8217;re building apps with SharePoint Framework (SPFx), you&#8217;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&#8217;re just getting started, we&#8217;ve also included a project template that supports debugging SPFx apps across Microsoft 365. In this release you can also:<\/p>\n<ul>\n<li>Add and configure new SPFx web parts using a single command.<\/li>\n<li>Better control which version of SPFx you want to build with.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/2.jpg\"><img decoding=\"async\" class=\"alignnone wp-image-13929 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/2.jpg\" alt=\"Image of how to start extending SPFx-based solutions to Outlook and the Microsoft 365 app\" width=\"1987\" height=\"1285\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/2.jpg 1987w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/2-300x194.jpg 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/2-1024x662.jpg 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/2-768x497.jpg 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/2-1536x993.jpg 1536w\" sizes=\"(max-width: 1987px) 100vw, 1987px\" \/><\/a><\/p>\n<h2>A more familiar getting started experience<\/h2>\n<h2>Start from a project template<\/h2>\n<p>In this release, we&#8217;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&#8217;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.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/3.jpg\"><img decoding=\"async\" class=\"alignnone wp-image-13930 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/3.jpg\" alt=\"New project code sample\" width=\"1207\" height=\"495\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/3.jpg 1207w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/3-300x123.jpg 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/3-1024x420.jpg 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/3-768x315.jpg 768w\" sizes=\"(max-width: 1207px) 100vw, 1207px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/4.jpg\"><img decoding=\"async\" class=\"alignnone wp-image-13931 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/4.jpg\" alt=\"Set up app features using a bot\" width=\"1196\" height=\"497\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/4.jpg 1196w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/4-300x125.jpg 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/4-1024x426.jpg 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/4-768x319.jpg 768w\" sizes=\"(max-width: 1196px) 100vw, 1196px\" \/><\/a><\/p>\n<h2>Jump right in with GitHub Codespaces<\/h2>\n<p>As part of this release, we&#8217;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:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/OfficeDev\/TeamsFx-Samples\/tree\/v3\/hello-world-tab-codespaces\">Hello World Tab Sample<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/OfficeDev\/TeamsFx-Samples\/tree\/v3\/notification-codespaces\">Notification Sample<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/OfficeDev\/TeamsFx-Samples\/tree\/v3\/NPM-search-message-extension-codespaces\">NPM Search Message Extension Sample<\/a><\/li>\n<\/ul>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/5.jpg\"><img decoding=\"async\" class=\"alignnone wp-image-13932 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/5.jpg\" alt=\"View samples that can run directly in GitHub Codespaces.\" width=\"1987\" height=\"1174\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/5.jpg 1987w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/5-300x177.jpg 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/5-1024x605.jpg 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/5-768x454.jpg 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/05\/5-1536x908.jpg 1536w\" sizes=\"(max-width: 1987px) 100vw, 1987px\" \/><\/a><\/p>\n<h2>We \ud83d\udc96 your feedback<\/h2>\n<p>Thank you for all your feedback that has helped make this release possible. Build with us <a href=\"https:\/\/github.com\/officedev\/teamsfx\">on GitHub<\/a>, share feedback <a href=\"https:\/\/github.com\/officedev\/teamsfx\/issues\">as an issue<\/a>, or email our team directly at <a href=\"mailto:ttkfeedback@microsoft.com\">ttkfeedback@microsoft.com<\/a>. In case you missed it, check out our previous posts on the pre-releases that went into this release.<\/p>\n<ul>\n<li><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/teams-toolkit-for-visual-studio-code-v5-0-prerelease\/\">Teams Toolkit for Visual Studio Code Update \u2013 February 2023<\/a><\/li>\n<li><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/teams-toolkit-for-visual-studio-code-update-march-2023\/\">Teams Toolkit for Visual Studio Code update \u2013 March 2023<\/a><\/li>\n<li><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/teams-toolkit-for-visual-studio-code-update-april-2023\/\">Teams Toolkit for Visual Studio Code Update \u2013 April 2023<\/a><\/li>\n<\/ul>\n<p>We&#8217;re excited for you to <a href=\"https:\/\/learn.microsoft.com\/en-us\/microsoftteams\/platform\/toolkit\/install-teams-toolkit?tabs=vscode&amp;pivots=visual-studio-code\">try Teams Toolkit for Visual Studio Code 5<\/a> and share your experience with us.<\/p>\n<p><em>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: <\/em><a href=\"https:\/\/aka.ms\/hack-together-teams\"><em>https:\/\/aka.ms\/hack-together-teams<\/em><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re excited to announce that Teams Toolkit for Visual Studio Code v5.0 is now generally available introducing major upgrades to simplify the development process.<\/p>\n","protected":false},"author":113252,"featured_media":13911,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[128],"tags":[23],"class_list":["post-13858","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-teams","tag-teams-toolkit"],"acf":[],"blog_post_summary":"<p>We&#8217;re excited to announce that Teams Toolkit for Visual Studio Code v5.0 is now generally available introducing major upgrades to simplify the development process.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/13858","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/113252"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=13858"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/13858\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/13911"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=13858"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=13858"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=13858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}