Microsoft 365 Community Microsoft Teams, 12 Oct 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft Teams Toolkit v2 and SharePoint Framework debugging

Description

In this 13-minute developer focused demo, Vesa Juvonen shows viewers the Teams Toolkit v2.7 for VS Code, in preview, has native support for debugging SharePoint Framework solutions directly inside the Microsoft Teams workbench! In this walk through, Vesa uses Toolkit v2.7 to quickly create a Teams app hosted in Azure, sets a breakpoint, runs npm install and gets a debug error. Great, working as expected! Among other things, demo exemplifies new generation of multi-product toolkits. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on October 12, 2021.

Demo Presenter: Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials:
• Tools - Teams Toolkit (Preview) | https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension
• Documentation - Build apps with the Teams Toolkit and Visual Studio Code | https://docs.microsoft.com/microsoftteams/platform/toolkit/visual-studio-code-overview

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

A

What I wanted to actually show microsoft teams- toolkit v2- is still in preview just to be clear, but you can already test it out and provide us feedback on how we can improve this, but into 2.5 2.7 version.

A

We have a native support for debunking sharepoint framework solution directly in the microsoft teams workbench, and this is insanely cool, because it's going to help so much as we build those solutions to be available. So let me actually do this.

A

Maybe I should actually slow down my energy and speed of talking now. Let me create a microsoft themes, application and let me a bit of a zoom this, so you can more easily find and see what I'm doing, I'm not going to do code as such I'm more showing how things are working in the teams toolkit. So I'm going to create a new solution. It's going to be a tab solution.

A

I'm running the 2.7 version of the teams toolkit and the question number three is: basically: are you looking into hosting or are looking into building a teams to team solution which is hosted in azure? Or do you want to take out advantage of automatic hosting and still implement your stuff using typescript and all of the web stack development? Tooling? And that's what we want to do here?

A

So we don't have that complexity of designing cloud host that solution again, the matter of opinion and in many cases, if you have already an existing solution, then you're bringing that to the microsoft teams. You don't necessarily build sharepoint framework solution.

A

Now, let me create a solution which is a normal plane, typescript not using react, and let's call this typescript.

A

I can't write it's pretty typical, typescript and debug demo as the solution and let's call that debug demo and I will select the folder and I will go to step up and I will create a folder typescript demo. Hopefully there is nothing confidential visible in the left navigation. It's good to call that out, though, so that you're really paying attention on it. So let's give the application name a name at least I'm not showing, hopefully any passwords, as I'm doing that we've had that in the ignite a few years back.

A

So, let's call this a debug demo and pat miller still hears about that mistake by the way, every single time he's presenting. Now I'm going to trust authors. This is my solution. It created me the solution with an example structure for sharepoint framework. The structure is a bit different as we're using the teams toolkit because we have the the app package. Let me actually extend the extent done as we're using the teams toolkit. The app package is actually stored in a separate folder above or as some sibling to spfx.

A

So it's a bit different approach as if you are using yeoman generator. We are looking into alignment here across the themes toolkit and the spf external generator, so that is familiar for everybody. How these things actually work. Now, if you are familiar with sharepoint framework, you are familiar. That's how the structure will look like. We have a web part. In this case we created the web part it's typescript standard web stack development.

A

I can do debugging all of that stuff and, as I'm opening this up, you pretty much or maybe you noticed it was insanely fast to get this one up and running, and that's because we didn't run nbm install yet and that's also the reason why we're still getting missing declarations and all of that stuff in here, so we're kind of one way of making things faster. But then, as we're doing development, it doesn't really make us faster and again we're looking into adjusting uh some of this stuff as well based on uh feedback.

A

But let me actually do something really really cool, and this should actually work. It's going to take a while, because we're going to run npm install and then I'm going to talk something as we're doing that, but I'm going to put a breakpoint in that solution in that inner html, where we're actually rendering and the output. Let's call this welcome to microsoft teams. This is unfortunately using still the older, older template version.

A

We're going to do modifications on that significantly as well, and then save is a good thing to remember there we go so that's saved and then I'm gonna go back in the team's toolkit site. Oh sorry, I'm gonna go back in the run and debug and then I'm gonna see what are the options which I have available for debugging, and this is really really interesting. So we do have a new option here available, starting from version 2.7 of the team's toolkit which isn't yet documented even for outside of the team's toolkit.

A

Technically, this works without the team's toolkit as well. So you can do debugging of the spfx solution directly in the microsoft teams, teams, workbench, microsoft, teams, teams, teams, teams, names, teams, workbench, if that makes sense. So let me uh for the sake of mixing some of the profiles, I'm going to take a chrome as the debucking target, I'm going to do, f5 or click play and what's going to happen here, is that the team's toolkit is going to take every single thing, but it's needed automatically for me, which is actually really really cool.

A

Now this is going to take a while. uh So let's see, if there's any questions and uh in the topics, but technically what we're doing here is that we're running now the npm install that's going to again take a few minutes because there's quite a lot of dependencies on the spfx solution structure.

A

