Microsoft 365 Community Microsoft Teams, 25 Apr 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Bring your existing projects to Teams Toolkit for Visual Studio Code

Description

In this 16-minute developer focused demo, Garry Trinder covers several new features in Teams Toolkit v5.0 that make it much easier to migrate what you have to Teams. To create/deploy Teams app today is a lot of work. The task is simplified. Key v5.0 features reviewed – project files, pre-defined actions, and Visual Studio Dev Tunnels. Inspect differences in code walk through as migrate existing Teams Conversation Bot SSO quick-start sample into a Teams Toolkit project.

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

Demo Presenter
• Garry Trinder (Microsoft) | @garrytrind

Supporting materials
• Documentation - Available actions in Teams Toolkit | aka.ms/teamsfx-actions
• Sample - Teams Conversation Bot SSO quick-start | https://adoption.microsoft.com/sample-solution-gallery/sample/officedev-microsoft-teams-samples-bot-conversation-sso-quickstart-js/
• General Samples – Teams Samples | aka.ms/community/samples
• Repo - Migrated Project using - Teams Toolkit v5.0 Pre-release | https://github.com/garrytrinder/msteams-bot-sso
• Demo – Introduction to Microsoft Teams Toolkit v5 - New features and capabilities – John Miller (Microsoft) | @jmillerdev
• Documentation - Teams Toolkit Visual Studio Code v5.0 Prerelease Guide | aka.ms/teamsfx-v5.0-guide

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 ER I'm A Cloud developer Advocate at Microsoft today, I'm going to talk about how you're going to be able to bring your existing projects to teams toolkit for visual studio code. So what I'm going to do is cover a few uh new features that are coming in the the next release of of teams.

A

uh Toolkit it's going to make it much easier for you to take what you have bring it to teams talk if you've had issues uh in the uh in the past that, for every reason, you've not been able to uh to to try it out with existing projects and I just want to quickly cover kind of the scenario of what you typically go through at the moment to create a Microsoft teams. App. Let's say you create a project, create a a bot and one of the things that you're going to have to do.

A

First of all is go into Azure and do some setup. You're gonna have to configure Azure ad registrations an Azure bot service, configure SSO as well on on azure, okay you're, then gonna have to set up your project. um You know you might be cloning.

A

A sample from somewhere you'd have to run npm install to get all the the modules in you're gonna have to update the environment variables as well, adding all the IDS and secrets of everything that you've just set up in in Azure as well moving all those across then, when you've got all that set up, you need to start your web server, but you first need to start engrock. You need the tunnel, um so the the uh the bot service can talk to your code uh on on your local machine, send messages backwards and forwards.

A

That gives you a dynamic URL, and so you need to update your app manifest. You then need to update the bot and they'll they'll have a bot which messaging um URLs use in the new domain. Then start your web server and then, finally, once you've done all that, you then need to package up your uh your app, create your your app manifest as well, and then side load that into teams.

A

It's a lot of effort before you even started really thinking about code and developing. It's a lot of a lot of work, and hopefully this is going to be in the past now.

A

So if this is the, if this, this is the current, if this is going to be the past, what's going to replace it well automation, we don't want to have to do all of these things. We just want to hit a button and it happen and teams talk at Visual. Studio code is an extension that is helping helping people now do that to create and debug and deploy, publish Microsoft teams apps into their tenants really fast, just create project, press F5 and just start developing.

A

You know no more manual configurations or setups, just let that automation do the groundwork for you, leaving you time to actually develop your your applications. However,.

A

Great for getting started, however, there's there's a few issues with the current version in in how it's been uh designed, and it we see comments like this. Like I, don't really know what toolkit is doing behind the scenes. It's not really clear what is happening. I'm hitting F5 Magic's happening, that's great, but I really want to know and I want to be able to change what it's doing as well. It's it's doing most things for me. Actually I want to add bits to it and extend um extend what toolkit is providing an important one.

A

I want to reuse resources that have already been provisioned, rather than talk it Go and create everything from from scratch like every app is brand new I actually want to bring my own bot service. I want to bring my own Azure ad app registrations and let's talk it use that and a final one as well. um Certainly in the bot scenario is you know, I can't use engrock, as my organization blocks it, which means I, can't use the tool because it's very opinionated it wants to use engrock for for that tunneling.

