{"id":11641,"date":"2022-10-10T10:59:54","date_gmt":"2022-10-10T17:59:54","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=11641"},"modified":"2022-10-10T11:10:35","modified_gmt":"2022-10-10T18:10:35","slug":"beginners-crash-course-to-build-apps-for-teams-using-teams-toolkit-for-visual-studio-code","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/beginners-crash-course-to-build-apps-for-teams-using-teams-toolkit-for-visual-studio-code\/","title":{"rendered":"Beginners\u2019 crash course to build apps for Teams using Teams Toolkit for Visual Studio Code"},"content":{"rendered":"<p>Microsoft 365 Code | Decode is a series that focuses on breaking down topics for developers to understand concepts better. In this blog, Zhidi Shang and Rabia Williams demystify <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=TeamsDevApp.ms-teams-vscode-extension\" target=\"_blank\" rel=\"noopener\">Teams Toolkit for Visual Studio Code<\/a> to build apps for Microsoft Teams by deep diving into various features available that simplify the developer experience.<\/p>\n<p style=\"text-align: left;\">Watch this video and keep reading to get a detailed breakdown.<\/p>\n<p style=\"text-align: center;\"><iframe title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/aCfZcYCPz4I\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<h2>What is Teams Toolkit?<\/h2>\n<p>Teams Toolkit is an extension for Visual Studio Code and Visual Studio 2022, that you can use to <strong>build and deliver apps faster for Microsoft Teams<\/strong>. Developers can focus on building amazing applications instead of solving problems like tunnelling, identity, deployment, distribution of app and more.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/teams-toolkit-problems.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11659 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/teams-toolkit-problems.png\" alt=\"Image of the problems Teams Toolkit solves\" width=\"602\" height=\"338\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/teams-toolkit-problems.png 602w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/teams-toolkit-problems-300x168.png 300w\" sizes=\"(max-width: 602px) 100vw, 602px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h2>How does Teams Toolkit help a new developer?<\/h2>\n<p>The toolkit comes with the <strong>Get Started <\/strong>page that has a checklist of everything you, as a developer, need to build an application.<\/p>\n<ul>\n<li>Get your development environment ready<\/li>\n<li>Create the base project<\/li>\n<li>Create a sandbox development environment for you (If you don\u2019t already have one) to test your application<\/li>\n<li>Preview your application locally<\/li>\n<li>Provision Azure resource instances your app needs and deploy your application logic to host them.<\/li>\n<\/ul>\n<p>\ud83d\udc40Let\u2019s look at these features more closely.<\/p>\n<h3>Get your developer environment ready<\/h3>\n<p>Check your development environment and get ready to build your first Teams application by running the prerequisite checker.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-2.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11658 size-large\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-2-1024x546.png\" alt=\"Get ready to build your first Teams application by running the prerequisite checker in Teams Toolkit\" width=\"640\" height=\"341\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-2-1024x546.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-2-300x160.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-2-768x409.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-2.png 1203w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>The tool requires npm and node.js and it keeps up with the LTS versions. Nice and easy! The fewer prerequisites, the better, for you to get started.<\/p>\n<h3>Build your first Teams app<\/h3>\n<p>This step lets you scaffold the project out, based on the Teams app capabilities you choose. You can either create a new app or start from a sample available online.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-3.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11657 size-large\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-3-1024x541.png\" alt=\"Create a new app or start from a sample available online using Teams Toolkit\" width=\"640\" height=\"338\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-3-1024x541.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-3-300x159.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-3-768x406.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-3.png 1203w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h3>Create a Microsoft 365 test tenant for free<\/h3>\n<p>You\u2019ll need a Microsoft 365 developer sandbox environment to test your application. If you don\u2019t have one, the tool gives you an option to create one for free. If you already have a developer tenant, then you can sign into it to get started.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-4.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11656 size-large\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-4-1024x541.png\" alt=\"Create a Microsoft 365 test tenant for free in Teams Toolkit\" width=\"640\" height=\"338\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-4-1024x541.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-4-300x158.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-4-768x405.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-4.png 1203w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<h3><\/h3>\n<h3>Preview your Teams app locally<\/h3>\n<p>Press <strong>F5<\/strong> to run and debug your app locally! The tool provides hot reload and lets you preview your app locally.<\/p>\n<p>For a very long time, developers struggled with ngrok tunnelling while developing apps for Teams. <strong>ngrok<\/strong> provides the encryption needed for https, which is needed for Teams applications. But now, thanks to Teams Toolkit, you don\u2019t have to worry about that. The tool supports URL tunnelling using <strong>ngrok<\/strong> which is integrated in the tool.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-5.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11655 size-large\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-5-1024x546.png\" alt=\"Press F5 to run and debug your app locally in Teams Toolkit\" width=\"640\" height=\"341\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-5-1024x546.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-5-300x160.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-5-768x410.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-5.png 1203w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<h3><\/h3>\n<h3>Deploy Teams apps<\/h3>\n<p>The tool lets you provision cloud resource instances and deploy your app\u2019s source code to the provisioned resources from within the tool. You can also choose as many environments as you&#8217;d like, including dev, staging, etc., for deployment and distribution of your app in various environments.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/tookit-image-6.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11654 size-large\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/tookit-image-6-1024x541.png\" alt=\"Provision resources in the cloud and deploy your app's code in Teams Toolkit\" width=\"640\" height=\"338\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/tookit-image-6-1024x541.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/tookit-image-6-300x158.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/tookit-image-6-768x405.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/tookit-image-6.png 1203w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h2><strong>Build a sample app using Teams Toolkit<\/strong><\/h2>\n<p>Now, we explore the <strong>Scenario-based Teams apps<\/strong> available in the tool, ready to be scaffolded out into our machine. There are also <strong>Basic Teams apps<\/strong> for simple apps.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/tookit-image-7.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11653 size-large\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/tookit-image-7-1024x367.png\" alt=\"Build a sample app using Teams Toolkit\" width=\"640\" height=\"229\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/tookit-image-7-1024x367.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/tookit-image-7-300x107.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/tookit-image-7-768x275.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/tookit-image-7.png 1203w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>We chose <strong>Command bot <\/strong>under Scenario-based Teams apps which responds to simple commands and gives a response back in chat.<\/p>\n<p>\ud83d\udc49\ud83c\udffdIf you want to learn more about command bots, check out this video on <a href=\"https:\/\/youtu.be\/BSxanVdealA\">how to create a \u201cRoll a dice\u201d chat bot <\/a>by Tomomi Imura.<\/p>\n<p>Once the project is chosen to be scaffolded out, you can sit back and wait for the tool to do all the groundwork that sets up your project and the needed configuration files. This will be quick so you may not get to sit back for long! \ud83d\ude09<\/p>\n<p>Once done, you can open the project folder which looks something like this.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/tookit-image-7-1.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11665 size-large\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/tookit-image-7-1-1024x629.png\" alt=\"Understanding the generated code in the project folder in Teams Toolkit\" width=\"640\" height=\"393\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/tookit-image-7-1-1024x629.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/tookit-image-7-1-300x184.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/tookit-image-7-1-768x472.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/tookit-image-7-1.png 1203w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>\u2139\ufe0f Remember to read the <strong>README.md<\/strong> file to understand the code and how you can run the application. We cannot emphasis this enough.<\/p>\n<h3>Understanding the project structure<\/h3>\n<p>The project that is scaffolded is not just the bot source code. We have the toolkit related settings and templates also created in the root folder. Let\u2019s take a look at the structure.<\/p>\n<ul>\n<li><strong>. fx<\/strong> folder holds all the files needed for multiple environment configurations, states and templates<\/li>\n<li><strong>.VSCode<\/strong> is your file needed for VSCode to debug your app locally<\/li>\n<li><strong>bot<\/strong> folder holds the source for your command bot app<\/li>\n<li><strong>templates<\/strong> folder has the Teams app package files like manifest and icons and all the provision and deploy files (bicep files) for Azure resources needed for your app.<\/li>\n<\/ul>\n<p>Except for the bot folder and maybe the manifest file template, none of the files in other folder need to be updated by the developer (unless the need arises). It is good to understand what is going on, but the toolkit takes care of all these aspects for the developer so you can focus on building your application.<\/p>\n<p>We recommend you read the <strong>README.md<\/strong> file to check out the bot\u2019s business logic.<\/p>\n<h3>Understanding the features of Teams Toolkit<\/h3>\n<p>The left-hand sidebar that pops up when you select the Visual Studio Code extension icon for Teams Toolkit is the entry point for you to use Teams Toolkit to its full potential after a project is scaffolded.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-9.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11652 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-9.png\" alt=\"Entry point for a developer to use the Teams Toolkit to its full potential after a project is scaffolded\" width=\"602\" height=\"417\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-9.png 602w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-9-300x208.png 300w\" sizes=\"(max-width: 602px) 100vw, 602px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Let\u2019s deep dive into understanding the features in this section, once you have a project created using Teams Toolkit.<\/p>\n<h4>Accounts in Teams Toolkit<\/h4>\n<p>Teams Toolkit allows you to preview your application locally by making it available just for you to test. For this reason, it needs you to sign into a development sandbox environment where <a href=\"https:\/\/learn.microsoft.com\/en-us\/microsoftteams\/platform\/toolkit\/tools-prerequisites?from=teamstoolkit#sideloading-permission\">sideloading<\/a> is enabled. This is your <strong>Microsoft 365 account<\/strong> that you need.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-10.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11651 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-10.png\" alt=\"Sign into your Microsoft 365 developer sandbox account in Teams Toolkit\" width=\"602\" height=\"418\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-10.png 602w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-10-300x208.png 300w\" sizes=\"(max-width: 602px) 100vw, 602px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>If you choose to deploy your app for distribution, Teams Toolkit will require you to have an <strong>Azure subscription.\u00a0<\/strong>You need to sign you into this account before it can provision any Azure resource instances.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-11.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11650 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-11.png\" alt=\"Sign into your Azure account to get resources in Teams Toolkit\" width=\"602\" height=\"418\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-11.png 602w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-11-300x208.png 300w\" sizes=\"(max-width: 602px) 100vw, 602px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h4>Environment to test and distribute your app<\/h4>\n<p>Teams Toolkit lets you create and manage multiple environments to test and distribute your application.<\/p>\n<p>Initially you have a <strong>local<\/strong> and <strong>dev<\/strong> environment already added for you by the tool scaffold. Local is your <strong>default<\/strong> environment to test your application locally and <strong>dev<\/strong> is your cloud environment where you have your Azure account signed in.<\/p>\n<p>You can add as many cloud environments as you want, and the tool will take care of all the templates and configurations that each environment needs.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-12.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11649 size-large\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-12-1024x742.png\" alt=\"Adding environments to test and distribute your app in Teams Toolkit\" width=\"640\" height=\"464\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-12-1024x742.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-12-300x217.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-12-768x557.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-12.png 1203w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>The cloud environment like the <strong>dev<\/strong>, lets you share your application with other members in the same tenant. This is for you to collaborate on your application. Read more about collaboration <a href=\"https:\/\/learn.microsoft.com\/en-us\/microsoftteams\/platform\/toolkit\/teamsfx-collaboration\">here<\/a>.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-13.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11648 size-large\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-13-1024x790.png\" alt=\"Setting up a dev environment to share with others in Teams Toolkit\" width=\"640\" height=\"494\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-13-1024x790.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-13-300x231.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-13-768x592.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-13.png 1203w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>If you look into the project folder, <strong>.fx <\/strong>folder holds all of the configurations and states (output of all the provision per environment) plus the app package\/Azure resource template files. Every time a new environment is added by the developer, a new set of these files will also get added into the .fx folder.<\/p>\n<h4>Development using Teams Toolkit<\/h4>\n<p>As a developer, you can create a new app or view samples from the development section. But what is more interesting in this section, in the sidebar, is the <strong>Add features<\/strong> link which lets you add new features on top of the app you\u2019ve already built using Teams Toolkit.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-14.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11647 size-large\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-14-1024x694.png\" alt=\"Example of the Add features link which lets you add new features on top of the app you\u2019ve already built using Teams Toolkit\" width=\"640\" height=\"434\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-14-1024x694.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-14-300x203.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-14-768x520.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-14.png 1203w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>You can add a single sign on enabled tab or a basic tab on top of the command bot we already have. You can also add other cloud services such as Azure key vault, Azure functions, Azure API management and Azure SQL database.<\/p>\n<p><strong>Edit manifest<\/strong> lets yoiu preview and make changes to the manifest file which then becomes the app package for a Teams application. Most of the properties in this file come from the config files for each environment and care should be taken to do it the right way. Read all about this <a href=\"https:\/\/learn.microsoft.com\/en-us\/microsoftteams\/platform\/toolkit\/teamsfx-preview-and-customize-app-manifest?from=teamstoolkit&amp;pivots=visual-studio-code\">here<\/a>.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-15.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11646 size-large\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-15-1024x631.png\" alt=\"Example of how to edit the app manifest file in Teams Toolkit\" width=\"640\" height=\"394\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-15-1024x631.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-15-300x185.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-15-768x473.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-15.png 1203w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>The <strong>Preview and Debug Adaptive Cards<\/strong> feature in the toolkit, allows you to view the Adaptive Cards in your project with data so you can easily make changes to them while designing. This is all meant to make it easier to stay focused in developing your application without switching context.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-16.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11645 size-large\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-16-609x1024.png\" alt=\"View the Adaptive Cards in your project in Teams Toolkit with data so you can easily make changes while in design\" width=\"609\" height=\"1024\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-16-609x1024.png 609w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-16-178x300.png 178w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-16-768x1292.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-16-913x1536.png 913w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-16.png 1087w\" sizes=\"(max-width: 609px) 100vw, 609px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-17.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11644 size-large\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-17-1024x658.png\" alt=\"Example of adding other sample cards available from the Online cards section as shown in the screen\" width=\"640\" height=\"411\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-17-1024x658.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-17-300x193.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-17-768x493.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-17.png 1203w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>You can also add other sample cards available from the <strong>Online cards<\/strong> section as shown in the screen. Selecting a card in this, will add the selected card into your project folder.<\/p>\n<h4>Teams Toolkit Deployment<\/h4>\n<p>The Teams Toolkit\u2019s most powerful features lie in this section under <strong>Deployment.<\/strong><\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-18.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11643 size-large\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-18-996x1024.png\" alt=\"Example of the features in Teams Toolkit under Deployment.\" width=\"640\" height=\"658\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-18-996x1024.png 996w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-18-292x300.png 292w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-18-768x790.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-18-24x24.png 24w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-18-48x48.png 48w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-18.png 1203w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>You can host your application in Azure with a click of a button using the tool. You can provision Azure resources using <strong>Provision in the cloud <\/strong>which is a one-time activity. So, if you have a command bot application, it will make sure it provisions instances for the bot service, the web app to host your bot application etc.<\/p>\n<p>You can also deploy your application\u2019s business logic to Azure resources, which are already provisioned, by selecting <strong>Deploy to the cloud <\/strong>from within the project. Every time you make changes to the app, you can deploy it again.<\/p>\n<p>You can validate and package your Teams application to distribute it using <strong>Zip Teams metadata package. <\/strong>This will check for any errors in the manifest file and build the app package based on the environment you choose so it can be distributed. It usually builds the package and saves it in a <strong>build<\/strong> folder on your local machine where your project lies.<\/p>\n<p><strong>Publish to Teams<\/strong> lets you build the app package so it can be either manually uploaded to the portal or use the tool to upload the app package to the Teams app portal, so it can be published by the admin.<\/p>\n<p><strong>Developer Portal for Teams<\/strong> is a quick link to access the <a href=\"https:\/\/dev.teams.microsoft.com\/home\">Developer Portal<\/a> to manage your Teams apps.<\/p>\n<h4>Help and Feedback<\/h4>\n<p>Finally, if you are looking for tutorials, documentation and a place to submit your valuable feedback on the tool, there is a dedicated section for that as well.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-19.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11642 size-large\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-19-1024x672.png\" alt=\"Get help and feedback in Teams Toolkit\" width=\"640\" height=\"420\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-19-1024x672.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-19-300x197.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-19-768x504.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/toolkit-image-19.png 1203w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Overall, this tool simplifies the developer experience for thanks to the feedback from our developer community and partners. We look forward to continued suggestions and feedback. Visit <a href=\"https:\/\/aka.ms\/ttk\"><strong>aka.ms\/ttk<\/strong><\/a>.<\/p>\n<h2>Teams Toolkit resources<\/h2>\n<h3>About the tool<\/h3>\n<ul>\n<li>Install Teams Toolkit: <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=TeamsDevApp.ms-teams-vscode-extension\">Teams Toolkit &#8211; Visual Studio Marketplace<\/a><\/li>\n<li>Documentation: <a href=\"https:\/\/learn.microsoft.com\/en-us\/microsoftteams\/platform\/toolkit\/teams-toolkit-fundamentals?pivots=visual-studio-code\">Teams Toolkit Overview &#8211; Teams | Microsoft Learn<\/a><\/li>\n<li>Microsoft Teams Toolkit for Visual Studio Code: <a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/microsoft-teams-toolkit-for-visual-studio-code-now-generally-available\/\">Microsoft Teams Toolkit for Visual Studio Code now generally available &#8211; Microsoft 365 Developer Blog<\/a><\/li>\n<li>Debugging Microsoft Teams app locally with Teams Toolkit: <a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/debugging-microsoft-teams-app-locally-with-teams-toolkit\/\">Debugging Microsoft Teams app locally with Teams Toolkit &#8211; Microsoft 365 Developer Blog<\/a><\/li>\n<\/ul>\n<h3>Samples<\/h3>\n<ul>\n<li>Post notifications to Microsoft Teams with .NET: <a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/post-notifications-to-microsoft-teams-with-net-using-teams-toolkit-for-visual-studio\/\">Post notifications to Microsoft Teams with .NET using Teams Toolkit for Visual Studio, now generally available &#8211; Microsoft 365 Developer Blog<\/a><\/li>\n<li>Build a productivity dashboard: <a href=\"https:\/\/www.youtube.com\/watch?v=0WFN8X9Tp8A\">(124) Build a productivity dashboard with Microsoft Teams Toolkit for Visual Studio &#8211; YouTube<\/a><\/li>\n<li>Build a stock update notification bot : <a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/build-a-stock-update-notification-bot-for-microsoft-teams-using-teams-toolkit-for-visual-studio-code\/\">Build a stock update notification bot for Microsoft Teams using Teams Toolkit for Visual Studio Code &#8211; Microsoft 365 Developer Blog<\/a><\/li>\n<li>Explore more samples: <a href=\"https:\/\/github.com\/OfficeDev\/TeamsFx-Samples\">OfficeDev\/TeamsFx-Samples: Scenario-focused sample applications that help you get started with building Microsoft Teams App. (github.com)<\/a><\/li>\n<\/ul>\n<h3>Teams app development<\/h3>\n<p>Get started with Teams app development: <a href=\"https:\/\/youtu.be\/EQuB8l4sccg\"><strong>Get started building Microsoft Teams apps<\/strong><\/a><\/p>\n<h3>ngrok<\/h3>\n<p>ngrok to develop Microsoft Teams apps: <a href=\"https:\/\/youtu.be\/A5U-3o-mHD0\"><strong>Do you need ngrok to develop Microsoft Teams apps? | Tips &amp; Tricks<\/strong><\/a><\/p>\n<p><strong>Happy coding!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Zhidi Shang and Rabia Williams demystify Teams Toolkit for Visual Studio Code to build apps for Microsoft Team by deep diving into various features available that simplify the developer experience.<\/p>\n","protected":false},"author":71938,"featured_media":11670,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[8,128],"tags":[61,23,55,44],"class_list":["post-11641","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adaptive-cards","category-microsoft-teams","tag-azure","tag-teams-toolkit","tag-visual-studio","tag-visual-studio-code"],"acf":[],"blog_post_summary":"<p>Zhidi Shang and Rabia Williams demystify Teams Toolkit for Visual Studio Code to build apps for Microsoft Team by deep diving into various features available that simplify the developer experience.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/11641","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\/71938"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=11641"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/11641\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/11670"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=11641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=11641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=11641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}