{"id":13425,"date":"2023-04-25T08:30:56","date_gmt":"2023-04-25T15:30:56","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=13425"},"modified":"2023-04-25T10:35:22","modified_gmt":"2023-04-25T17:35:22","slug":"supercharge-your-teams-app-development-new-integration-for-teams-toolkit-developer-portal","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/supercharge-your-teams-app-development-new-integration-for-teams-toolkit-developer-portal\/","title":{"rendered":"Supercharge your Teams app development: New integration for Teams Toolkit & Developer Portal"},"content":{"rendered":"

<\/p>\n

Have you ever found yourself in a situation where you’ve created a new Teams app in the Developer Portal, but want to add customized code to it? Or you started directly in IDEs like VS Code and VS but are looking for simple app management configuration? As a seasoned Teams app developer, you may have tried downloading the manifest package and starting from scratch, only to find the process tedious and time-consuming. <\/span><\/span>Today, we’re thrilled to announce the new integration preview with <\/span><\/span>Teams Toolkit<\/span><\/span><\/a> and <\/span><\/span>Teams Developer Portal<\/span><\/span><\/a> that helps you streamline this process!<\/span><\/span>\u00a0<\/span><\/div>\n

 <\/p>\n

Open your app in Visual Studio Code<\/h2>\n
In Teams Developer Portal, you can now directly “Open in Visual Studio Code (JS\/TS)” and launch your project in Visual Studio Code. Furthermore, Teams Toolkit will scaffold the necessary files based on the features and configurations you set in Teams Developer Portal, so there is seamless transition and all the context needed to start coding in detail.<\/div>\n

 <\/p>\n

\"In<\/a><\/div>\n

 <\/p>\n

Go to “Develop (Preview)” -> “Open in Teams Toolkit”. Click on the \u201cOpen in Visual Studio Code (JS\/TS)\u201d button to open VSCode and scaffold your app. Make sure you have VSCode and the latest Teams Toolkit Prerelease<\/a> installed.<\/div>\n

 <\/p>\n

\n

\"Click<\/a><\/p>\n

 <\/p>\n

Select “Open Link”<\/div>\n

 <\/p>\n

\"Select<\/a><\/div>\n

 <\/p>\n

Select “Open”. Log in to your correct Microsoft 365 account if prompt (the same account you use to log in to Teams Developer Portal).<\/div>\n

 <\/p>\n

\"Select<\/a><\/div>\n

 <\/p>\n

Select your preferred programming language.<\/div>\n

 <\/p>\n

\"Select<\/a><\/div>\n

 <\/p>\n

Select your workspace folder.<\/div>\n

 <\/p>\n

\"Select<\/a><\/div>\n

 <\/p>\n

Input your application name.<\/div>\n

 <\/p>\n

\"Input<\/a><\/div>\n

 <\/p>\n

Select your URL and hit “OK”. Teams Toolkit will convert the URL you configured in Teams Developer Portal to a localhost address to work with the debugging process.<\/div>\n

 <\/p>\n

\"Select<\/a><\/div>\n

 <\/p>\n

Teams Toolkit would then scaffold your project, you now are ready to start development!<\/div>\n

 <\/p>\n

\"Teams<\/a><\/div>\n

 <\/p>\n

Open Teams Developer Portal from Visual Studio Code to publish<\/h2>\n
Once you finish development, click “Open Developer Portal to publish”.<\/div>\n

 <\/p>\n

\"Open<\/a><\/div>\n

 <\/p>\n

Select the Teams zipped app package, by default Teams Toolkit places the zipped app package at “build\/appPackage.{env}.zip”.<\/div>\n

 <\/p>\n

\"Select<\/a><\/div>\n

 <\/p>\n

Teams Toolkit will open your app in Teams Developer Portal and direct you to the “Publish to your org” page. From there you can click “Publish your app” to continue with your publishing process.<\/div>\n

 <\/p>\n

\"Teams<\/a><\/div>\n

 <\/p>\n

Open your app in Visual Studio<\/h2>\n
You could open your project in Visual Studio directly, note it requires Visual Studio 2022 17.6 Preview 2 installed (you can download it here<\/span><\/a>). To scaffold you project in Visual Studio with Teams Toolkit, open your app in Teams Developer Portal and navigate to “Develop (Preview)” -> “Open in Teams Toolkit”. Click on the \u201cOpen in Visual Studio (.NET)\u201d button to scaffold your project.<\/div>\n

 <\/p>\n

\"Open<\/a><\/div>\n

 <\/p>\n

Select “Open Microsoft Visual Studio”<\/div>\n

 <\/p>\n

\"Select<\/a><\/div>\n
<\/div>\n
Log in to your correct M365 account if prompted. Set your project name, location and solution name. Select “Create” in the “Configure your new project” prompt.<\/div>\n

 <\/p>\n

\"Set<\/a><\/div>\n

 <\/p>\n

Select your URL and hit “Create”. Teams Toolkit will convert the URL you configured in Teams Developer Portal to a localhost address to work with the debugging process.<\/div>\n

 <\/p>\n

\"Select<\/a><\/div>\n

 <\/p>\n

Teams Toolkit will then scaffold your project. You are now ready to start development!<\/div>\n

 <\/p>\n

\"Teams<\/a><\/div>\n

 <\/p>\n

Open Teams Developer Portal from Visual Studio to Publish<\/h2>\n
Once you finish development, you could open Teams Developer Portal to publish your app. Select “Project” -> “Teams Toolkit” -> “Open Teams Developer Portal to Publish”.<\/div>\n

 <\/p>\n

\"Open<\/a><\/div>\n

 <\/p>\n

Select the Teams zipped app package.<\/div>\n

 <\/p>\n

\"Select<\/a><\/div>\n

 <\/p>\n

Teams Toolkit will open your app in Teams Developer Portal and direct you to the “Publish to your org” page, from there you can click “Publish your app” to continue with your publishing process.<\/p>\n

 <\/p>\n

\"Teams<\/a><\/div>\n
<\/div>\n

 <\/p>\n

Try out this feature<\/h2>\n
Excited to try out this new feature? Head over to Teams Developer Portal<\/span><\/a> today and create your app! Make sure you have the latest Teams Toolkit Prerelease<\/span><\/a> installed for VSCode or Visual Studio 17.6 preview 2<\/span><\/a>. We encourage you to provide feedback in TeamsFx Github issues<\/a> to help us make this experience better. We are excited to see what you’ll build!<\/div>\n

 <\/p>\n

This preview is at sufficient quality level for general usage. However, it is not intended for production use since features can and probably will change. We recommend starting a new project to try out this feature.<\/em><\/div>\n

 <\/p>\n

<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Have you ever found yourself in a situation where you’ve created a new Teams app in the Developer Portal, but want to add customized code to it? Or you started directly in IDEs like VS Code and VS but are looking for simple app management configuration? As a seasoned Teams app developer, you may have […]<\/p>\n","protected":false},"author":113252,"featured_media":13463,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[128],"tags":[23,229],"class_list":["post-13425","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-teams","tag-teams-toolkit","tag-teams-developer-portal"],"acf":[],"blog_post_summary":"

Have you ever found yourself in a situation where you’ve created a new Teams app in the Developer Portal, but want to add customized code to it? Or you started directly in IDEs like VS Code and VS but are looking for simple app management configuration? As a seasoned Teams app developer, you may have […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/13425","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=13425"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/13425\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/13463"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=13425"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=13425"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=13425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}