Here you can find the transcript of Episode #141 of PiaSys TechBites.

Welcome back to PiaSys Tech Bites. Today I’m going to talk with you about the latest release of the Yo Teams generator, which is now available in version 3.x. From a what’s new point of view, the V3 of the Yo Teams generator provides a completely reorganized structure of the scaffolded projects as you will see soon in the upcoming demo. All the gulp tasks were moved into a dedicated package. TSLint has been replaced by ESLint, and there is support for the Teams JavaScript SDK version 1.9, as well as for the Teams manifest schema version 1.9, as well as many more improvements that you can see in the official documentation of the generator. From a what’s gone point of view, there is no backward compatibility with previous versions of the Yo Teams generator, so if you generated a solution with any of the previous version of the generator, you will not be able to automatically upgrade them to the latest release, but you will have to do that manually. Moreover, it has been removed the support for the Teams manifest schemas older than version 1.8.

So like always, let me move to the demo environment, and let me show you in practice how to use the Yo Teams generator version three. So let’s start from the announcement of the release of version 3.x of Yo Teams generator, which is available on the Microsoft 365 Developer Blog. Here you can find a bunch of information about the latest release and you can find all the useful links to start having a look to the Yo Teams generator V3. So now let’s say that we want to install it in our environment. First of all, we will need to use a package manager to globally install the Yeoman generator as well as the gulp CLI package. And you can do that with NPM, for example doing npm install yo and gulp-cli –global to have them available globally. Then if you installed, or if you already have those packages, you can install the generator-teams again globally. It is the suggested path. And then you will be able to use the Yeoman generator to create your own solutions.

So you can, for example, create a folder. Let’s say that we want to create a folder called yo-teams-v3-first-demo. Let me go into that folder, and let me say yo teams. By doing that, we will start the scaffolding of the project. As you will see, this will be based on the version 3 of the generator, and we will have a very simplified set of questions during the scaffolding, because the new Yo Teams generator has been heavily simplified and improved from a user experience. So we simply need to provide the name of the solution. We need to define if we want to use the current folder or not, and I will use the current folder. I need to provide the name for my project, the author, which can be myself. I can choose between the available version of the Teams manifest schema, which are now version 1.8 and 1.9, as I told you. Let’s use the 1.8 for example. And then I can choose to get the default behavior, so the quick scaffolding, which will ask me just a small amount of questions.

Or I can use the extended one, which will let me go through all of the questions that we were used to see in the previous releases of the Yo Teams generator. Let’s get for the quick one, so I will say yes, and I have to choose what I want to create, like for example a tab in a Microsoft Team custom solution. I can of course choose to create also an extension or a connector or whatever else. Once I’m done with the choices I can simply press enter and proceed. I will have to provide the URL for hosting my solution, which could be on Azure or wherever you like. And then I can make a choice if I want to see a loading indicator for my tab. I will provide a name for my tab, MyFirstTab, and I will have to make a choice if it will be a configurable tab or a personal or static tab. Let’s make it for example, a personal tab.

Then eventually I can configure, and by default it is selected, I can configure the single sign on option, which I will disable right now in this very first example. Now the scaffolding is running. It will take a while, and my solution in a matter of few seconds, will be ready to go. And the solution is now fully scaffolded. So I can simply say code . to run visual studio code in the current folder, and we can see what got generated. So we can see that we still have the environment file which we are used to see in any solution generated with the Yo Teams generator, where we can set up all of the general parameters of our solution. And then we have the src folder where we can find in the manifest sub folder the JSON file for the Teams manifest of our solution, together with the icons for the solution, as well as we have a better organization of the content of the source code of our solution.

In fact, we have the client folder where we will find all of the client items, the server one, and the public ones with all of the HTML content and all of the assets like images and stuff like that. So by playing in this new structure, we can manage our solution. For example, for my tab, I can see that here I have my React component for my tab, my first tab, which is exported here, and I can see the UI of my tab as well as I can eventually see server side the TypeScript file which will simply export the class that I’m using, while in the public folder I have the HTML file, which will represent the HTML content that will render the React component of my tab. This is just a very quick example, but in the upcoming weeks I’m going to show you how to create Microsoft Teams solutions using Yo Team generator version 3. Like always, thank you for watching this video. I hope you enjoyed it and I’m really looking forward to seeing you next week. And remember to subscribe to this channel. Thank you.