Microsoft 365 Community Microsoft Teams, 26 Apr 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Deploy a Microsoft Teams app to Azure using Teams Toolkit for Visual Studio Code

Description

In this 11-minute Developer focused demo, Garry Trinder delivers the final installment of this series. You’ve built an awesome app on your local machine, now it’s time to move it to a remote environment to validate and share with others. The move is streamlined with 3 Toolkit features - provision to cloud, deploy to cloud, and publishing to your organization. In this example a simple tab app makes its way to the Teams admin portal and can be added to Teams.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 28, 2023.

Demo Presenter
• Garry Trinder (Microsoft) | @garrytrinder

Supporting materials
• Training - Build and deploy apps for Microsoft Teams using Teams Toolkit for Visual Studio Code | aka.ms/learn/teamstoolkit
• Documentation – Teams Toolkit Overview | https://learn.microsoft.com/microsoftteams/platform/toolkit/teams-toolkit-fundamentals?pivots=visual-studio-code
• Documentation – Teams JavaScript client library | https://learn.microsoft.com/microsoftteams/platform/tabs/how-to/using-teams-client-library
• Documentation - people module | https://learn.microsoft.com/javascript/api/@microsoft/teams-js/people
• Documentation - chat module | https://learn.microsoft.com/javascript/api/@microsoft/teams-js/chat

Previous demos in this series
• Demo 4 - Add chat capability to Microsoft Teams app using Teams JavaScript client library – Garry Trinder (Microsoft) | @garrytrinder (3/21)
• Demo 3 - Teams Toolkit Learn Path - Build a Microsoft Teams tab app using Teams Toolkit for Visual Studio Code – Garry Trinder (Microsoft) | @garrytrinder (3/7)
• Demo 2 – Teams Toolkit Learn Path - Build a bot using Teams Toolkit for Visual Studio Code - Garry Trinder (Microsoft) | @garrytrinder - (2/28)
• Demo 1 – Teams Toolkit Learn Path – Get started building apps for Microsoft Teams using Teams Toolkit for Visual Studio Code - Garry Trinder (Microsoft) | @garrytrinder – (2/21)

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

A

Foreign, my name is Gary schinder, I'm, A, Cloud, developer Advocate at Microsoft, and today we're going to show how to deploy a Microsoft teams app to Azure, using teams toolkit for visual studio code. If you have been following along for the last few weeks, uh this is the final week of a series covering the uh Microsoft learn path on teams. Toolkit called build and deploy apps for Microsoft teams, using teams toolkit for visual studio code.

A

So if this is the first session that that you've, seen of this series, there's four of the weeks for you to to go through, that's been been published on the on the community YouTube channel week, one we went through and just showed how to get started, installing team's toolkit um and also creating your first app from the the sample Gallery. Then in week, two we moved on to building Bots.

A

um In week three we moved on to building tabs and on week four we went through teams, JavaScript library and showed how we could integrate some of the capabilities from teams JavaScript library to create chats from a Microsoft teams Tab, and this week we will be going through how to deploy and publish our app. um So again, if this is the first time that you've heard of this learn path, you can check that out. It is live at AK, dot, Ms, slash, learn, slash teams talk it.

A

You can get up to speed with all of the information that I've talked about um over the of the previous weeks.

A

Okay teams toolkits, let's have a quick overview, so teams toolkit is a uh a series of tools, uh one tool for visual studio code. It's a visual studio code extension helps you build, uh deploy and publish uh teams apps uh directly in Visual Studio code. So if you're JavaScript or typescript developer you're in a Windows, Mac, OS or Linux, this is the is the tool for you.

A

However, if you are yep.net Developer using c-sharp, there's also teams toolkit for visual studio 2022, and you can download that now- and this is only available uh for Windows, but for this series, we've just been concentrating on the visual studio code extension now, I just want to cover a few prerequisites for for this session. I'm going to show you so first of all, we need a Microsoft 365, a tenant that has custom apps, enabled the uploading of custom apps enabled you obviously need Visual Studio code. As teams toolkit is a visual studio code extension.

A

You also need node.js installed. I have a version 16 and above is perfectly fine and for this session, because we're deploying to Azure you'll also need an Azure subscription. Okay, so you've built an awesome app now. What up to this point, everything that we've shown has all been built locally.

A

um So that's where you're going to be starting when you first start developing your teams app using teams toolkit for visual studio code.

A

