Microsoft 365 Community Community Demos, 7 Mar 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community demo - DevOps pipelines, and how-to setup SPFx configuration per environment?

Description

This community call demo is taken from the SharePoint General Development Special Interest Group recording on 7th of March 2019.

In this video Velin Georgiev (Pramerica) shows how to setup SharePoint Framework configuration for DevOps per your target environment.

Presenter - Velin Georgiev (Pramerica) - @VelinGeorgiev

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-dev-community-pnp-general-sp-dev-sig-recording-7th-of-march-2019

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

A

My name is villain. You give and I'm a SharePoint developer for a very long time. Today we are going to talk about DevOps pipelines. As mentioned this I mentioned it. It covers SPF, x4, now Pallavi. This is, as you said, more related to ALM ApS and in future, we'll show how you can add dotnet core or PNP core components here and built and bundle and deploy along with the the SharePoint framework packages. This is maybe just the start.

A

So today we're going to talk about how to set up a different configuration for your SharePoint framework solutions, so you have different environments and those packages might require different configuration for the Deaf environment, running new features and a different configuration for the production environment that is supposed to be stable and the new features are not supposed to be there if they're not ready. So this is a follow up from the previous two demos as near demo number three and we already covered built Basics in the lace basics. So these are follow up.

A

Some things might not be demoed here, so I recommend you go there if you're missing a piece of information and see what is in there and today we're going to just follow up on our previous discussion. So let me just I'll be using github as well again. My source code is in github and it's linked to Asia devotes. So this is the demo how we ended the demo.

A

Last time we had a development release, task here and production delays and we were releasing a package to our dev environment and the same package to our production environment. So what it means is in our artifacts. We were we're having that package, HP FX package that we're releasing to both environments. However, it is not with optimal, because in many of the cases.

A

In many of the cases you have, you have different setup, so, ideally, you will release the package bundled and packaged with a set up for the DECA environment and the same package, with a configuration more suitable for the production environment and at the end of that build you have that package listed here with like.

A

Basically, we have two packages that are the same, but they have different configuration and by different configuration, I mean like I'll, go to resource code here and I'll show you my solution. My solution has ice cream shop and ice cream lorry web parts for the ice cream shop is ready for production and the ice cream. Lorry is now ready for production, and the business doesn't want to include that into the other package.

A

So the way we can control our feature seized from the config JSON here and we have both web parts, but the difference should be like I don't need after production, it's not ready, so we have to exclude it, but somehow we have to included in the production. So how we do that. Another business scenario might be that you have some settings.

A

For example, my app settings are bundled with the package and I have different values here that I'm using my web parts are using as a shared of alias and as I can see, I'm accessing the DEF tenant here, but for production that value should be production, so I can hit the production tenant. That might be another scenario and how we can change on the fly, how we can change that with the builds and releases so I will just save that and I will show you what we have here.

A

So here we have a DevOps folder I've created that lemmas. That's not part of the SharePoint scaffolded project, so I've created up folder and another that folder we have a build. Where all our build definitions are. We have release where we have the release quits, but we also have a folder called configurations.

A

So enough folder, we have a broad folder and we might have queue a staging, whatever environment you have and and underneath we have a config and under the config we have an our config Jason. So you can see that from this folder I'm trying to replicate whatever is in the root folder. So under config we have config. Here we have config here we have that Jason there and we have that Jason there. So the difference here is the def Jason have both web parts and that config here has the own.

A

Only that the web products is so supposed to be in production. Then, on the other hand, we have a source and it out source again I'm, trying to exactly replicate the same folder structure, as is here that's very important later and in that's very same structure. We have source source, webparts webparts, and then we have ice-cream shop. We have it here and then down below. We have the manifest right, and here we have the manifest and you can have a different set up on, even even on our web part level.

A

You might have that set to true, but where it goes to production, it should be false. In my case, I have a support, full blade here and I. Don't have it here. Probably the product owner decided that that web part is not suitable for full bleed and in the next release will go without food labor.

A

For now in production we are full bleed and then on the up settings again up settings the same vocation as in the root folder up settings, the same absolutely the same folder structure, but here we have prod and we have the assets is different version or whatever. Now how we put that into our pipeline. We already have those configurations here, but what we are supposed to do so here is our build here. Our build definition is again the same I'm, a file from the previous time, but slightly modified. So we have trigger that's master branch.