But it's going to install all of those types all of those things in the timescreen and then it's going to actually install the solution to the team's tenant and then it's going to start my chrome browser and then we should be hitting that line 19 in a debugging mode.

A

If everything goes as planned now, I'm actually pretty sure that this will not work. No well, let's see now that I'm I'm making so much excitement that most likely the demo will fall. That typically happens, no just kidding, but technically what we're doing here in the team, I'm I'm going to repeat the team's toolkit version. 2 is still in preview. This is the version 2.7 which I'm running here and- and it has this new capability- we're working on actually getting documentations of this team's toolkit.

A

Also, when you are using just the yeoman generator, so if you're doing a development of microsoft teams, development directly with spfx from the yeoman generator, which is 100 supported as well- and that is that this is an option so you're able to basically use the team's toolkit. What does it teams develop? Dashboard! That's right! Yes, I guess so so, let's see now it's starting starting all of the automation is doing its magic.

A

It's doing all of the debug debug strings. All of that stuff, pretty soon it's going to fire. Well, now it's going to do the webpack and that one didn't take too long. It actually did fire the chrome in my previous in another window. So I'm going to move it back in here.

A

Why did I use chrome just so that I'm actually using a different profile rather than my default profile in edge chrome and I'm going to sign in here? I'm going to use my password to sign in.

A

A

And I don't care, yes, they stay 19. We can see that on behind of the scenes, the debuckers and everything else are doing their magic.

A

It's going to now move the microsoft themes. It's going to now ask me to get that solution directly installed in the tenant. So I didn't do anything else. Then just created the solution and click get f5. So it's doing all of this automatically.

A

For me, I'm gonna click to add a solution in the microsoft teams and one two three four: we should be hitting the breakpoint after it's gonna remind me that hey we are debucking from localhost, so let's actually run debucking strings and behind of the scenes we can already see a yellow line and we have a breakpoint available in the microsoft team. Sorry in the teams toolkit- and this means then that right now I can do something like this context.

A

Sdks uh microsoft themes context, that's pretty awkward that it comes twice and then I can do something like host client type, and it's going to tell me where all of the properties, so basically I'm able to do debugging directly inside of the visual studio code without me really doing any additional tricks or anything like that, and that's actually pretty critical.

A

A

I'm probably pronouncing your name wrong, but thank you. Thank you for the feedback, so this is actually really really cool and it's going to help a lot on on doing implement the sharepoint framework implementation to watch microsoft teams uh either in the microsoft teams toolkit so again in the team's toolkit. These is 32.7. uh Is it 2.7? I guess it is. Let me double check that as well, uh which version I'm actually running there.

A

It is uh so it's 2.7, uh that's natively included, so it's just an f5 to be clicked and we're also looking into documenting this for the yeoman generator, and this is the first time I'm showing this to anybody live so because we need to actually have some additional content on the on the session as well.

A

So so, hopefully that's kind of interesting and please do give us feedback related on teams toolkit and how we can improve things uh if you test it out, if something isn't really feeling good or something isn't working, please to let us know right now. We know that in the team's toolkit we do have a bit of a interesting setup where we're kind of bypassing the sharepoint framework, given generator we're looking into alignment there as well.

A

So you could use the teams toolkit v2 in the future for creating sharepoint framework web parts, microsoft, teams, personal application, microsoft teams, meeting applications, microsoft teams, configurable, tabs or viva connection aces, so looking into having all of the different scenarios available directly in the single tool, and that should certainly help rather than having multiple competing tools and things to install available just one and then it's a matter of, do you want to have your application hosted in azure or in the microsoft 365, and that's then defining the experience cool?

A

Now I have to ask if somebody was following up on the chat: did I miss any any questions and and things and uh which I didn't answer so there's a good question from our rush here. Sharepoint toolkit will be also there in the future. What we're looking into doing is is basically having one uh toolkit so we're working with the teams toolkit v2 people rather than introducing a sharepoint toolkit and a microsoft themes, toolkit and aviva connection toolkit and whatever comes to mind tool, get them something what you're going to release.

A

Maybe in a year talking and let's have one and then it's a matter of where do you expose your components? What are you actually building it's going to provide all of the different options? The team's toolkit traditionally obviously was targeting teams only and viva connection is a really good example of a of a experience which is microsoft, themes and sharepoint and onedrive all together. So we're trying to get away from this isolated. You need to select the service or select the tool rather to a. What are you implementing?

A

This is the tool what you can do this question: how can we use this workbench for developing uh bots on teams? Not just tabs? Could you please document this as well? So there is a a really good documentation actually available already on the team's toolkit uh on the on the creating of the of the bots as well. Now, with a reminder, themes to get v2, so there's documentation already available on this. It is still in preview, so it's not yet g8.

A

So it's basically intended to be used not in production, uh so we're hoping that people would actually use uh use this tool and provide us feedback, and then we can release that available and there are multiple ways of doing then multiple things what you can do with do with the team's toolkit, including creating bots and other experiences as well. So there is a support for both and themes and tabs already available, and it's really really easy for sure to get started.