Microsoft 365 Community PnP Webcasts, 19 Jun 2017

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PnP Webcast - VSTS Build and Release Pipelines for SharePoint Framework Solutions

Description

PnP Webcast around how to configure VSTS Build and Release Pipelines for SharePoint Framework Solutions. Covers different Gulp automation steps to fully automate the deployment of SPFx solution from VSTS / VSO to SharePoint Online.

A

Welcome to SharePoint patterns and practices webcast and distant. We have a look on how to create your visual studio team solution, build and release pipelines for SharePoint framework solution. So essentially, how can you do automatic deployments from visitors to your online to SharePoint, Online and and what are the steps to configure those things, so-called tasks and configurations within the solutions? My name is Erin and I'm. A senior program manager from SharePoint engineering and today's main presenter will be Ilya. Ilya will review the quick intros as well.

B

Hello, I'm, Elias, F I'm, a trainer at YouTube and I am also an MDB, so I will be talking and guiding you through the build and release pipeline process for SharePoint framework solutions. Excellent.

A

So like mentioned, Ilya is going to take over the presentation and I'll keep just jumping in and asking questions every now and then, if there's anything to ask so Ilya, please take it away perfect.

B

So, first of all, you can do some automation for drill with building your own custom, build tasks in a SharePoint framework solution project. So what can you do? For instance, if you're building your own solutions for SharePoint framework, the moment they are ready to go to production or to development or to test you want to do some automation that you don't have to manually upload all these all these salts yourself.

B

So you can use custom, Google Talk, for example, to update to CDN location in the manifest form or to upload the assets check on framework created for UD JavaScript out to an office 365 CDN or you can also rely on the already there Gil talks to go up to publish to Azure CDN and one last thing is. You can also use a build tasks to upload the application package that has being created to your site as catalog.

B

So if you create a scan things, it will automate or make your life a lot easier, and you don't have to really do any manual steps anymore.

B

So for these three tasks, I created these custom built up and I, will slightly demo them. So, let's start go to our application. We are not going to go into depth in the application itself just going to change on colors, so you see that there will be differences.

B

Let me close this one. So, first of all the application itself or the web part looks like this very nicely designed web parts thing.

A

I yell over yes.

B

Yeah thinking yellow make it great. So what we are going to do is we just go to the office UI fabric website and we take another color like magenta darks. If you like it- and we are going to change this over here, so this will set the background color of our part to magenta dark.

B

We can do a test run, we can say tilt serve it's going to start up my local server so that you can see if the report is exactly how it should be rendered so built to the part, and now you see that it's yellow and with the darker magenta color at the background. So if this report is gets to go to production, you can make use of three custom built off these three custom built. Talks can be found over here.

B

This is, for instance, the update manifest follow. What is going to do is, you can just say, kilt update, manifest and specify a CDN plot, so this CDN box is going to overwrite the one which is already available in the right manifest file. So if you want to automate this project or if you have multiple environments, you can do this via command line, so you can say: let's kill this.

B

Kill update money.

B

Test see the end but specify your tenant.

B

And they are located in cen, pot or CDN library once I click enter. It will update my manifest file if I would go and check my manifest file, this URL should now be entered. So you see, this is the same as what I just entered over here.

B

So before we go to production, you have to run some tasks like, for instance, the first task you have to run is gold chips or go bundle. Ships which are the same thing.

B

Once ready, we are going to package our solution, so we are running build package solution. Mister scheck.

A

Quick note on the on the pandal shakiest ship when you're writing that that means that the manifest XML is then pointing to that URL, which is in the right, manifest Chasen and then obviously, this package solution will then create the SPP k2 package just to clarify on them. Yeah. True.

B

Thank you for that. So now the packet is created. What you typically do is you will gather the files that were created like, for instance, the packet file, and you would upload it to the App Catalog site. Now, if you want to optimize it again, you can make use of some custom tasks so, for this, I have created two tasks and you should use whatever you want like, for instance, if you want to upload all the tasks or all the assets to an azure CDN, you don't have to rely on the upload to SharePoint functionality.

B

Of course you can just use the one that is already available. If you want to make use of a SharePoint library for storing your files or if you want to use an office 365 CDN, you can rely on the upload to SharePoint functionality.

B

So what you can see in this task is, you can set some configuration arguments like printers using in the test with the tenant, the site and the library you can configure it from within the file itself, or you can specify them as arguments when you are going to configure or execute these functions already done these tasks.

B

When you run it, it's going to use an SD sync, which is the gold as the sync threads module. It is a DeLorean and it's going to upload all these files which, from the location it sounds. So it's going to use this all the location are going to upload these files to a SharePoint. So it's going to automate that process.

B

So let me demo dis.

B

As I did not configure anything yet I can specify everything fire. An argument.

B

So I can specify the tenant, CDM I also have user name and password, but for this demo I just hide it from you, so that you don't see my username and password for my environment.

B

So right now it's going to upload my files and if everything succeeds, you should see that it's uploading three files and that it's going to publish three files on this case. It's even going to upload four files, probably I, had an older version of the web part created.

B

