Microsoft 365 Community Getting started on using Microsoft Teams Yeoman generator (yo teams), 24 Jun 2020

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: Building for multiple target environments with yo teams

Description

This tutorial will guide you on how to build and deploy a Microsoft Teams solution for multiple target environments such as dev, stage and production.

Demo presenter: Wictor Wilen (Avanade) | @wictor

Resources:
• More on the Teams Yeoman Generator: http://aka.ms/yoteams
• Build your First Microsoft Teams App - https://docs.microsoft.com/en-us/microsoftteams/platform/tutorials/get-started-yeoman
• Learn more about the Microsoft 365 developer community at: http://aka.ms/m365pnp

A

Hi, I'm victor. In this episode of the yo team's training. We are going to take a look at how you can build your microsoft team solution targeting multiple environments.

A

If you are working in a team or you're working in scenarios where you have multiple environments, such as production, development, staging etc, it is important that you can target your team's manifest file to these environments. In many cases, you as a developer, don't have access to the production resources such as application, ids or keys, etc, etc, and using your teams 2.14 and later a dot env file will always be scaffolded when you create that file.

A

That file contains all the parameters needed to run your application, but also the package the manifest files that makes up the team's application. For instance, we have the name of the package.

A

We have the application id, we have the app ids and password required for our bots and other things, and also the application insights instrumentation key, which of course, will be different across production stage and development environments to package on create your team's manifest. You use the command gulp manifest and that will combine the manifest.json file found under source manifest and manifest.json and replace the replaceable parameters with what's in the env file. So, for instance, in here we have the website url being the hostname being replaced.

A

We have the application, id version and package name and other things as well. If we scroll down to the bottom, we have the web application info, which is required for the ssl tabs, for instance, and these will, of course, vary across the different environments.

A

So when I build this file and package it, it will create my manifest.zip file or the name of the application.sip, and this is a file that I uploaded to microsoft. Teams.

A

If I go over to my teams, application I'm using the browser here and into my corporate app store- and I can choose upload a custom app and that's where I can upload my development application- I choose to upload for my tenant. I choose the zip file that was generated using gold, manifest double click on that one and will not be uploaded to your teams, enterprise, catalog and, as you can see here, here's my demo environment and I actually have a special special icon for it. Right now.

A

It says dev and also a postfix here, dash dev to to indicate that this is my development environment, my development application. If I click on this one, you can see the same thing I click on add here. It will take me to my my application with all these icons.

A

So if I want to do this for production, what I do, then, is that I create a copy of this.dnv file and rename it something.env. In my case, I have a product env in here I have a different application id and also different parameters. The reason I want to have a different application id is because these are different. Applications are treated by different applications in microsoft teams. However, it's the same source code and everything, but for teams we need to have multiple applications, so we can differentiate them and to build my application.

A

Using these set of parameters is that I type gulp manifest dash dash, env and then the name of my custom environment, dot, dma file in this case product env click enter that will create a new zip file and, let's see how it looks like when I upload that one.

A

So if I go back to my team's app store, apps and click on upload, a custom app and we choose the same zip file, because we generally, we just overwrite them with the new variables from the pro dot. Env click on that one, and you will see it- will upload a new file into my enterprise app store, and in this case we will actually have a new application.

A

The icon will load here. We have it so it's different icon does not send say dev, anymore, etc, and I do this by using a postfix, I added a custom variable to my files, specifically in the dot emv file. I added an env parameter here that I use in my manifest to post fix both the title and the icons.

A

So, as you can see in here, I have that env, which is existing in my normal development.tmv file, but not in my production, environment and the same kind of thing. I do for the icons here, so I have a dual setting of my icons, so I have the color and the color dev outline and out line dash dev, so I can differentiate them. This is an easy way for you to create your development, staging and production environment.

A

You just need to create multiple copies of the dmv file and also ensure to have unique application ids across them. Another really useful scenario for this is ci cd, so, for instance, assume that you have connected your connected azure devops to this, for instance, and you might have an azure pipeline channel file. In this case, I have my normal files here, the steps I download the node tools do npm install. Then I do gulp build dash, dash, env, prod dot, envy for my production environment, so both build and manifest support.

A

This dot dash dash env parameter. Then I do gulp manifest dash dash env prod.env to build my production manifest, and if we go over to azure devops and take a look at my latest build, we will actually see here. It's succeeded if I click on jobs. Go in and take a look at my my actions in here. We have the generate teams app for prod.

A

You can see that we're on dash dash and fraud, dot, env and it's using custom.env file and also, if I go back to the artifacts being published, we can actually see if we go into the drop folder open up that package and once again open up the package where we have a zip file and we can open up that zip file and just to verify that inside that file we have the correct production environment settings in this case.

A

There's no env in the end here- and this is also the production id application id so using azure devops pipeline. You can automate all this and even deploy it out to microsoft teams. Thanks for listening, your.

A