Microsoft 365 Community Community Demos, 11 Jul 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Upgrading SPFx solutions to the latest version using the CLI for Microsoft 365

Description

In this 17-minute developer-focused demo, Don Kirkham shows how to cleanly update your web part functionality that was built using prior version of SPFx. In this 0 to Done demo – upgrade a SPFx project to v1.15.0 in 10 minutes using the CLI’s spfx project upgrade command. Set up environment, clone a project, and upgrade dependencies and files in project following steps detailed by CodeTour or Markdown in VS Code. Gulp build and done! Addresses all SPFx dependencies and most other dependencies. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on July 14, 2022.

Demo Presenter
• Don Kirkham (DMI) | @donkirkham

Supporting materials
• PnP Tool - CLI for Microsoft 365 | aka.ms/cli-m365
• Article (11July2022) - SharePoint Framework (SPFx) v1.15 and the attack of ESlint – Andrew Connell (Voitanos) | @andrewconnell | https://www.andrewconnell.com/blog/sharepoint-framework-v1.15-and-the-attack-of-eslint/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

Let's talk about upgrading spfx projects, all right all right, so this is me, I'm don kirk on my microsoft mvp in m365 development, I'm a consultant with dmi as an enterprise, architect, there's some contact information there for me, so feel free to reach out and find some information. I'm a long time, lurker first time, presenter, a product of the sharing is caring process. So this is.

A

This is pretty awesome to get to do this, so I always like learning interesting facts about speakers, and so my interesting fact is that before I became a full-time developer, I was a pilot in the air force, so I did 20 years in the air force, flying these three airplanes and had a lot of fun doing it and love talking about that. If you ever get a chance we'll uh we can talk about fine, all right upgrading.

A

Why do I want to do this? Okay, I I always install the latest version of spfx, so I just use that when I create my projects and that's great, but if you do spfx projects for more than a few months, guess what the version is going to change and now you're using multiple versions, and while I wouldn't recommend going back and just upgrading all your projects, there will be times where you figure out that you need to do this. So you end up with this stable of solutions using different versions.

A

So, as a as a call out to you know my buddy chris kent, we got warrior horses in the stable, so we're doing that. But eventually you end up with this uh these projects it's like. Well, I need to go back to an older project and make a change to it. So I need to fix a bug, maybe or I need to change some functionality. Maybe I want to add a new feature to that.

A

So you have an option. You can either go back to the original version of sharepoint framework reinstall, that environment set everything up, so you can work with the environment that it was built in or you can upgrade to the latest uh environment, which is what I recommend doing so again. I wouldn't go back and just do it by default, but if I'm gonna make a change to it anyway, I'm gonna go ahead and upgrade so I can get all the latest and greatest stuff from the framework.

A

So how do I do this? Well, you can do it yourself. You can go through the files and try and change all the dependencies and do the package installations and change all the different configuration options. But I did this before this tool was available and I don't think I ever did it correctly. So I just don't think that's a good option, so you can use a tool. There may be commercial tools out there. I'm not sure, because I have a free tool available to me through the cli for microsoft, 365, a free community project.

A

We just heard about that and some of the updates that they're doing to that. um But this is a great product written by great developers. um It does so much more than what we're gonna show today, but uh if you haven't played with this tool, you definitely should do it, and this is one of the things I really like about it all right. So let's go ahead and get this done so first thing we need to do.

A

You need to set up your environment for the version of spfx that you want to upgrade to so we're going to upgrade to 1150 today. So that's the environment that I set up so I'm using node 16.. The only other dependency I need is a golf cli. I don't even need the framework installed most of the time you have that because I'm building new projects and stuff, but I don't need it for this particular process. So all I have to do is just install gulf cli and then, after that, I just end up with this.

A

So this is actually the environment that we'll look at today. So it's just node 16, gulp cli and the other two packages that come with node all right, and then we installed the cli for microsoft, 365 and I'll. Show you where you get that here in a in a second, but it basically boils down to one command. You just install this on your uh in your local environment.

A

It does need to be installed in the local environment because you have to be. You have to run it from inside the project folder. So the docker solution is a great solution, but it doesn't work in this particular case or it takes extra steps to make it work. I should say next thing: is you need a project? So just, however, you get your project, whether you're cloning, it from a repo somewhere or whatever you got to get it into a folder, so you can start working on it.

A

We're going to use vs code today, one of the options for the upgrade involves code tour if you're not familiar with that, it's a really neat little tool, especially for learning, but the um uh you do need an extension in vs code. In order to to do that and then once you do that you go into the project, you open up your integrated terminal out of vs code and you run an upgrade command.

A