So now these files are uploaded, so MA I assets are now on SharePoint. My web part itself isn't aware of it, because my app package still has to be uploaded to SharePoint. So for that, I can also use a task. The task looks almost the same. The only thing that is changed is that it's going to upload everything to the App Catalog site. So for this you require three or four arguments using a password to the tenant and the catalog site. So once you configure these things, you can do yolk uploads ad package.

B

Catalog site is, in my ith size, catalog.

B

And once this is uploaded.

B

Step loaded, successful, now publish okay, so now everything is done and we go to Safari to check out that part if we would reload, hopefully the background of a rapper changed. So now we did some of the automation which, just from group justin, clamps or different tasks,.

A

B

Of resolution of Prayer, oh.

A

Sorry, sorry before we go forward from here, so let's the three camp work, I did so essentially there's to our or this table tasks and the first there's two things which needed to happen: get the updated assets, the right, seating, location, so updated, JavaScript files and all of those and then updating the package in app catalog with the same pointing to the updated assets right. So that's essentially what we did with those two tasks so which can be done manually as well, but you can do automation using these things. Yeah.

B

Indeed, now the essential plan for this software to create or to fully automate it so that you can make use of dilk and release pipeline. So can it be automated further years, of course, after that we are going to use BSP or visual studio team services, as we all have multiple environments, probably for development testing and production, we can do some automation of there.

B

So every time we push out a new release to our desk branch, you can start up a new build process for your test branch, and then you can do a release to your developer. Tenants same can be done for testing and same can be done for production, so the only thing as a developer. What do you have to do is committing your codes to VSDs.

B

So what are you going to do in vs? Yes, you're going to create two pipelines or two definitions, so you build a bill type line, definition per branch, so development test and production, and you will do the same thing for your release definition. So if your environments are the same, you can configure it for the same environments, but probably it's even better to have multiple environments so that you don't accidentally overwrite any files on production that we're coming from development or that's for specified for development.

B

So, first of all, we are going to dive into the build pipeline. So how does a build pipeline look like or whether it look like first? The first step is when we are going to commit the built pipeline is going to start and the first action it will do is it will gather all these files and it will do an NPM install once it retrieves all the dependencies is going to update manifest file. So it's going to set the right CDN, which you configure for that branch.

B

Then you do a bundle of the project, a package of the solution. So these three steps we just did as a demo in the code and then we are going to copy and publish the build artifact. Once that's done, a relief biplane can start and you can do and we release you can specify how you want to do this religious. You can do nightly releases or you can do it whenever a build pipeline succeeds. So.

B

Let's do a demo with that, so we go back to the depart.

B

Let's do some changes, so let's do a quick change to the color again, so we can say this can be closed. You can go back to go over here. You can say blue darks they're, going to set the background, color, tick, blue, dark and just to show you that it also works with other files. Of course, I can pick another color and I can set this in the sass file. So I can change the color of the button, so the button will be now clicks, lighter.

B

Let's do a quick test to see if it works.

A

After this change, it will perk, so probably it was in Tata and it.

B

Works, so this is a much better design compared to what we had before. Absolutely we can close this. You can say: okay, stop. What I'm going to do right now is going to television studio code, okay, I'm ready! You can't commit these changes, and so you can say it color changes.

B

B

Always do the push like this, you can also do the push I adjusted your code, but I like this one twitch in what's actually happening instead of opening the gate control so right now, I pushed out my new files. So let's go to VSPs so here I'm on various DF. If I am what refresh my dashboard, you should see all the previous builds, so they were all trimmed, so they all succeeded. You see that there is a current built in progress. If you would open this.

B

It's now in hold, so it's in a queue and it's in a queue until it found an agent, so it can take some time. Okay, the agent is sunk and now the application starts. So the first job that will start is the npm install. Then you will see that it's going to update the manifest file from the CDN URL you've specified then you're going to bundle the project packages solution and copy over all these files, so that the release pipeline can start and.

A

This one running the antenna style does take a while individual story online as well like a dust bowl on premises. So we'll speed up this section as we can see the progress when it moves, ended up loading of the manifest to this again.

A

And now we're moving to the CDN section so, and these following steps are relatively fast, because it's just compiling the stuff or pumping the stuff and then deployment, then they install always takes a while because we're pulling down the dependencies for the package.

B

And we copy of the publish our bug-fix can also take some time because it's going to upload it.

A

Yeah, it depends on a amount of Hostess acids, absolutely a printable statement, but in general, while it's doing this, so we will share the locations of two scripts will share the the guidelines of the scripts in the video notes, as well, so you're able to actually follow up on on what's happening and after this one has been completed. Well, basically, how you create this build is quite simply creating new builds in the build and releases tab individuals to do online, any any other things to consider on this one Elia.

A

B

Can also include some testing, so if you have your own unit test for SharePoint framework, that's also something you can include over here. So if your unit test will fail it, you can send out the report. Hey this failed or if it's it worked out for everything was okay. Then it could start out that release pipeline yeah and that's one good thing about it. Also if I would give to module, so I can show you the definition.

B