A

So the good news is uh all this feedback has been taken on board and has been addressed in in the new version, which is which is coming I'm just going to quickly go through some of these key features, and one of the big improvements is this concept of a project file um and this project file is, if you're familiar with GitHub workflows, um it's a yaml file which basically describes the whole process. So, whereas before Oh I, don't really know what's happening well now it's in one file.

A

You can see what is happening at different stages and there's three different stages that that this project file can have this workflow, so you've got provision um stage a deploy stage and a publish stage as well, where you can execute these independently and add tasks uh into these uh into these phases, and these tasks are actions. So each action um is kind of like an individual block that just describes that step of what's actually uh going to happen.

A

It's really clear and easy to see what exactly is happening um and and when it's happening as well, and the steps that that uh that it's it's going to take so the new team's toolkit comes with a set of predefined actions.

A

um There are actually 26 available actions, and here here are all of them.

A

Don't worry if you can't catch them, um because it's all documented, if you want to go, take a look: go to AKA dot, Ms, slash, teamsfx, Dash actions, and these are all of the actions that enable you as a developer, to just add and extend these project files with your actions and they cover a whole host of you know very specific tasks like creating and updating Azure ID app registrations to Modern, Eric uh kind of you know, run npm commands run an arm deployment as well.

A

So there's a wide range of of actions that you can choose from and finally, uh for the the people who uh you're not able to use engrock uh engrock is no longer going to be the default, and so, as of the the the next version, Visual Studio Dev tunnels is going to be used as the default tunneling. Service as well, so that's just going to be running. That's in Visual Studio code.

A

We've still got the dynamic URL in there as well, but uh if you're, an organization that is yeah blocking ingrock, where this is something that you can uh look into. If you still want to use engrock, though you can obviously change back and there's documentation for for you to be able to do that as well.

A

Okay, so I was talking about bringing your project uh to teams toolkit for visual studio code. So what I wanted to show was um a process that I went through recently, where I started with a sample.

A

uh This team's conversation box, the SSO quick start, um which is a very simple uh sample which is just implementing SSO it's using an Azure bot service and it's using the SSO uh oauth configuration feature in Azure bot service and what I wanted to do is to just bring that into teams toolkit, and this is the process that I that I went through so to quickly give you an overview of the steps. I created.

A

A new project for teams toolkit I didn't have to um I could have just added some of the the files in from toolkit into into my project, but I just wanted a bit of a clean flight and so I then copied environment variables of my old project.

A

To my my new project, I updated the app manifest move, the source code over update the dependencies and then update the workflow steps to make sure that the app was working in exactly the same way um as it was previously, but it was in toolkit running giving me that F5 uh capability to get up and running really quickly and I have a migrated project.

A

So uh if you want to go look after look at the the final code, the final project- and this is all available on GitHub at the URL below and I'll- share that afterwards.

A

So let's take a look at some code. Well, actually, first, let's take a look at the existing app, so the existing app has an uh Azure ad app registration. So it's all set up. I went through did all this at manually, so all my hard work I could reuse in the new teams. Toolkit I didn't have to start from from scratch, and I've got bot Service as well. uh That is all configured. It's got oauth configuration in there as well. This was already provided.

A

So there's all there's all my details uh in in there, and here is the actual project. So this is the old project. So this is not in teams toolkit, but we can see. We've got an app package here and so I've got my manifest, which I had to manually zip up and then actually deploy manually into my uh teams environment, so so that I can actually test it.

A

uh We've got some source code, so we've got a Bots folder dialog folder we've got the index.js as well, which which, where our web server um code lives, we've got the environment variables as well, so in here we've got the app IDs, they have passwords connection names and things that we can reuse in our in our application. Oh we've also got a graph client as well. This is doing SSO, it's it's actually calling the the graph.

A

So, let's take a look at the uh the project, the final project and I'll step through um the areas of the project where I I made changes um to uh to bring all of this into uh teams toolkit project.

A