So I've got a couple of them up here that we're going to look at today, so it's spfx project upgrade and then your options so dash o or dash output, is how you want your results. So there's several options. The two we'll look at today are tour and markdown. So tour creates that code, tour piece and then markdown creates a markdown file, and then you just save that into your local project or wherever you want to save it, and then you use that to walk through.

A

So the tool doesn't upgrade the proper, the um the project for you. It gives you the steps to upgrade. uh So you still, you still have to actually do the actual upgrade yourself, but it just walks you through step by step very easily. So the last thing is, you just have to follow the instructions.

A

So let's go see how this works.

A

All right, so how do I get this? So if you go to the you know the easiest way if you want to always start with the pnp page, if you go to the tools and go down to the cli it'll, take you to the to the home for the cli uh for microsoft. 365 tells you how to install it. We've already kind of gone through all that.

A

If you want to learn more about the commands, so here's all the commands all the different areas of commands that you can get to again we're just talking about one command out of, I don't know, probably hundreds um that are in this project. So if you go to project upgrade, you know it walks you through the different options you don't have to upgrade to the latest version. You can pick a specific version you want to upgrade to you can also use in the preview. You can upgrade to any beta versions that might be available.

A

So there's things in here that definitely worth reviewing to see how you want to how you want to do this as far as projects go, so I just went and grabbed a web part out of one of the pnp repositories, so this is actually in the web part sample webpart repository, but it's also in the spf sp starter kit repository. So I worked on this a few months ago.

A

It's just a nice little web part that you know, gives you a people directory, and so you click on it gives you little people cards for stuff. But I noticed when I was doing this, that this project is is a few years old and you know so it was built originally in 2018, and so it doesn't use any of the new microsoft graph toolkit stuff. So I was like. Would it be kind of cool to to put toolkit stuff in here? So that's kind of the thought.

A

That's my use case for this is I'm going to upgrade the microsoft graph stuff not in this demo, but I'm going to show how I get here. So it's at 113 1, so we're going to try and get it into the latest version if you're not familiar, if you're using the pnp repos. um All of them have this option that you can download the directory, so it zips up this project downloads it you can extract it onto your local machine and work with it there.

A

So I've already done that you don't need to watch me do that kind of stuff. So let's go look at the the environment and how we do this so like I said so, here's my environment, I mean I'm using node 16..

A

I've installed the microsoft 365 cli and I've been go and installed golf cli and that's really all I have, and then I've extracted my project into this particular folder. So let's go see about upgrading it. So I'm going to start visual studio code.

A

And so as we as we look at this, let me close a couple things up. So if we look at the package.json file, you can see. Yes, it's 113.1, so this is what we're starting with and then we're going to walk through the process. To get this upgraded, I'm going to close those back out all right, I'm going to open up my integrated terminal and then I'm just going to run the command.

A

So m365 spfx project upgrade that's cool, and then I want to put this the first time we're going to do we're just look at that tour. So that's how long it took so. It didn't even register that little check mark. That's in my my prompt will tell you how long the previous command took unless it took so little time that it just didn't even register. So so it creates this new tours um folder up here with a tour folder in it.

A

Since I've installed the extension into visual studio code, I'm just going to go ahead and open it from here. I just tell it which file I want to update or open and off it goes so code. Tour is a step by step you it lets. You highlight things and walk you through things, so what it does is it opens up the file package.json.

A

It shows you the line, so it's going to look at the sp core library and then it tells you what you have to do. So you need to upgrade this dependency package for the sp core library and here's the command to do that now, from code tour, you can actually just click. This command and it'll open up the integrated terminal and start running this command for you, I'm going to show you a different way of doing that. But that's a really nice feature just to do that and then you just walk to the next one.

A

So you go to the next one. Now we're going to update sp, lowdash and again, here's the command to do that, and it just walks you through it. So you just run each of these commands one at a time as you're going through.

A

The upgrades typically are, are two-parted, so the first part is all the dependency upgrades. So you just you, walk through each of these npm installs at different, the dev dependencies, the regular dependencies and then once you're done with all of that. So I'm going to skip down here to step 19. once so. Once once you're done with all the the npm commands, then you need to update some files. So these are things that um you know just they're they're configuration pieces that need to be upgraded to work with 115..

A

So the first thing is, you know yo rc we upgrade here, so you can see it again. It opens up. The file shows me the line it has the insert code here. If you do that it inserts a little bit more than what I like. So I just need this one line. So it's so I just typically just copy the line and paste it in there myself when I'm using this particular way.

A

Okay, that's the code tour, so I'm not going to walk through any more of that. So I'm going to close that out and let's go back to our our command line.

A

