Your Onramp to Creating Microsoft Teams Apps with the Teams Toolkit

[Music] Hello everybody and welcome to my webinar today. Uh really happy to have everyone joining us uh from wherever you're connecting around the world um for to learn more about how to uh get started with uh Microsoft Teams and how to start building apps for Microsoft Teams. Um, primarily though, we're going to focus on the tooling that's available to you uh to create Microsoft Teams apps. So, I'm going to walk through a bunch of the tooling um that we have and give you kind of a lay of the land of like, hey, I want to build a Teams app. I'm a developer. Where do I get started? Um, before we kind of get dive into this, I want to kind of explain a couple uh things uh to kind of help you get around the webinar and make sure that you get the most out of this. Um, I guess first and and foremost, if somebody wouldn't mind uh just giving me a little reaction uh in the chat to let me know that you can both see me and you can hear me uh as part of the webinar. Um, obviously if that's not happening, I got something I got to deal with, but I just like to know if you can Oh, see and hear me. Awesome. Thank you very much, uh, Steve. Um, okay. So, in this webinar, um, I want please feel free to ask as many questions as you like. Drop those in the Q&A panel. Um, I've got more than enough time uh to answer any of your questions here um in the uh in during our uh the time that we have allocated for this webinar. Um I've got it set on the calendar for 90 minutes. Um I have 90 minutes to spend with you uh about talking about teams. Um but you will absolutely see uh you'll actually get answers to all of your questions. Um I probably have a little bit less than an hour of content. Um maybe even less than that. This is very much kind of an intro thing. Um, so we have more than enough time uh to do your um uh to do questions. Um, so what you should see on the screen right now, I see a couple people in the chat. Um, is just me and like a picture and picture off to the side um of my uh uh of the slide here. Um, I can go full screen on the slide. That's what oop, that's not the right one. Um, this is full screen on the slide and then I can also go full screen on me as well. Uh, but for now I'm just going to kind of leave it over here to the side. You should see a couple different experiences there. Um, another thing too, take a minute, let me know where you're where you're connecting from. Go in the chat, drop a message in, introduce yourself, uh, let me know where you're where you're connecting from. I can see Austin, you are in also in northeast uh, Florida. You're about an hour and a half away from me, I think it is, over in Lake City. Um, I'm about 30 minutes south of I 10. Um, I'm actually right between Jacksonville and St. Augustine. And then I'd shoot straight over to uh uh go straight west over to Lake City. Um Steve from North Carolina. Awesome. Steve, where are you in North Carolina? Uh my family spent a whole lot of time in western North Carolina uh as um I got friends and family and up in uh uh Asheville uh who were affected by that hurricane uh last year. Uh Greenville. Cool. Awesome. All right. Um I see more people are connected, so let me know where you're connecting from. I'd love to hear it. All right. So, let's go ahead and let's get started. I want to give you uh well, let's let's go and get started instead of doing any more of that preamble here. So, really quick, my name is Andrew Connell. Um I am a longtime SharePoint uh developer. I spend a lot of time in the Microsoft 365 space. Uh these days I spend most of my time balancing between SharePoint framework development uh where I have classes and I teach on that uh Microsoft Teams app development which we're talking about today. Um I do some stuff with SharePoint embedded. I worked with Microsoft early on uh for creating a bunch of content learning content around uh SharePoint embedded. Um let me know if you're interested in seeing a webinar on that. That's something else I'd love to talk about. Um these days I'm spending a lot of time in extending Microsoft copilot so using declarative agents um or custom engine agents and it's something that I talked about in one of my previous webinars. Um with that being said too if you want to learn about all the other webinars that I'm doing I'm trying to spend a lot more time doing these free webinars um going forward. So I've got I think three or four of them scheduled uh in the month of April. Um, I did one or two of them in March, but I've got some that are going to be planned out and be published pretty soon, uh, for May and June and July. So, um, I've got ideas on what I want to what I want to cover in the webinars. I'd love to know what you want to see and what you want to hear. Um, as well, uh, and it's anything around like Microsoft 365 developmentbased topics. Um, I have a company named uh, Vitanos where my mission is to help you be the indispensable expert at the Microsoft 365 ecosystem from a web development point of view or I say full stack developer. Microsoft says professional code or pro code or code first. I don't like that because it kind of implies that people who are just getting into this, it's not, you're not welcome and that's not the case. Uh full stack is basically I do client side stuff and I do server side stuff to implement my client side stuff. So I could do the full stack. I could do a database, I could do message cues, I could do um authentication, uh storage, you name it. Okay, so that's a little bit about me. Um you can see some contact info over there on the lefth hand side. Um I'm most active on uh Blue Sky, LinkedIn, and on my YouTube channel. Um, there's other places that I'm active on social media as well, but that's really where I'm try I'm spending most of my time uh these days is in Blue Sky and LinkedIn for like long form and short form content uh and then also on YouTube uh for uh my different videos. All right, so what are we going to cover today? So, I want to talk about what the team's toolkit is. And we're in a weird time right now because I uh it it and I'll get to it in just a little bit. Um because you're going to see some stuff that when I get to my first little like demo I want to show you that Microsoft sure seems to be implying that something is going to change pretty soon. But don't worry about it. I really think that this is still going to be very very applicable not just today but also going into the future as well. uh because I don't see fundamentally stuff is really going to change all that much. Again, we don't know until they actually really follow through and do and make this change that they've kind of alluded to, but I'll get to that in just a little bit. So, what are we going to cover? Well, the team's toolkit, a lot of people think that the team's toolkit is just this Visual Studio uh code, this VS Code extension that we have for VS Code. That's not true. The Teams toolkit is actually a suite of a whole bunch of stuff. It involves a command line interface uh utility. It has an extension for uh VS Code. Uh there's an extension for Visual Studio that doesn't have as many features as we have in the VS Code one. It's a suite of project templates and samples and utility packages. It's a whole bunch of stuff, right? So, I'm going to look at each one of some of the each one of these things and I'm going to go over them in uh various degrees of depth so that you can have a good idea of what's available to us and what you would use um inside of your projects. I'm going to spend most of my time really on those first two things. I'll talk about uh the project templates and the utility packages, but I really I I find that there's a lot of stuff that we have inside of a Teams toolkit project. And so I want to give you a tour of the project and kind of help you understand what you're going to what you can um uh look forward to. Um these tools are always being refreshed too. Microsoft has almost a monthly cadence of how often they're updating these and the March update that that shipped uh about a week and a half ago, maybe two weeks ago. Um jam-packed with a ton of improvements uh and things. I haven't had a chance to check out all of it, but if we have time today, I'll actually uh call out some of those things. Okay, hope that sounds good. Uh, if there's something you want to see, you got a question, like I said, drop it in the Q&A panel. Um, I'm again, I will try to answer questions as we go along, but if I see a question that I'm going to get to it later, I may just hold it until then. Uh, and worst case, we'll answer questions at the very end. Tons of time for questions. And I have two slides on this. Don't know why I did that. Okay, I want to start by first focusing on what is the team's toolkit command line interface. This is the this is like the big like the cornerstone of everything related to uh the team's toolkit and what the visual studio code extension uh is going to leverage quite significantly. So what the CLI is um this used to be known as uh teams FX. So all of this teams toolkit stuff it used to be called teams FX. Um, and as a just a little footnote to this too, if you are ever curious how they've done any of this stuff, one of the coolest things about what the team's development uh team has done is all of this is done in one public GitHub repository. It's all open. So, you can look at all the source code for all these packages I'm going to talk about. You can look at the the source code for the CLI. You could look at the the source code for the Visual Studio extension and a whole lot more stuff that they use to facilitate all of this. So, uh, it's a great it's a it's a public GitHub repo that you can take a look at. Um, the CLI, as I said, it was it was initially called Teams FX for the Teams framework, and it was renamed, I think it was about a year ago, maybe a year and a half or two years ago, to the Teams toolkit CLI. So, what is this? This is going to allow you to work from a command line interface to create and manage and do some changes to your Teamsbased projects. And it also allows you to do some stuff that's going to help you like clean up some stuff um as well. Now, um all of these commands you see here, what I've done is I've installed it and I went through and just said I said just CLI or Teams app space-h for help and I just said dump out everything that you can do. And I took this screenshot. The way you're going to get this project is you're going to get it through the in or this utility is through the npm um uh the npmjs registry. So if you go to npmjs.com/package uh microsoftsapp-cli and you install this globally on your machine, this is going to have the command line interface uh installed for you that that you can take a look at. All right. Now, what's cool about this what's cool about this thing is that, like I said, it's gonna allow you to do a lot of stuff from the command line interface. Now, what one of the things I love about this is that you will see in just a minute when we get into the actual projects is that this utility is going to make like CIN CD and um uh the CINCD story of like comm uh continuous integration and continuous deployment really really clean and really easy. Um, if you are a and actually by a show of hands if you just wouldn't or by a show of give me thumbs up. How many of you are SharePoint framework uh developers and you've worked with the SharePoint framework for a little while so you understand like things like um uh like how we have like the Gulp bundle and Gulp build and the whole tool chain. I tell you I'm a SharePoint framework person. I've been the SharePoint framework person since before they released it. Um and helping Microsoft uh build the learning content around it. But oh my goodness, it is like I love what they've done with teams and I really wish that the team the SharePoint framework team would like scrap their entire build tool chain and adopt what the team's uh toolkit has done and just kind of we use the teams toolkit to create uh SharePoint framework projects. Uh some of you may be like wait a minute I thought there was a way to create a SharePoint framework web part as a tab inside of the Teams toolkit visual studio code. there is, but it still uses that whole Yman generator story and that's uh it's a little challenging there. So, um at any rate, so anyway, you would install the CLI and from here is where you can do a whole lot of stuff with your project. So, we can see things like um we can add features uh to our to our team's project. So, I can do let me get my little pointer out here. So I can add uh add um new features to my team's application that I've deployed uh to uh my team's um uh like my team's to my team's tenant uh for my organization. Um you can see where you can go through and manage your different authentication accounts. Uh you can also manage the life cycle. We're going to look at this a lot when we get into our project. There's a life cycle for deploy. There's one for uh provision. And then there's also one for publish. Um, also, you know, when you create a lot of like test projects in your developer environment and you need to kind you want to go through and clean all those out and delete stuff and it usually means like, you know, if you're in the SharePoint framework, I'm going to end up having to go like remove the web part from a page and then I have to go uninstall the app that I installed and then go to the app catalog and um undeploy that and then remove it. And then if I did some other stuff like special peri done permissions, I have to go remove a permission from API center. Well, they have this great option that we have now in Teams where it's uninstall, which that says, "Hey, if you run this from the root of the project on your machine, it'll go clean everything out for you. It'll undo everything, which is really, really, really handy." All right. Um, there's also this validate command here. That's This is good for if I want to validate uh a couple different things inside of my Teams app. So, if I wanted if I have like my team's manifest, I want to make sure that the JSON file for my team's manifest is um uh is valid. It's one of those things that I I can run the validate command and it'll go through and do this. Although, this is one of the things that happens uh when I do my uh when I do my build. Um okay, great. So, this this is the Teams toolkit CLI. Why don't I jump over to a a demo here to where we can take a look at this? And oh, this is not what I wanted to show you. So, let me go ahead and let's close All right. So, this is what I wanted to show you. Okay. So, if I come over here into the um into my console now, I'm running on a Mac, but don't worry, everything is exact same if you're on Windows. Well, I mean, you have more reboots and and blue screens than I do, but that's neither here nor there. Um, I already have the Teams toolkit installed. So, I can say npm list G, excuse me. And you can see that I have the teams teams app CLI uh installed and this is the most recent version of it 3.0.10. Now, now's for the little Easter egg part of this webinar. Watch this. If I say, let's go bigger here. If I go teams app-help and I run this, you see the same thing we saw just a minute ago. But if I scroll up a little bit, you're going to see this big yellow message. And what does it say? It says deprecation warning. Rut row. The CLI package and its command uh are being renamed in the upcoming release. Which one? I don't know. It just says the uh the existing package will no longer receive updates. Please switch to the new package and update your workflows accordingly once it's available. Well, here's what I can tell you. And I have to be a little cagey with this because they haven't said anything publicly about it. Um, let me just let's see. Let's let's say let me say it like this. And if you have a question about it, go ahead and ask the question and I'll do my best to answer it. But the Microsoft's MVP summit was last week in Redmond when that's an event where MVPs I'm an MVP um all we all get together and we listen to a whole bunch of stuff. But the entire event is all event is all wrapped up in uh a non-disclosure agreement. So I can't share with you stuff that I heard um until Microsoft discloses different things. So I can't say anything. Um when I saw this message uh relatively recently uh in in the CLI, I was like, "Oh, I know what this is, but I can't go any further than what they're saying here." So let me just say it like this. Everything that I'm going to show you today, I do not expect anything is really going to be different once this uh what do they call it? Um this being renamed in an upcoming release. Okay. I don't expect anything to be really all that different. Maybe the fact that it's called Teams app CLI and Teams app. Well, they just said in in the message here it says it's going to be renamed. So maybe it's just going to be a renaming. I don't expect to see that much more. Maybe there's be some stuff I don't see that much more that's going to change that's really going to impact us. Okay. Uh now there is nothing to switch to at this time. So you don't have to go look and say well why are we looking at this thing if it says please switch to the new package and update your workflows accordingly. I I I mean I can't do it because it's not available yet. And it says once it's available. So they could have worded this a little bit better I think. But regardless um I just want to make sure that you're aware of this. I just don't think that's going to have a profound impact on anything that I'm showing you today. All right. Um, you can read between the you can read between the lines. I don't want to go much further than that, but if you have a question about it, please go through and post it um in the chat. Um, so this is how you would actually get to the team CLI. Now, I I want you just to the only thing we're going to really focus on with the team CLI here is I just want you to think about for for a moment. I just want you to think about things like publish or provision or uh deploy. I want you just to think about some of those things. Okay? Just want you to think about that for right now because the next thing we're going to talk about is going to leverage some of the commands in this and you'll understand how it comes together in just a few minutes. We're going to spend more time with the with the U Visual Studio Code um extension. So, with that, let me let me jump back over to my slides. Um, and let's jump into the next thing that I want to cover here, which is the big thing, which is the Teams Toolkit extension for Visual Studio Code. So, what is this? The Teams toolkit extension for VS Code is something you're going to get if you go to the uh VS Code and I'll show you where you can get this in a bit, but if you go into VS Code and um uh and you um uh where I'll show you how where you can get it, how you can install it. I've already got mine installed. Um, this link right here will take you to the marketplace, uh, the VS Code, uh, the Visual Studio Code or Visual Studio marketplace where you can install the extension. It's totally free. Doesn't cost a thing, uh, to install it. We're going to see it in just a minute. The reason I grabbed this picture uh, is that I want you to see about see like all the stuff that you can end up doing with the Teams toolkit. Um, there are parts of it that I love, there's parts of it that I don't like. Um, but and I'll be a little opinionated on some of it. I'll make sure that's really clear. But for the most part here, you're going to start on this left-hand side where you're going to either create a brand new project or you can start from a template using one of the samples. So once you create your project, then you're going to go about creating your app. You're going to start doing whatever it is. If you're building an app, if you're building a web part, if you're building an extension, we're going to do all of that. I looked at the questions that those of you who registered for this webinar um the questions that you submitted ahead of time and um I didn't get many questions. A little disappointing, but the is I want to make sure this webinar covered all of your questions. But the the ones that I saw was like one person was uh one person or a bunch of people said, "I need to build an app and I need to understand how to go about doing this and what the tooling is all about." Well, I'm going to at least get you started with that, but you're not going to learn how to build everything about the app. At the end of this webinar, I have I'll talk about another webinar uh that I have next week that you can register. It's also a free webinar um to where I'm going to go over in a lot more depth of all the things you can build and what kinds of scenarios you can unlock uh for Microsoft Teams um apps. Um, another question that came in too is someone said, "Well, how does all this stuff fit together uh about, you know, between like Microsoft Graph, uh, between um, uh, Power FX, uh, just you name it. And the essentially the way that this worked when you and I'm going to I'll cover a little bit more of that in my webinar next week. But just to answer that one question that I saw come up two or three times from some of you the it is not at all so directly the piece that you asked. It's not at all related to Power FX that is all part of Power Platform and there is no kind of like overlap between building apps as I'm showing you here and building apps using Power Platform, okay? Or building Power Apps or Power Automate or anything like that. Um, I'm not saying there's ways that you can like build one that leverages another or vice versa, but we would not use Power FX uh inside of a Teams app. When you're building a Teams app with with uh Visual Studio Code, you're doing what Microsoft calls the full stack or the or sorry, what I call the full stack or Microsoft calls the code first or the procode story. um that is what I mean by that is that this is you're building a web application that you are going to deploy and host somewhere and you're simply going to make teams aware of your application and how it extends teams. So for example I'm going to build a tab and that tab is going to be just a a web app that's running inside of of an iframe. That's all a tab is in teams. It's just an iframe and when you click on the different tabs it simply is loading different iframes. What do I want to go in that iframe? That's my web app that I create. Traditionally, it's going to be a single page application. If I build a message extension or if I build a web a a bot, those are going to be leveraging uh web services. So, when users communicate with my bot or my message extension that will be that will have from the teams client, the message is going to be sent to uh Microsoft Teams. Teams is going to send that to something called the Azure AI bot service, which will then redirect the request uh to wherever my web service is running, either on my local laptop or when I'm doing development or when I'm uh in uh like some other service that's hosted uh when I'm working in production or shared development or test environment. I'm going to talk more about that kind of stuff next week, but that's just the gist of where things come together. the entire team's API that you end up working with, there's a client side API and then the entire server side REST API is all in Microsoft Graph. So, it's a little different from SharePoint where those of you who are old school SharePoint developers or SharePoint framework developers, we had a SharePoint REST API and today we can still get data and interact with the SharePoint REST API for example from the SharePoint framework. But when we're working in the context of um uh the SharePoint framework, we also can get not all endpoints but most of the endpoints we for SharePoint we can also get to through Microsoft Graph. Teams is different. Teams is different because Microsoft Graph came after the SharePoint REST API came out. So that's why we kind of have two ways to do it and graph is just like a proxy to get to the SharePoint REST API. When it comes to Teams though, Teams came after Graph. So everything you do with teams, you do it through the graph endpoint. And there's generally an endpoint called graph.microsoft.com/ and they call it the teamwork endpoint. Although it really there's lots of different endpoints, but teamwork usually falls under the the umbrella of it's related to Microsoft Teams. So you got things like online meetings that's part of teams. Okay. So anyway here, what is this whole like life cycle that we're doing here? Well, I or what are we doing with the visual studio code extension? So here we're going to build our application. We're going to develop it. Uh and before we're ready to debug it, I want to go through and um I want to go through and like you know edit the manifest and tell Microsoft Teams what is what kind of things do I have inside of this app? As I said a minute ago, do I have a tab? What kind of a tab is it? Is it a personal app? a tab in a personal app or those are the things I can pin on that lefth hand rail in teams or is it a tab that's going to run inside of a group chat or inside of a t a channel with inside of a team um or is it a message extension and if it is what is the ID of the message extension that's registered with the Azure uh AI bot service so that teams and the Azure I bot service knows where my web service is. Um is it a bot? it works the exact same way as a message extension or as I've covered in another webinar is it a declarative agent where I want to um extend and create a custom agent for Microsoft 365 copilot the manifest file in teams is essentially the router it's the it just tells teams what can this thing do and this file which we'll look at in a minute that is just a JSON file inside of our project so that's where we're going to add all these different capabilities of things that we can do inside of uh inside of our Teams app. Now, inside the Visual Studio Code extension, I'm probably going to want most likely uh going to want to sign in to my Microsoft 365 tenant. And the reason I do this is because when I do the whole F5 experience in the Teams toolkit, it that's how it's going to upload my package and upload my app and deploy it to my team's uh tenant for sideloading for me to be able to test it and develop it and play with and play with it. Um, now furthermore, when I want to go through and do some stuff, uh, I want to go uh provision my app and I want to go do more than just that, um, I'm going to want to provision it inside of, uh, Azure or that's I can provision provision inside of Azure. Now, when it comes to the team's toolkit, all of their templates and everything in the toolkit assumes that you're using Azure for all of your stuff when it really boils down to it. And Microsoft doesn't really say this in their documentation. It's not it's not as clear, but it really when it really what it really boils down to is that Microsoft uh Teams does not care where your app runs. I have a customer that is a Java shop that everything runs inside of AWS, Amazon Web Services. There is only one resource that you have to have on the Microsoft side uh for your team's app to work and that is an app registration inside of Microsoft intra ID. Now a lot of people think that's a part of Azure. It's not. Um it's kind of like intra sits up above both 365 and Azure and there's a trust relationship with intra. So uh I have to have an app registration inside of intra because teams trusts intra. So that's how code from outside of Azure or even inside of Azure can authenticate with intra uh and it knows that it can trust teams and so there's that trust relationship. So you will have to have an intra ID app. Doesn't cost anything. It's 100% free. You don't have to worry about that. In fact, you already have an intra ID tenant when you create a Microsoft 365 tenant um because that's where all the users and groups are going to be stored. Um the only other kind of a resource you may have to create inside of Intra is if you're doing a bot or a message extension uh because uh those things are uh leveraging the Azure AI bot service for the communication routing. Teams never talks directly to our web service. Teams talks to the Azure AI bot service that handles the communication to and from our uh our web service and then it route it once it we get a it gets a response back from our web service it knows how to send it back to teams so that the message gets back to the correct conversation or to the correct user or if the user is online on both the desktop client the web client maybe their tablet maybe their phone uh they have the the message gets routed to all of those different clients that they're logged into uh with inside of teams. Um for that you then you can then uh to make it easy for the provisioning if you're using Azure you can also sign into Azure inside the Visual Studio Code uh extension and what that will do is that when you hit the F5 experience it will do things like automatically create the intra ID app um it'll create other cloud resources that are necessary when you go to maybe say do your deployment for pieces it'll go through and it'll deploy your Azure function if you have a serverside API it'll go and deploy your Azure function resource it will create uh the Azure AI bot service registration uh for your bot. Um so it really greatly simplifies a lot of that stuff for you. And then finally you can then publish your app over to team. So once everything has been provisioned and everything is up and running inside the cloud you can then publish your app. And the process of publishing your app is going to uh make it available to everybody else in your organization uh for installation and use within their their um uh within their own team uh their own team or on their own personal as a as a personal app. Now um that's not entirely necessary. That's totally up to you. Um and furthermore, there are things related to like the publishing process. There's a whole there's a story uh that you could have if you wanted to create an app and you wanted to put it in the public marketplace. That's Microsoft's uh app source uh and you could up you could deploy it to app source and you could even set up a um uh an offer associated with it and just like people build apps for like iPhone or Android, you could do the exact same thing with your team's app and app source and people could buy your app and uh after Microsoft has validated it. same kind of concept we do with all the mobile platforms. Um they review your code, they review your offer, they make sure you make meet certain requirements. Uh and then uh and they keep I think it's like 20% or 30% of the revenue that they receive from the app and then the rest of it gets transferred um over to your bank account. So you there's actually a way that you can make money on on building and selling Teams apps uh through the public marketplace. Um, I have a whole like discussion on that that I think is a great opportunity, too, because you get a whole like salesforce uh uh or sales team uh without even paying for it. So, that's different. We'll talk about that a little bit later. Um, okay. So, let's take a look at at the VS Code extension and what we can and what we can do with this. So, I'm going to jump back over to my console here or back over to my uh machine on my uh my workstation and let's go create our first Teams app and like see this guy running. So, what I have here in in Visual Studio Code, I've already got the Teams toolkit installed. Now, if you don't have it installed, all you do is go to the extensions um I don't know what this thing is. Let's just call it the left rail. You go to the extensions rail inside of the Teams toolkit and just do a search for Teams toolkit. And if you haven't installed it, you'll see how these other things I don't have installed will be listed. And here I have I already have it installed, but when you select it, just like if you select any of these other ones, it'll take you to the page in the um in the Visual Studio Code uh marketplace where you can learn more about this um about this extension and all this stuff. So this is you can see that I'm running the latest one that came out on Monday uh which is I think when that deprecation message showed up. So you know we're just two days and looking at the brand new one here um that you can take a look at. actually last updated yesterday. Wow, we are hot off the presses. 6:00 p p.m. I wonder if that's uh UTC or Pacific time or my local time. So 6 let's say say it's 6 p.m. my time. So I'm Eastern time zone. So uh that's um Wow, that's really current. Um okay, so that makes me a little scared. I've I've only used it one or two times since then. So uh got to love it when things update. Got to love the cloud stuff when you're presenting. All right. So once this is installed, what does it do? What it does is it in it adds in this new tab on your in Visual Studio Code. Now this is going to seem a little meta. I don't like how they do this, but it is what it is. I'm just the messenger here. So when I select the Teams toolkit, when I select the Teams toolkit, you're going to see I get a couple different options here. So they have these guided tutorials they've set up here. I'm your guide. You don't need those buttons. You've got you've got Andrew Guide. So, I'm going to select create a new app. And what that essentially does is that's going to walk me through this wizard-based experience of what do you want to create. So, we have all these different options here. And then it even has one to say, hey, I can start uh talking to to GitHub Copilot uh to uh uh figure out what I want to create. It can help me create my app. Um that's brand new and it's in preview. And so, I don't want to do a preview thing with you. I want to do something that I think I see most people building and that is I want to build a web app. I want to build a tab. Just like in SharePoint, we want to build a web part. I want to build a tab. Kind of surprised nobody's asked the question, would you use the SharePoint framework to build a tab in Teams or would you do it the way I'm showing you here? Somebody has that question. Make sure you post that in the chat so we can cover that towards the end is I have a I'm very opinionated on that. Um, but you can see the other options here. There's the bot option right there. There's a message extension. We can even create an Office addin. Interesting. So, let's go through and let's pick and we can also create the two different types of agents for Microsoft 365 Copilot. I'm going to start by creating a tab. So, I'm going to choose tab. And now I start getting all these different questions. So, you can say I can create a dashboard. I can create a basic tab. That's really slim down. Um, I can use I can use the SharePoint framework to create my tab. Slight tangent. I hate this option. It's not a good option. and I will talk I can talk about it if you're interested if you're starting from the team's toolkit that's not the way you want to start even if you have SharePoint framework experience and I will I can explain why if someone asks a question um in the chat this is the option that I like to start with the basic or so the react with fluent UI so this is going to give me a working app and a great thing to start from to show you guys but this is also what I start like 90% of my tab projects I start with the react with fluent UI uh project and I uh will worst case I just start deleting some stuff out of it and cleaning it out. The thing I like about it too is it's already got single sign on um already set up and configured which is a good and a bad thing. It's good that it's all done because there's a lot of pieces you have to do, but it's bad because it does it all for you. And so if something breaks, it's really hard to understand how do I fix that? How do I how do I troubleshoot if you don't understand how it was put together? So that's something I go through in my one of my uh in one of my classes um uh related to Teams dev. Um okay. So let me uh Austin, if you wouldn't mind putting that in the Q&A part of the of Teams. Um that will allow me to come back and uh and address that question. I have a longer kind of a soap box to step on. So I want to make sure I I'll cover that at the end and by putting it over there I won't lose it in the chat if it pops up. Uh so the next question that we get is around uh what do we want to start with Typescript or JavaScript for our project? I'm going to use TypeScript. Uh where do you want to put this? It wants to put it in a default project where off the root of your profile called Teams apps. I don't like that. I always go pick browse. Where do I put all my projects? I put them in dev. And then I give my project a name. So this is my April uh 2025 Hello World tab. And I'll just go ahead and hit enter. Now, what's a little weird about this is it created the project and it opened up another uh Visual Studio Code extension and opened the project or sorry, another Visual Studio Code instance and open the project in there. So, this first one, like I said, kind of meta. Well, what it did is it went through and it created the project and uh now I can get and now I can get rid of this other one and then open this guy up a little bit bigger. First, let me just resize this a tad. And let's make it bigger. And let's do one thing just to see this working, right? I'm going to see this working right out of the box. So, one of the one of the goals that Microsoft has on the dev tooling is uh how fast can I get from create new project to seeing it run. So, what's my F5 experience? So, I'm going to come over here to my uh now when I go back to the Teams toolkit. If I look at the top here, you're going to see at the top when it gets there, it's going to show me um okay, it's going to show me where am I logged in. All right. So, here it shows me I'm logged in to my uh this is my production tenant, me atroconell.com uh that I use for my Microsoft 365 tenant. But I can also log in to a different tenant like a uh developer tenant. So, what I'm going to do is I'm going to choose this is new in the brand new version of the teams toolkit. This allows me to jump between different tenants. So, I'm gonna is I'm going to jump over to my developer tenant, which is none of these. So, what I'm going to do is I'm going to come over here. Let's go back. Get out of that. Escape. I'm going to come back over here and I'm going to sign out of this tenant. And then I'm going to come back and sign in. And it's going to open up a browser. Apparently, Chrome was updated. And I'm going to log in using my de my Microsoft 365 developer tenant. Oh, I logged into that earlier. It timed out. Oh, and let's use dev. I can close this page. Thank you. So now what you see is I'm signed in on Microsoft 365. I'm signed into my developer tenant and I'm signed in on Azure. I'm signed in also into my developer tenant. Now I it this is the part that's a little it's a little uh misleading. I'm not really signed into Azure as my developer tenant. I'm signed into my interra ID account as on on uh that allows me also to connect to my Microsoft 365 or sorry my Azure tenant as well. This is going to be used if I need to go through and provision resources, but it's also going to be used to create the intra ID app for my project. So there's a whole bunch of other stuff we can look at. We're not going to do that just now. Let me come back over here and let's get this build going um right off the bat. So I'm going to come over here and my this is my entire project. Let me start the build. So, I'm going to come over here and I'm going to say you have a bunch of different options of how you can start this. I like to always start it with a browser that's not my primary browser. So, I use Chrome as my primary browser. So, I'm going to say debug it in Teams uh Edge use the Edge browser. So, you can you can do your development and debug in like a local Teams client uh like here in the in the Microsoft 365 apps and stuff in the different desktop clients. I don't like that. I always do my development in the web browser um because it's much easier to debug and troubleshoot. So, I'm going to go ahead and hit play on this and it worked this morning. So, it's a live demo. So, we'll just cross our fingers. The very first time you run your project, this is going to take a few minutes or maybe it depends on your internet connection speed of your computer. What is going on right now behind the scenes and I'm going to show you how it does all this in just a minute. But what it's doing is it's checking to see, do I have everything installed that I need to be able to run a Teams project. So, it's going to need things like the Azure Functions runtime, uh, the core the core tools runtime. It's going to need, um, make sure the version of Node that I'm using is a legit is a supported version. It's going to make sure um, it's going to install something called the Dev Tunnel uh, from which is you'll see in the docs where it talks about Enro. We don't use Enrock anymore. or use the dev tunnel from Azure and the Visual Studio team. Um, but it only does that if I need it and that's I need that in the case of bots and um, message extensions. So once it goes through all those prerexs, make sure certain ports are available to me and all that stuff. Um, once it does all of that, it then runs npm install to download everything that my web project needs. In particular, this project has two projects inside of it. It has a web project which if I look in the source is basically a react single page application and then it also has a serverside component which is an Azure function project a nodebased Azure function project. So it's running npm install in uh twice once for the Azure function project to populate node modules and once in the react project to populate the the web the web client. It's almost done. It's going to launch edge in just a second. I'm talking long enough here so I'm giving it enough time. the uh so there it goes. So we'll come back to that in just a second. What you'll see here over on the side is there are three processes that are running in the background. There's starting the front end that's my web that's my uh my react application my web app and that's running on uh localhost 53000. It's got a back-end process running and this is my Azure functions project that is running on localhost 70 called port 7071. And then it's also got another process called watch backend. And what that's doing, if you're familiar with node, it's running nodemon in the background. That is basically saying that, hey, if you make any code changes over in your um uh in your Azure functions project, uh we'll watch for the files to change and we'll recompile them or or we'll use TypeScript to recompile them from the TypeScript of the JavaScript and we'll restart the the process so you'll get uh so the next time you make a call to your Azure Functions project locally, everything will work. Okay. So what this has now done is it's gone through and it's created this project. So now let me go log in at under my dev tenant again. So dev which is this guy paste him in. And I need a password and then I need I'll go away edge and then I need the one time password multiffactor off. Oh my god. Don't need that. So, what this is now doing is it's launching Teams. It's uploading my project and it it's effectively it's sideloading my project into my Teams environment so that I can have it running locally, but I can test it inside of Teams. So, sideloading is something you have to enable in your tenant. Um, the docs show you how to go about doing this. So, what I'm going to do is I'm just going to go ahead and click open here. It's going to install my app. Now, this is a personal app, so it's a tab and a personal app. And I'll show you how I know that in just a minute. And I also can go through. It also has a channel app um as well. So, I'm not going to I'm not going to do that. Let's just let's just click off of this. So, where is my app installed? If I come over here, it's installed as a personal app. So, if I go to view more apps, I should see my April 2025 Hello World tab local. So, you guys see that, right? Anybody see that? Thumbs up. Thumbs up. I'm going to assume that you can see it. I see somebody turned on together mode. That's kind of funny. Um, all right. So, I'm going to choose uh this. And now, this is my custom tab. So, remember this experience we're running through right now. All right. Remember this experience running through right now because when I look at the code in just a minute, this we're going to look at the code for this app. So, over here, you can see the app is now over here in the rail. But if I go off of the app, it's going to go away. you want to get it to stay [Music] there, choose the app, rightclick it, and I can pin it. And now it will stay in my it'll stay in my navigation. Now, personal apps are intended just for my use. So, for example, if I look at my like if I have my calendar in here or my chat, it's just my experience with chat. I'm not collaborating in chat. I'm talking to other people and it may be you I'm talking to, but it's not going to be something that's like a it's not a a a collaborative experience. The collaborative experience is when I have like channels that or tabs are installed inside of of uh teams. So in this case here, this personal app has one tab, which is why it's taking up the whole screen. But if I had multiple tabs, they would be listed out on here as well. And I could have multiple tabs if I wanted. Now, if I scroll down here, I want you to see something where you'll see that it says I want to authorize and call Azure functions. Now, right now, it's got single sign on already set up. The first time I select this, it's going to throw it's going to error out. We're not going to see the error. If I looked in the console, it would see the error. It would error out because I haven't consented to this app and given it permissions to get information about my profile. So, if I and that to be able to show me right here. So, if I click on this, it first fails and then it's like, oh, you don't have permissions. So, I'm going to open up the common consent framework to ask for permissions. I'll say I accept it. and then it will remake the request. And now you can see I have the value that pops up. If I go off of the tab and then I come back to the tab and it reloads it. Now when I go back down here and I say authorize the Azure function, it still is it doesn't go through and have that same request because now it says that oh he's already granted the uh consent for this. Okay. So that's just the gist of like getting my first tab up and running. The thing is is that you'll notice this scroll bar here. This entire scroll bar, this is where the iframe is. So you see how much real estate you have access to. You have access to the entire screen here on the real estate uh except for the team's chrome. So the stuff that goes on the lefth hand side and the stuff that's up here at the very top. Okay. So if I come over here to the project, if I go back over to my project and I look at what did we create here? Well, let's look at these different pieces. I'm going to go ahead and just close the browser here to shut that down in the background and let's look at these different pieces. So first of all, this is my Azure function. There's nothing fancy about this standard Azure function. I want to focus more on the Teams project stuff. I also want to try and teach you how to do React today. I want to show you the tooling. So, that's a little bit different. I want when you get into this team's project, I want you to look at it and go like, I know what all this stuff is. I recognize it from Andrew's webinar. So, here's how this works. Your entire team's app is going to be defined in something called a team's uh app package or we now just refer to it as an app package. So, if we look at app package, you'll notice there are three things in it. So, ignore the build folder. That's temporary. There's a one picture color, one picture outline. That's the logo for your app, right? So, you have two images and it's going to be the logo that you're going to use for your application. The manifest.json file is the main thing that's going to describe your app. For example, it's going to define things like the uh icons, what the names of the files are, the name of the app, the description of the app, and in our case here, what I'm really interested in is the personal app. Now, static tabs, little bit of uh history here. Um, static tabs or personal apps used to be called static tabs in the code and in the manifest. They're still called static tabs, but it's just a personal app. But you'll see here what it's doing is is that my tab has an ID called index. It has a name home. We didn't see that because we only have one tab. So there's no sense in showing a single tab if there's only one option. And then it's going to show me what URL should load inside of my t inside of my iframe. What what is the URL that should load inside that iframe? This is an environment variable that will be replaced at runtime or sorry at build time by the team's toolkit. Um, it's then going to go to index.html and then it's going to go to a route of hashtab. So, how do I get to that? Well, I have an index.html file. My index html file is the JavaScript uh bundle is going to be loaded. This web page is going to be loaded on the um in the in the tab. It's going to have the JavaScript file get loaded. You'll see here that I've got a script tag here that I'm loading in the source of the uh the component, my index.tsx. And you'll notice here this thing that says root, a div for an id of root. Well, if I come over here and I look at under source and I look at index.tsx, it is going to get that div called root, it is going to uh get a reference to the root by creating that root object. And then it's going to render out a a React component called app inside of that route. Well, there's app. What's in app? If I go to app.tsx, it's inside of components/app. So, there it is right here. I'm hovering over. I go to this kind of scroll down a little bit here. I'm going to collapse this fluent provider. And here are So, this is just this is what's going to render out. So, this is a uh functional component, a react functional component. There's a re I'm using a React router and I have a route called tab. Okay, index.html hashtab. So I'm looking for tab. What does that load? It add it loads my tab component. And if I scroll up, I can see that's inside of the tab.tsx file. I look at tab.tsx. It has a div that's being rendered out with a welcome message. Oh my gosh, we're getting deeper into the onion. If I come over here and where's welcome? Welcome is inside of sample. So, if I look inside of sample and I look at welcome.tsx and I scroll down a little bit down to my div, you should see things like remember where we saw the string. Congratulations, your app is running in and it told us we're running inside of teams and then it gave us a tab list. Build our app locally, provision it or publish to teams. this one that we had here for this tab for the first tab here running local. Um, we had the code, we had the current user, and then we also had the Azure function that was showing up here. So, that was all the stuff that was showing up. That Azure Functions piece, well, that's this guy right here. When I look at the Azure Functions, remember we had a a button that said authorize and call Azure Functions. So, I just want to give you a little bit of a tour on how do we get down to the actual React app. Now again this is not an experience on a a a uh a webinar on on building uh a react app. I want to focus more on just the structure of this project now and let's focus on some of these pieces. What makes this a teams app what makes this a teams app is the presence of one of these two files at least teams app.yaml and teamsapp.local.yaml. This teamsapp.yaml YAML file. What this is right here, think of this, if you're a .NET developer, think of this as your CS Proj file. Okay? If I open this up, I want you to notice something. You will see three different life cycles. Provision, deploy, and publish. When I hit F5, what it did was it went through the provisioning and the deployment phase. It didn't do publish. Why didn't it do publish? It didn't do publish because when I went through the deployment and I said debug in teams, this is using my local environment. Well, if I go back over to my code project or my over to my uh my files, my project and I look at teams app.local.yaml, it sees this environment called local, it's going to use this one instead and it's going to overwrite the production one. The production one has a publish life cycle. Ours doesn't. So, we're not going to be able to publish this. It's only going to run through these two phases. What happens with this? This is actually in the Teams toolkit. What it's actually doing in the Visual Studio Code extension is it's running the Teams CLI and it's telling it to do the provision um command. What does the provision command do? It does all these actions. If you've done anything with like CI and CD and Azure DevOps or really more au uh GitHub actions, the the teams devel uh developer experience is kind of inspired from um custom actions with GitHub. So what does it do? We have an action here called Azure AD app create. It's really intra ID. So what does it do? It creates a new intra ID app called April 2025 hello world tab 1. It is going to generate a client secret. It is going to set it as a single tenant app, it is then going to have once it goes and creates that, it has a lot of stuff that comes out of of that command. So it has things like once I've created your intra ID app, I'm going to have the client ID right here. So what am I going to do? I'm going to say, hey, go write this out to an environment file. A AAD app client ID. And you see all the other ones that are listed. Well, check this out. If I come over here into my project and I open up the env folder, I have an env.local file that has an AADHP client and that is the ID of the intra ID app that was created when I hit F5. So, it spun all of this stuff up for me inside this environment variable. Now, what's what is cool about that is that this environment variable file, this environment variable, I can use this throughout my entire project. For example, if my app manifest, so here you see we have our teams app dot uh teams app ID or uh where we where would I want to find this? There you go. My tab endpoint is on the main URL for my site localhost. Remember we went into the manifest tab endpoint. So it'll change that out. What if I'm in production? I want to build this for production and I want this to go get packaged up and have a new manifest. No problem. because in my uh I would have I wouldn't use these environment files. Instead, and this may be going a little too deep here, but some of you have done this. You may be like, "Oh, sweet. This is cool." If you go into the infra folder, it's using Azure bicep to go create all of the resources in Azure like an Azure static uh web app and a Azure function. And these par the parameters file that it's merging with the bicep file. What is the ID of the client? It's going to use this client. what is the uh and when it goes and creates this it has exports of like what is the URL that's being generated from this as well and it goes through and updates all the environment variables uh files uh correctly so that the tab endpoint would be the URL of my static web app right pretty cool okay so what's nice about this is you can go through and see all the stuff that this is doing so first it's going to go create the Azure AD app unfortunately when you create it you can't at the exact same time do other stuff you want done. So, first we have to create it and then it goes right back in and it goes in and um let's see after it creates it, let me scroll down a little bit. It's then going to go through and run an update. And what the update does is it's going to use this template file kind of hidden there. There we go. This template file of a AAD manifest JSON that is here in my project to if I scroll over here set up all of the single sign on uh configuration stuff by creating a new scope called access as user. And then it walks through and creates it pre-authorizes or preconents a bunch of Microsoft um uh clients so that when the user goes to do single sign on the users won't have to grant teams permission to access their uh to act on act on their behalf. So you'll see that all of these pre-authorized applications are like the team's desktop and mobile client, the web client, the outlook desktop client, the outlook web client, the outlook web client too. I don't know what ID 1 and two is. Um, oh, this Outlook new and Outlook Outlook classic, I guess, but Outlook new, the one that's rolling out now. Um, then there's a Microsoft 365 app. And there's one that apparently doesn't have a name. Interesting. I wonder what that one is. Um, and then it also comes down here and says the whole it also adds in uh like the access some of the other access token stuff as well. And here you can see it's going through and setting up some permissions. So, it creates the enter ID app and then it goes right in and updates it uh right after that. But what's cool about it is that it used this thing as the template. And if you look over here at this at this project file, it says once you've created the once you've gone through and you've created the uh you've taken this template, it populates it with all those values that it needs from the environment v the environment variables uh in our our environment setting. And if I look at the build folder, I will see the nope, not that one. this build folder I will see my populated one where now I can see that the ID of my app is 889775B that is the ID oh sorry no the app ID that's the object ID this is the client ID the client ID for my app is this value right here why is that helpful because now if I want to make any changes to my intra ID app I can make changes using this manifest and the next time I hit F5 it'll update my intra ID application uh for me so I want to show you a little bit of that. The big thing though that I want to take away from before I move on to my next few slides and start to kind of wrap this up a bit was what's really cool about this and the part that I love about this about this setup uh for um how they build projects and deploy them and everything using teams is that it is so flexible uh than what we have like in the SharePoint framework because I can go in and make changes to any of these different things that are available to me. So for example, provisioning creates an in ID app. Then it goes and creates an app inside of Microsoft Teams. Then I run a script that goes through and set some environment variable file environment variable values inside that environment variable based on these values. Then it goes through and it updates the intra ID app. It it uses the teams app man uh validate manifest. So it uses the team's app CLI and calls validate against our manifest to make sure that we haven't done anything that's not that's not correct. It generates the package. So if you're a SharePoint framework person, this step that I have highlighted is kind of like the equivalent of gulp space package-solution- ship. So it generates that. Then it uses that same validate to make sure is the app package legitimate has what it needs. Yep. Then it's going to go through and update our our app inside of Teams by uploading the package. It then tells it to extend it to Microsoft 365. And then it writes out some other values to the environment file. When I do my deployment, this is the big part right here. Make sure my dev tools are installed. Make sure that a locally trusted developer certificate has been trusted. If not, it will prompt the user to do that. SharePoint framework. That's something you got to do ahead of time. The tools do it for you. Um, make sure Azure Functions you're using the Azure Functions core runtime that version 4.054.55 and where should it be installed? Right here. Uh, and then where should you put the certificate? It's doing all the stuff for us when we set this up. First run experience is fantastic. Then run npm install inside the root of the project to go install the dependencies for our web project. And then inside of our Azure function, do the exact same thing. You get the picture. There's all these different steps of things that you can do down here. You can even go at the very top of this file and look at the URL right here, aka.ms/teamsfx-actions. That will take you to the documentation for all of the actions, explain everything they do and how you can go in and make changes to them or do other stuff. For example, I have a I have a a client that is uh in a GCC high tenant where a lot of stuff where they can't connect directly to uh their um uh their Microsoft Teams instance from the um the Teams toolkit. So, what we do is I show them how to modify this file right here. Uh, so that when they go to F5, there's some manual stuff they have to do. But if they use the out of the box one, it wouldn't work because it would fail and say you're not connected to Microsoft 365. Well, it's because GCC High, the very secure version of um the Microsoft cloud, uh, doesn't allow that. So, we take all the tasks out that would require that. And there's a few manual things we can do. If you want to know how to do that, I have an article that I wrote in the last few months on my website on boyanos.io/blog where you can see how to do that. That's really the gist though of all of of like what makes a team's project different. You really want to be familiar with these two project files. You also want to be familiar with the manifest file, the manifest template. Um, all of the all the infrastructure provisioning that happens in Azure is all done from this infra folder. And then we have all of our environment variables uh for modifying and managing our project were all going to be done inside of ENV. And then finally, the app package is where our package we're going to define um our package. Now, let me wrap up my slides real quick and I'll come back to Austin's question here. We got another 27 minutes for questions. So, I only see one question that's been posted, but if you got any questions, please feel free to go ahead and post those. Uh let me get my pointer back to my slides and advance them. Okay, we've only covered two things, the two biggest ones, but we've only covered two parts of the Teams toolkit. There's a lot more to it. So, as I said, you've got the Teams CLI and the Visual Studio Code extension that are you'll both have them listed right here, but you also have this the entire repository. If you go to github.com/offsteedev/teams-toolkit, that is going to take you to uh the repository that contains all of the source code for everything that I'm showing here. Well, everything but the last one. That's mine. Um, so what other stuff are you going to find in there? Well, there's an npm package called Teams FX. This contains a whole bunch of stuff that you could use uh in your team's project for um making single sign on a little bit easier or to obtain like a a single sign on token or a uh like an access token that contains a open ID connect uh token so you can identify who the current user is. You don't have to go create all that single signin stuff. It's already done for you. Furthermore, they have this other package that if you're using React to build your app. They've created a suite of a whole bunch of React hooks and utilities that we can use. So, for example, there's a hook called use teams that I won't have to write the code to get the current context in my tab that I'm in inside of Teams. It will take care of that for me. It also will take care of like I can say use Teams with user credential. it it triggers the uh the single sign on process and obtains the token for the current user that I can then use to identify who they are. So that makes my life a lot easier. This is really really useful. Um and if you want to see how they did it, just go look at the source code for it. All the source code for these are all inside this repository. Now I got two resources that I want to share with you if you want to learn more about building stuff with Teams. One of them is I have a free nine-day email course uh called the team's appdev on-ramp. I've got a video version of this coming out uh in the next month or so. Um and what this is is it walks through uh on once a day it sends you an email and it walks through here's everything that you can do and what you can build inside of Microsoft Teams. Now I go through it's not the same as this webinar I'm doing today or one that I'm doing next week which I'll talk about in a minute. But what this is going to do is it's going to say like why would I use the shareepoint framework? Why would I use team uh power apps to build an app in teams? Why would I use the teams toolkit? And it gives you different options, advantages and disadvantages of each. Uh it then walks through what can I build tabs and I walk through all the stuff that you can do with tabs bots all the stuff I can do with bots. You can build dialogues. They call them task modules but they're really just modal dialogues. and I walk through how you can use those both in tabs and a web experience and if you're using bots. Um, what about message extensions? Uh, what about extending team using the teams toolkit to build custom agents for Microsoft 365 copilot? What is the deployment story for this? What do I need for that? So, that email that is a free email course that you can go to my site, you can sign up for. you get one email right away and you get another email the next day uh for nine days or there's a little bit of homework at the very bottom. It's really easy homework, but is if you go in and you submit your homework, then you'll get tomorrow's lesson in about five minutes. So, you can plow through the course if you want uh pretty fast. If you want to know more about what's possible inside Teams and you don't want to wait to go through my email list as well or the email course as well, I'm hosting a webinar twice next week. once on April the 8th and once on April the 11th that is going to walk through a lot of what I cover in the email course. Not any really not hardly anything that I cover today, but it really goes into depth on like using tabs, using bots, using messaging extensions and all of that stuff. things that you can end up doing, how you can use Teams toolkit to extend Microsoft 365 C-pilot, which is the primary way that you would extend uh um uh Copilot. Um other than using Copilot Studio, I'm going to be I'm a little opinionated, but I think if you do it the way that using the Teams toolkit, it's a lot cheaper and you have a lot more capabilities to you available to you, but too much to get into that today. Um, okay. So, that you can sign up for either one of those webinars. They're both published today. Uh, for all of you who have registered and showed up showed up live today, you're going to get a follow-up email from me uh later this afternoon. Uh, that'll have links to these webinars that you can uh also that you can find them really easy if you don't find them before that and you can go sign up for it. So, another free webinar uh is definitely going to it's a uh uh that'll be u available twice next week. Okay. I want to thank all of you for coming to this webinar live. Um, I do have another 22 minutes to go through questions. I see one question here from Austin. I'm going to answer that one first, but if you've got any other questions, uh, please feel free and post them. I'm not going to keep everybody around just to keep you around or keep the webinar going. So, if I answer Austin's question, we have no other questions. It's perfectly fine. Uh, but I want to make sure that um, we don't just extend it, just to extend it. I'll give a give you a little bit of your time back. Okay. So Austin asked, "Why shouldn't we choose to start with the SharePoint framework when I'm creating a Teams tab?" Now, it's a good question. So, let me answer this in one of two ways. I want to answer this the Microsoft way. So, I want to give you a bunch of facts and then I want to make sure it's very clear when I switch over to my opinion. So you can decide if you buy into what I say or if it just you to say like ah this is just some random guy doing a web webinar. I'm going to focus on what Microsoft says. Teach their own. No harm. I don't take any offense to it. Um I'll cry a little bit but I won't do it on the webinar. Uh but I want to make sure you understand the difference between the two. So what Microsoft did is they have set it up to where when you build a SharePoint framework web part that web part can be treated as a can be used as the source um of a tab in uh Microsoft teams. So if I start with a SharePoint web part. So if I go create a brand new uh web part project uh using um uh Ymen the Yommen SharePoint framework gen the generator for sorry the SharePoint framework generator for Yommen create a brand new web part by default today and for the last few versions uh the web part is available as a tab inside of teams. So, if you're a SharePoint framework developer, uh Microsoft would tell you you could create your web part. You can leverage all of your skills and knowledge you've picked up building uh uh building web parts for SharePoint framework for the SharePoint framework and SharePoint online and you can leverage those as a tab in Teams. And the way that it works is that once you package up your SharePoint framework project and you deploy it to your tenant or site collection app catalog, if you have a component, a web part that in the web parts manifest, the property called uh supported hosts says um and here I can show this to you. So let's create let me open up an existing SharePoint framework web part. So, I'm just going to go to my SharePoint framework course and open that up. This guy's got it. So, if I look at a web part manifest, you will find a property here called supported hosts. And what you will see is you will see that this one has four different options. SharePoint web part, uh SharePoint full page, Teams personal app, or Teams tab. So I we already know what a web part is and we already know that this is like Microsoft won't say this but basically this is treat your web part as a single page app. um a tab or a personal app. If you see either one of those listed, what team what the the admin center will show the app portal will show you the SharePoint app portal will sorry the SharePoint app catalog will show you is a um uh it'll show you icons on where this is supported and one of the icons will definitely be SharePoint for all of them because it's a SharePoint component you deployed and it will show you a teams uh icon. If you select the project, the solution, you can then click a button that says deploy this to teams. And what it does is it will on the fly create that teams app package that I showed you using the teams toolkit. So it creates the manifest uh and it takes the two images coming that are listed right here. So there's one and there's two. It'll take those two images, it'll dynamically generate the manifest.json, JSON, package it up in a zip and deploy that to teams as an app. Now in Teams when I go to in when I go to add a tab that was created using SharePoint framework, what teams does is it adds it installs the app. But remember when I showed you that say the tab is is living inside of like localhost uh under whatindex.htmlab html tab. The URL is essentially going to be pointing to a special SharePoint online page that has nothing on it. And in the in the query string of the um in the query string of the of the the URL, it will have a property that says a URL parameter says component ID and it'll have the GOID of your web part that's defined in the manifest and that tells that SharePoint online page uh to in the page where there's nothing on the page uh go find that web part and add it to the page. is a single big canvas and that's what's used inside of the iframe inside of the tab. Um, now you want to kind of think about the web part. Does it make sense doing this? Because web parts are generally just like little boxes or bigger boxes on a bigger page unless you're doing the full page option. And if you think about if you're doing like a little box like on a page, does that make sense as a tab? Because then your tab is just got this tiny little UI like squished in the top left corner or maybe just centered looks a little weird. probably should be at least uh designed as like a full page. I don't think a I don't think like having web part on here and then a tab or a personal app makes sense. I think having share full page and a team's personal app or tab working does make sense. So what happens when I go into the team's toolkit and when I create a tab I select a tab and I gave it gave me shareepoint framework as an option. All that does is that just says the same way that I created a SharePoint framework project using the Yomen generator, the Teams toolkit creates the tab using the Yomen generator. Um, and it basically just does it the exact same way. So, wherever you start, it really doesn't matter. So, Microsoft says, "Hey, it's great because if you do it this way, the advantage is is that you don't have anything to deploy. Everything is going to run inside SharePoint online and be available inside of Teams. Teams people can use it. SharePoint online people can use the app." and it sounds great because I can leverage the all the same um business logic uh and experience and skills that I have in learning the in learning SharePoint online but here's okay so that's what Microsoft says and it's it is good but in my experience and in a lot of experience of all my of a lot of my students my customers it is you will run into issues uh if you're doing anything that is not just building a web part that doesn't talk to anything else or maybe it just gets SharePoint data, you're going to probably run into some problems. If you're going to go call anything from any of the SharePoint REST APIs, if you're going to talk to Microsoft Graph, if you are doing anything with custom permissions, stuff breaks. It breaks all the time and very very frequently. Sometimes it will just your web part will just all of a sudden stop working for a little bit and you're like, why isn't this working? And then out of the blue it starts working again. No reason why. Sometimes you will deploy it from SharePoint online to Teams and you go to use your tab and it doesn't work. If you wait like 25 minutes, 15 minutes, sometimes it works right away. Sometimes after about 30 minutes it'll start working. Why? We don't know. It's temperamental. It's temperamental. It doesn't work all that well. Um I find it to be very unreliable. I find the uh oh, I'm in Teams. It works great in the client. It look great in the web client, but it doesn't it doesn't work in um I just saw another question show up. Sorry, another question show up in the chat. I thought it was going to show up in the in the Q&A panel, but I'll come back to that. Um so the challenge with that so it it when you the um I see very frequently if you're using your SharePoint framework component as a web part in the team's mobile client or like also like in the um in the tablet client or in the the tablet client also mobile client uh I frequently see that not work and when I say not work I mean like you get like a blank tab and you get no like error messages or anything uh In my experience, it's an issue between SharePoint online in Teams. And if you go look at the SharePoint uh uh issue list and the SP devdocs uh repository, even the closed issues and open issues, like take that filter off and just search for like teams and trying to use a web part in there, you will find tons of issues. Uh I've had students that have like they've heard me go through this like uh soap box And they're like, "Yeah, I get it. We're still going to go with SharePoint framework because we have already learned, we know React and we use the SharePoint framework and this will just be easier because we don't have another site that we have to deploy to Azure." And I'm like, "That's fine. I'm just telling you, you're probably going to run into issues and when you do, there are some things that you're going to ask me and I'm going to be like, we don't know why that doesn't work." And trying to get Microsoft trying to get the SharePoint team to understand that there's an issue and then getting the SharePoint team to talk to the teams guys on what's going on. They don't even work that well together. So, I think it's just a bad way to start. Um, and sure enough, like I've got one student that came back after trying this for like two months and he's like, "This is ridiculous. We should just start with a Teams app." And I'm like, "That's what I said." So, uh, I just going to warn you that your mileage may vary. Depends on what you do. If it's a really simple thing you're building, you may be fine. If you are, uh, doing a more involved web part, I would think twice about it. Um there is a a a development pattern that instead if you wanted something to work both in teams and in the SharePoint framework, I would build a single page app as a separate project like a React project as a as a separate app. uh package that up in your own npm package and then you could then use that in your teams app or your SharePoint framework app and just have the the SharePoint framework and the teams like host for them are going to simply instantiate and render out the share the the single page app and then anything that you need to pump into it from either one of those experiences like what channel am I in if I'm in teams or what site am I in if I'm in uh SharePoint online what stuff can I pump into that app that it can use between the different hosts you essentially use a Teams project or a SharePoint framework single page app project as a host for a React app. And that way you have one codebase that's the core of your app and then two smaller code bases that's just the host for that thing. That model is much more reliable. So that's just my two cents on it. Uh it's it's totally up to you how you want to go with it, but um I I think that using the SharePoint framework for a Teams app is is uh you're you're just you're going down a path that's like this is going to be trouble. You could get it to work probably, but you're going to run into some weird stuff and sometimes there's no explanation for why it's not working and it just fixes itself. So, I hope that answers your question, Austin. I know you had to wait like 40 minutes for it. Um but I hope that answers your question. Um, let's see. Savvy, you said uh maybe you're not seeing the whole picture, but uh could you tell me how the Visual Studio Code Teams toolkit helps the deployment in a production tenant, not only with the dev phase of projects? Okay, Savvy, great question. Um, in the Teams, okay, so in the Teams toolkit, the Visual Studio Code extension does give me a way to like publish my entire app. I'm the kind of developer that says if you can publish from the team's toolkit then the permissions are not locked down enough in your organization. Um it's not so much it's going to help you with that. The big thing is is that the publishing part to publishing to production involves one I've got resources in Azure or whatever cloud. I've got resources to provision. I've got an app package that I have to to So that would be like my website or my web services for bots or uh my website for a tab or web services for a um uh bot or a message extension. Um I have an intra ID app. I have all these different things. because I'd want to be able to provision the um the the stage the provisioning and the publishing stage or life cycle events for my project. It's not that the team's toolkit for VS Code is going to help you with this. It's that the team's app CLI is going to help you with it. So if you have a if you have a a a CI and CD scenario where you want to you want to control what your deployment looks like or even if you don't then instead of having these manual deployments having to put stuff all over the place and and provision them you can use the team's app CLI in your production environment to take your project and to push those things to those different environments. The only thing that the team's toolkit is doing is that it gives you the ability, it gives you the ability to um to to to call that team's app CLI command from the Visual Studio Code experience. So that visual the visual studio code experience inside of for the team's toolkit. All it is is a way for us to hit F5 to get our projects up and running and have the debugger uh and get the debugger running. Um sorry I'm sweating here. My air conditioning went out which is a big deal in Florida as who was it? Austin. As Austin can attest to. Um the um so I can use I can use the um the team CLI to go through to do that provisioning stuff for me. Um or but I can also in the VS code or I can do it just using the CLI. And because it's a CLI, I can also do that from any of my CI and CD scenarios. I would have to install the CLI in my like GitHub actions workflow or my Azure DevOps pipeline, but that's what it is going to allow me to go through and to do that to do that deployment. Um, so it's it the only thing the Teams Toolkit Visual Studio Code extension does is knows how to build the project, run through a bunch of different steps to get things up and running and get my project deployed using the CLI, and then launch the browser, sideloadad the app inside of Teams, and then attach the debugger both for the locally running Azure function and what's running in the browser. So, I could do my debugging a little bit better in the toolkit. But other than that, it's really just a that project file that's that's defining what happens in each one of those life cycle stages. So hopefully hopefully that helped you a little bit there. I can see you're responding in a second here, but let me go jump over some of the questions that people have posted. I got to thank you. Cool. Um Andy, can I touch on the authentication and VS Code again? I think you said something about intra versus authenticating to Microsoft 365 or Azure. Yes, let me let me clear that up. You're always authenticating with intra. It's team when you when you authenticate with when you go to log in in the team's toolkit. Um, and it's going to ask you to log in twice. Once you log in with one of them, when you go to do the second one, you're already logged in. So, it's going to be a really quick experience. Um, but essentially what it does is this is allowing you you're going to always authenticate with intra because both Azure and um Microsoft 365 tenant are all they both are using intra. But what this allows me to do, if you remember from like my demo, uh, all right, I closed that project. Ah, where'd it go? No, open this project. I want to open file, open recent hello world tab. If I go back over here to the teams toolkit there. So when this signs in, let me let this go for a second. I've signed into intra on my developer tenant. So this is my M365 developer tenant that I got before they stopped letting us have those. What this is doing is uh and and then I've also signed into my uh Azure my Azure tenant uh which really what this one's doing is this is working with the intra ID uh to create the app or and this is also the Azure subscription that would be used to provision resources. If I try to provision resources it would fail because this login is not tied to an intra sorry an Azure tenant. This one is tied to my Microsoft 365 tenant. That Microsoft 365 tenant does not have a co-pilot license assigned to it. So, in this case, uh, and it's because you can't have it, you can't use co-pilot, uh, the $30 per user per month license. You can't use that in a dev tenant. But if I log out of this, I can then sign into my production tenant. which does have a co-pilot license associated with it. And I could also switch this one over to use my production Azure uh my production Azure environment. So you're it it just depends on like you're you're working with Microsoft 365 and I'm working with Azure and not I'm not always working in the same in the same tenants. I don't have to but I can. So another good example of this another let me give you another example. um the my account in Azure, the meanderconell.com account in Azure that has subscriptions in it that are tied to a credit card. So when I do when I teach a class or I do a demo, I have to put things in real Azure resources, but I want to work inside of my developer tenant and not populate my production tenant that I use for my company. I don't want to use that for all of my um I don't want to use that for for all of my stuff. So what for my uh for my demos? So what I would do is I would log into my my production Azure tenant so that I could provision uh my use this guy so I could go through and provision resources in Azure. I did sign in. I just did that sign in. Okay. And then like when I teach a class or when I do demos at a conference, I want to sign into my dev tenant, which is this guy. So that now I can go through and I can do stuff inside of my dev tenant, but all of my resources get provisioned to a real Azure resource. So that well, so I can pay for it, but I can also have the demos actually work. whereas my other login does not have the the seven Y77K1 does not have access to an Azure subscription. Hopefully that makes sense. But it's just like it just gives you flexibility. You're you're it it you're not you don't have to have the login you use to log into 365 be associated with an Azure subscription. That does not have to be directly associated. There's no direct tie between 365 and intra. Sorry, that's there is there's no direct tie between 365 and Azure. That's what I meant. Sorry. So hopefully that cleared up uh the question that you had there, Andy. Cool. You said thanks. Um Jacob, I'm probably have time for one more question after this. Um Jacob says, "Where are the ReactJS files hosted when the app is deployed? Does Teams toolkit help provision Azure App Service or Azure Storage to host the files? is a CDN is the CDN best option for host those performance. Good question. So I did touch on this but in case you missed it if you look at the the way that the team's toolkit is set up if I look at the infra folder and I look at Azure.bicep Bicep. What they do is they create, scroll down, they create an Azure static web app where the and so there's your Azure static web app and then it goes through and it creates all the stuff it needs for an Azure function. So it creates a server farm and then the function app. But specifically to your question for the client side piece to it, it uses an Azure static web app uh to host the React application. If you don't want that, you can always come in here and if you want to use like a app service uh or if you want to use like I I'm partial to container apps. Um if I want to use container apps, I can go in and modify this this uh Azure.bice file to use my own setup however I define it. But this is what the templates uh give us is they they use the single um the uh static web apps to go through and to do this. Hopefully that answers your question as well, Jacob. Okay, so with that, that pretty much wraps up what I want everything I wanted to cover today. Um, I want to thank all of you for sticking around today. I'll send you a follow-up email uh later on today with some additional links and resources. It'll include the email course. Uh, it'll include that I talked about. It'll include links to those webinars. Um, if you are interested in learning more about uh teams appdev, the webinars next week would be fantastic. Um, if you are interested in uh really joining me and really to kind of get up to speed and learning how to do um uh how to build apps for Microsoft Teams, I have an 8week long uh accelerator cohort uh class that's starting in the middle of April, about two weeks from now. Actually, it starts two weeks from today. And I recognize two people in our webinar who are actually uh enrolled for it. I won't call you out. Um, but the way that that's set up is that there is a um we meet twice a week for two hours uh each time for a live class and for office hours and there's optional homework and a bunch of other resources that are available to you. You get a whole bunch of stuff uh associated with that. I will have a link to that in the um uh in the in the um I will have a link to that in the email uh to where you can learn more about that. Um and I will also talk about it at the end of the webinars uh next week uh as well uh if you're interested in learning more about that. So um but I can guarantee that the webinars next week it's like 95% educational. It is not a it's not a sales pitch. Um, but I got a lot of people that have been through those accelerators and they absolutely love them uh in terms of uh uh all the stuff that they've learned. So, you can learn more on my website with the link that I'll share with you. Um, or you can just go there right now if you go to my team's courses and you'll find the the thing that's talking about the live accelerator that starts on April the 16th. Um, there's a whole bunch of stuff on that page about it as well as well as a bunch of testimonials for my former students. So, with that being said, um I'm now one minute over, so I'm going to be respectful of your time. I didn't think we would fill up the whole time. I guess I talked a little long-winded and didn't get a ton of questions, but got some good questions. Um I hope you all learned a lot and I really appreciate uh you joining me today and I hope to see you register for one of the two webinars next week. If you're trying to decide between each one, they're the going to be the exact same presentation. There's nothing there's nothing different between the two. It's just two different days just to make it more available to people who couldn't make the first one. So with that, thank you very much everybody. I really appreciate everybody for joining me and I hope to see you next week.