So your next logical step really is getting that off your local machine and into a remote environment, most likely a development environment where you can test that you can validate it's there, that it's all working when it's not running on your machine and obviously share that as well with other people to uh to test and not have independency on your own machine running.

A

So there's three features that teams talk. It uh helps us with. The first feature is provisioning to the cloud, so this feature basically makes it easy for you to deploy the required Cloud infrastructure resources that that's needed to to host and and run your app. We have deploy to the cloud.

A

So this is the feature that's going to build and then move the the the code to your infrastructure and finally publishing to your organization as well, and this is where you're going to upload the uh the teams app and distribute that within your Microsoft 365 tenant, so that you know other users can then can then install that app.

A

So, first of all, I'm going to jump into Visual Studio code I'm just going to go through a sample project which is a cab app and just show you some of the key kind of files and and parts of the projects um that's relevant to to deploying your app. So here we are visual studio code. I already have an app scaffolded using teams toolkit it's just a a tab. App and I want to bring your attention to two folders: we've got the dot, FX, folder and templates.

A

Now templates um here is where our templates for building out the infrastructure live as well as our manifest as well. In the app package fix Ben expand the Azure folder. You can see that we've got a number of bicep files in here, so these are created when you create your your initial project, so these are provided for you out of the box and what's useful here, is that it's all pre-configured for you to be able to just run these. You don't have to make any changes to to get your your basic app up and running.

A

So this is for a tab project, so we can see that if we go to the provision um bicep file, it describes the uh the different resources that they're going to be needed um and Azure storage account is going to be created. So when we want to deploy our code, um that's going to be deployed to to Azure storage and a few other bits and pieces in there as well like identity, and but this is enough to just get you get. You started.

A

It also comes um set up with configuration as well, so there's an Azure parameters.dev Json file, and in here you can Define some of your own um own values. You can expand this file and it's already hooked up, so you can reference these these parameters within the uh within the bicep files. Now you get a generated resource name, so this is just uh you know the name of the project and then some random numbers and letters at the end.

A

So if you want to be very specific about the the naming you can come into here and and name the the resources how you would like them, but this is what you get as as default.

A

So, let's show you how this looks when we we want to provision, deploy and publish so I'm, going to move back to the slides and let's go through that, so first we're going to provision for the cloud. So, first of all, we need to sign into our Azure subscription just do that through the toolkit.

A

Just like any other login just log it into your account with your subscription is located that will show up in teams toolkit and then you can use the provision in the cloud feature to you know: select a resource Group that already exists or actually create a new one through the tool and then just confirm the prompt that will allow toolkit to to provision that and the process starts. You can click the output window to get more details.

A

It's going to take a couple of minutes to just go through, depending on the project that you've selected as well. Obviously, there's more resources in, let's say, a bot project that needs to be provisioned, but when it has you get nice ability to access your your resources, you can do that on the left hand, pane or or using the the button.

A

That's provided you just log into Azure, and there you go so we've got an identity and storage ready and available for us to now go to the next step, which is deploy to the cloud so use. Deploy to the cloud feature accept the prompt and this kicks off the build again depending on how complex your app is.

A

This can can take a few moments, but when it's done I'll deploy the code and give you the confirmation that that has now been pushed to your uh to your Cloud infrastructure and then the final bit is Distributing our app. So we can use publish to teams and select the install for your organization step, and this pushes the app to uh to teams admin portal where we can go and we can approve uh this app. So we can see, we've got one app that needs to be approved.

A

We can search for that and see that it's been blocked then actually go and publish that app as well to unblock that.

A

And then we get the confirmation and yes, it may take a little while for the app to appear, but once it appears it shows in the store. You can select that app and you can add it to uh to to teams and there we can see that it's actually running in your Azure environment as well.

A

So three quick and easy steps to be able to get your app from off your local machine and actually running in azure and able to test that with you know, without having your local machine um actually required, and you can distribute that to test users in your in your development environments.

A

Few resources which we'll put in the uh in in the recording description as well so I just want to remind everyone that this is the final session of the uh of the five week series that have been running. So, if you, you know, want to go and check out the learn, path, uh go to AKA, Ms, slash, learn, slash teams, talk it and, like I, say it's the final week, so a little bit of a celebration there.

A

And finally, if you have gone through the learn path or you're going to go through it, let us know how we're doing make sure that, when you're going through just you know, provide some feedback we're looking at these, we want to make it better and any feedback, any uh areas that you want us to to focus on. Next, we would love to to hear from you and with that Visa back to you excellent, really, really cool. Thank you, Gary on that one foreign.