It's not that hard. As you already explained to your, we are going to show the links, so we will give you all the information you can and create it yourself so over here use just the textual tasks that were running so the UCD npm install the updated to $10 and so on, and you see just the same things: I was just doing in Visual Studio code, so I did guild update manifest and it is my CDN park, so I just use the same CDN, but in this case yes,.

A

And it might that you were wondering: why do you need to have two tasks? Well, actually, this is why I need to have that task, because it, even though it's a really simplistic operation.

B

So by default you will get an email, you can configure it. So if you don't want any emails, then you can turn it off, but it would also be nice to have an email so that you know that the build process succeeded. So this is an email that CSDs generates for me, so that I know that my build was completed and that a release pipeline will start to release everything to SharePoint. So the release pipeline is already running right now, so you can just see if it succeeded or not so hopefully it did so.

B

But what does it look like it's very simple. The only thing it has to do is retrieve all these songs. That would just upload it. Then you are going to do the uploading of your files to the CDN, so you're, going to upload the assets depending on what you are going to use and you're going to configure it for accurate, CDN or sharepoint, and the last step is to upload your application package. Now. One thing to note that I didn't explain you yet is the application package, the very first time you're going to upload.

B

You have to do a manual upload because you have to acknowledge or trust that application package from the moment it's trusted. You can use the gillip cells to do the automated upload. Whatever.

A

The first time sorry yeah I just feel free to continue with that one source of something is yeah.

B

I just wanted to tell that the manual step is good for an administrator so that they are in control of allowing that to your environment or not absolutely.

A

Absolutely and the trust operation is the one-time operation for specific SPF, X file or solution now and what's interesting that here to know it may be slightly off the topic of the session. But maybe we should pinpoint it here as well, so theoretically, when, when you're creating and version of the SPF X solution, but it's a version 1.1 like in this case we created a new version so radically you can update that package or the solution self by uploading the files to the CDN.

A

The reason why I'm saying theoretically is that our default web pack, bundling process will actually generate generate a another, unique good for the new version, and that's why we need to do this in two steps to do steps being uploading document files to the CDN and the second step is uploading: the application package to app catalog.

A

Now in the engineering we are looking into having those kind of options in the future where you do not need to, or you are able to lock down on the JavaScript file names and manifest file names when the solution, new version of the solution is coming. So there is a slight confusion on this one, apparently in our documentation and in the community as well.

B

And that's what your also found during my demo that I was uploading. Three files I should have run a go clean before I was starting over again. So let's go back to our PSAs dashboard and on VSDs. We should see.

B

Yes, I want to leave. I didn't do any change. We should see that there was a new release over these 21. You can normally also open it and you can see that it succeeded in case you do something wrong like, for instance, I did it on release 19 just for this demo. You can also open it. Why? Okay, so it was still hold still loading, and you can also see where it is going wrong. So I just misconfigured something in my goat file. You can see where it's useful, so in case everything works out.

B

It will extract the files, it will upload them to SharePoint and it will upload key application packages to SharePoint.

B

So we know that release 21 and succeeded. So if we would refresh we get our new web parts with the new background, so we see like a darker black dark blue background and a light button color. So we know that our release and build pipelines have succeeded and of course you can use. You can use everything for different environments, so you probably first do this to test and then to production again you can retrieve notifications also for the release pipelines. So this is just an example of my release pipeline. That just tells me okay, release.

B

18 is now in production. It was succeeded, so you can check it out.

B

So for my demos and my life so excellent.

A

So, let's, let's quickly talk about tough to summarize the webcast. So essentially this is the classic story. In the let's say, system in the creation craters or in the is-3 solution is three scenarios you want to test your daily builds. You want to test, or you want to test every single time with chicken stuff that is still working. This way you can automate the whole thing based on hey I'm, checking in my stuff to the visitors to the online pull it is getting within.

A

I think it was four minutes for the built bath right now and then additional minutes for the release pipeline, but like in 10 minutes, you will have an updated situation in the UI within a sharepoint online and technically. You could then automate, let's say web UI testing based on assumptions in there.

A

So it's kind of interesting scenarios for automating the initial high level testing in this one as well, but anyway, this is kind of step number one in the ALM scenarios, how to get the deployment to work properly and all of that- and it's relatively easy thing to do, especially with those galip's tasks which are available in a github and the packages which are available. So people can easily set up these kind of things within their development, any any other words from your site's area.

B

I think we covered everything in this talk. So just one thing we didn't show was the testing of our report. So, yes, you can include, it was not included, but in case you wanted feel free to add it as a task. Yes, sir desi ah meeting to could tell me, and maybe.

A

On that one as well depending on when you are watching the video we are looking into having a let's say, additional guidance on testing into in testing, we need to do some changes in the SharePoint framework as well from a shipment engineering perspective.

A

So there are certain scenarios which are not quite there yet, but it's all coming gradually as we move along, but Thank You Leah for Quake presentation and walkthrough on what does it actually mean how easily easy it can be, how easily it can be configured to the visual studio online and also thank you for this awesome golf tasks and because this will be widely used by other other developers. No doubt so excellent to have all of this really for the people. Adapting the SharePoint framework, but I think that that's it Thank You Leah.

A

Thank everybody for watching and we'll come up with a new webcast, soon or later Cheers.