And this time I'm going to change to the markdown version, so I'm going to do the markdown and then I just give it a name, so I just use upgrade dot emd. It will do it in the local directory if I don't specify somewhere else, but I can specify wherever I want so now when I come over here and look so here's my upgrade markdown file. So if I do preview for markdown, you can see this looks a lot like the code tour right.

A

So it's the same type of instructions that you get in the code tour, it's just in a little different format. uh One difference is, if you can't click on these you, so you have to copy and paste these. You know individually as you go through, but this is the part I like the best. So if you go through all the instructions here, it has.

A

The top part of this file is the step by step, and then you come to this section called summary and the first thing in the summary, if I can grab it with it being zoomed out this much is all of the npm commands that you have to run all at once, so I can just copy that I uh terminal paste it in and now it's going to run all of them at once, so I don't have to go through these individually one at a time it just knocks them all out for me.

A

So while it's doing that, I can run back over and go through the the modification. So let's take a real quick look for this project. What the modifications are so the first thing it's going to change the version number in yo, rc, okay, and that makes sense, then we're going to upgrade the compiler version. Then ts config to use a later version. That's good! uh It adds this hef folder to the git, ignore file.

A

So, if you're checking this stuff to get so, I guess there's a new half folder that your dot hip folder gets created at some point, and so we don't want to check that in and then it starts making changes to package.salute dash solution.

A

So it's going to basically add a couple of a couple of pieces here, so it's going to add a metadata section. So apparently this wasn't required in 113.1. These are changes that have happened in 114 and 115.

A

You know, but you can just basically click on the link here opens up the file so under solutions, I'm just going to go to the last item in solutions and then paste in the new thing. Okay, that's how easy it is just to paste this stuff in and make it work. Then it's going to go back and add another section for features. Okay, so I would go and copy and paste that in there and then the last thing it shows is it you can go into your launch.json and change the default browser.

A

I think the default is chrome, you can change it or it used to be crossing out to the pwa chrome or you can do pwa. I think it's ms edge, if you want to use edge as your as your default debugger but anyway, so that's that's an option and that's it. So that's all the steps it took.

A

So, let's go take a quick look see if our npm command's still running, and it is because it's npm- and it just takes a long time- and we don't have time to sit here and watch that so here's the warp, nine version where we go when we say: oh now, it's done okay!

A

So now we finished the last thing it did was if we, if we go back and look here, the last thing it did is it creates a new file called dot, eslint rc.js and we can see that ran here and it created this new file for us over here in the in the project. So that was the last thing they got ran so now everything's good to go.

A

uh We've made I've already made all the changes to the other files in here, so we should be able to just run a gulp build I'm going to do a gulp serve for the, so we can just not have to do it twice. Oops.

A

And hopefully, what we get is no no errors, all right so as it starts walking through, because first thing it does, is the gulp build and starts going through and looking for, you know any errors, so we don't see any errors that show up now. We do see all these warnings now. This is part of the new eslint piece, so um as they as we microsoft put the esl engine in there and the rules. um These are warnings that are coming up. Andrew connell posted a link earlier in the chat about a discussion.

A

That's going on about these rules and how this is implemented. We've been wanting eslint for a while, but there's different ideas on how to implement it and which rules should apply and which should come. That sort of stuff go to the link that andrew posted participate in the discussion. Microsoft wants to hear our opinion on this, so please do that anyway, they're all warnings, so they don't really affect anything um other than just code style, all right. We get to the end here and we get to the reload steps.

A

So that means I should be able to hop up here.

A

Oh, I guess I forgot to take that out for my last practice session, but let's take it out and add a new word part, so I'm going to add people directory local and so here's my web part working just fine and you know, but it's now in version 115 0.. So now it's ready for me to go back into my code and start making my changes, so it took us less than 15 minutes with me doing a lot of talking and doing slides and also so it takes less than 10 minutes.

A

Usually to do this now the the tool concentrates on the the core sharepoint framework pieces. It will try and work with other if you have other dependencies and stuff in there. It'll try and work with those too. If they need to be updated, I have seen where it doesn't always catch all of them, so you may have a couple little manual steps to do, but this is a lot further, along than what you will get. If you just try and do this on your own- that's it! Oh!

A

um I will check the chat for any questions and try and answer those, uh but thanks for letting me talk and uh let I hope uh we'll see you soon so patrick back to you.

B

Thank you don great stuff there really a nice clean, look at how to update a project with the cli encourage folks. If you haven't tried to update your old spf x projects, it is really valuable to stay on later versions. You get a lot of great new capabilities and fixes, and the cli really gives you a nice easy path to do that. So, if you haven't, do give that a try.