Here we have our project, so this was just created using a a bot template um using the teams. Toolkit create your app wizard. So this is a V5 project, um so we can see I've got my bots folder I've got my dialogues folder. So this is a source code from from the other project. I have my app package up here, which contains my my manifest, which I I brought across.

A

We have an M folder, which contains all of my environment variables as well, um so I copied those across I've also got an infra folder, which is just you know. It's enhanced the sample already, because you by default you get bicep files that will provision some of the uh the resources in Azure. One of them is the Azure bot, and that was great, because I already did a bicep file that I could take and then amend for. For my uh for my own own needs.

A

uh Also I've got a simple graph. Client code there as well and the the index.js which, which is the the web server code so first thing I that I actually did was I, moved all the environment variables over. So let's take a look at the m dot local file, so in here I simply just copied in and pasted the values into here. I didn't have to do anything just provided it, the the ID that already exists- and in this case it's the I.

A

The bot ID in the team's app ID are exactly the same: I updated those placeholders um and then what I did was I updated. My manifest so I come into the Manifest. Here's pretty much a carbon copy of of what the old project was, however, because I'm in teams talk, it I get the ability to add placeholder values. So you can see here I'm using this token replacement. You can see the value in there, so you can really uh easily inject these.

A

These variable values uh into the Manifest, and this is something that actually was available in in the V4 projects, but actually now in V5, it's even better, because these placeholders go everywhere. You can use them across your whole project and they will just get injected in uh build time which is really really useful, and so I already mentioned uh I've throughout the environment variables across I've updated. My manifest and I've brought my source code across as well.

A

Now um one of the things which which I mentioned earlier was this uh project file, so this teams, app.local.yaml file, is, is where kind of like the the magic happens when I hit F5 here's all the provisioning, that's going to take place like creating the teams app, um creating the the uh the bot uh active directory app as well. Now it even though it says create it actually does an update as well.

A

So it's item potent which is nice so it'll just you know if you can run this as many times as you like, it'll either. If it doesn't exist, it'll create it. If, uh if it's uh it does exist, it will just update it as as well much now. uh This whole file is the default file. I've actually commented one section out um because I had to I had to update it. So it's worth knowing that when you create a bot using teams, toolkit uses bot framework portal to create a bot registration.

A

Now the sample that I'm using is using an Azure uh bot service.

A

It's using a feature from that service for it to work so I couldn't use this, um but because the flexibility of the tool I was actually able to create an arm template a bicep template which goes and updates that uh that bot service every time I hit a five which is great because I know that my Dynamic URL for my tunnel is going to be changing every single time and I need to update that uh in my in my bot on my bot as well, and so that was nice.

A

That I was able to add in this arm deploy step instead, and so so that can actually deploy things into Azure, even though I'm doing quote local development and then finally, what I added was a file to update my SSO permissions on the Azure ad app and I could do that by adding in this aad manifest Json I actually went to the Azure portal copied the whole manifest dropped it into this file added in some placeholders as well.

A

So get that ability to add in the the bot ID and in here yeah we've got all the required resources, toolkits actually doing some hard work for us. It's actually telling us, you know translating the ID to the to the display. Name and I can come into here and I can add more Scopes if I want I can hit F5 and that will go.

A

um You know, it'll, go and update that in azure, and it's the same for the uh for the bot Service as well. If I go into infra I have this Azure Bots bicep file, and in here it defines the uh the the service details, which channels that I need and also the graph connection as well. So if I want to change the scope, so I have to go into the portal anymore, I could just change it in here hit F5, and that will be done for me.

A

So real benefits of of using um teams toolkit here in the fact that I've taken a sample which was uh hard and a lot of manual kind of uh labor to get to get going now, it's in a great place. I can actually share this with other members of my team and and they could just hit F5 and it'll, go and actually provision all of this stuff for them without actually needing to go to the uh the the port, which is a fantastic, a fantastic update.

A

So all of this is available for for you to today. uh You can try the next version of teams toolkit just click the Switch to pre-release a version in um in Visual Studio code in the in the marketplace. If you've already got it installed and if you want to check out uh the the guide as well for more details on V5 and what's coming because AKA dot, Ms slash, teamsfx, Dash v5.0 guide and with that, thank you excellent. Thank you. Gary.