A

We have compute here of your emotion to run the scripts. We install no GS on that machine, so we can. We can do things with gold and then here is the the interesting part here. So what we are doing is we are copying all the files from the source directory so that that is a variable that tells either native of pipelines that the storage directory in all the files in the source directory should be moved to a staging directory.

A

So basically just move to another folder, but not just to the staging directory, but staging slash def, so I'll be moving all the miles into that the folder and after I move all these files, I will say: go to that folder install all the modules, bundle and package the solution and then zip it and make it available in Asia DevOps. So at the end we have the dev package there.

A

All we did so far is we've just moved the files all these valves from one folder to another, and we executed the usual commands here to package and is our dev package, but for the production. Then we continue that, like we say, copy all the files again from that source directory into another folder. That is a slash production flash prod. So we move all the files again in that new folder, and here is the moment. The simple trick that we're doing to overwrite those files.

A

So what I'm seeing here like that's the most important part of the demo baby? So what I'm doing here is I'm saying go through that folder, the prod folder grab all these underneath and move them back to the root folder. So what that will do is that will just override everything that you have here with everything that is underneath here.

A

So you can control multiple multiple settings like that you can have even your package JSON that is running old packages here and then you can override it and after you override it, you, your execute npm install, go bundle and package, and that should give you your production package, it's very simple but very powerful, because it's running under one second, so it's efficient and it gives you different company for different environments again at the end, as of set, which is bundle package, and we make that prod available.

A

So I'll do a small change to see how this works, because I already have that pipeline prepared, but I'll do a small change in the files for you to see that it's just running. So that's my production environment and you can see the app settings here, they're saying prod, 1 2 3 and they now change that.

A

Let me just refresh its supposed to say prod only okay, no and then we have the other one that is saying: dev, 1, 2, 3 and I'll just change those in and start the build for you just to see that it's just working raise it up, settings change it to death demo and put it something else here like ways: it configurations sorts of settings, prod demo and then we'll say, get meet everything config change go get pushed to my repository and that should just start the build.

A

Okay, let's see what's happening, we go to our DevOps and we go to our build and we're trying to see. If something is going to change. Oh there you go so we have a built and that build will try to execute all these steps in the mo file. So I will try to find available agent I'm using the free agent Microsoft offer, and it will try to run all these steps one by one while we're waiting.

A

I'll just recap: what just happened in the build I have two three slides here so again: we're copying from the source directory all the files as they are into a new folder called dev, and we have everything as this, the only parties that we're compiling whatever we have in the service. Now, on the other side, the the prod package, we are copying everything into a prod fault, but there is a nice animation here like we are overriding whatever is in the source with those configurations from from that folder, and then we do the compilation now.

A

This is not changing anything in your source control, so this is running just on the the VM that is creating the build then that VM is destroyed. So your source control is not growing. You don't have to do anything else. It's just one time override here for your information and another thing is why we have a prod in a dev folder here. Why don't don't I? Why can I just override run, npm, install and override yeah and run npm install in the same directory?

A

Well, for me, it's simple because I'm moving those to a separate, prod and dev folders, simply because, if you have a package jason with different packages and you execute em can install my course- conflicts right. You npm install for death and in UMP install for production in the same directory that might cause conflicts. That's the reason and the build is already there. There is just one more thing. I want to show you, because the build is not enough.

A

We have to go to the release and the release is one minor change us from the previous time, so in the release, I'll just go and edit and show you what changed there so.

A

Here is my release file and, in my release, file I have an extra I, have an extra variable here and that variable is stored in the variables and you have an extra details to say. Okay, if that variable is to is def true pick up the DEF package and deploy it if that variable is false. Just deployed production package that is difference in in here and the variable is stored in the release pipeline here in the variables.

A

So you can control that variable you're, seeing when you're when you're running the deaf environment said it to cheer when you're running as the production environment set it to false we're just sometimes so I, don't think I'll have time to show you how these changed, but believe me, at the end of the day, this will change right.

A

So this is how you can control your your settings inside your package and next time we will talk about a parallel execution, because running anything is told twice in a sequence is taking too long so in the next demo will show parallel execution, and we will raise windows against linux to see if we can break the myth that linux compose no g is called better. Okay, that's neither sir thank you valiant. Thank you.