Microsoft 365 Community CLI for Microsoft 365, 2 Jul 2020

Previous Meeting

⏯

youtube image

►

From YouTube: Upgrading SharePoint Framework projects using Office 365 CLI CodeTour upgrade

Description

In this 15-minute Developer focused demo, Hugo Bernier introduces viewers to a Visual Studio Code extension found in the Office 365 CLI that methodically steps users through an upgrade of a SPFx project from SPFx v1.0 to v1.10 and soon to v1.11. Recently, a CodeTour was added to the SPFx Starter Kit and moving forward CodeTours will be routinely added to PnP Samples. With CodeTour, you know exactly which files to upgrade in your project. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on July 2, 2020.

Demo Presenter(s): Hugo Bernier (Tahoe Ninjas) | @bernierh

Supporting materials:
• spfx project upgrade | https://pnp.github.io/office365-cli/cmd/spfx/project/project-upgrade/
• SharePoint Starter Kit v2 – CodeTour | https://github.com/pnp/sp-starter-kit/tree/master/.tours
• CodeTour | https://aka.ms/codetour

Learn more:
• Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
• Visit the SharePoint PnP Developer Community YouTube channel: https://aka.ms/spdev-videos

A

Upgrading your sharepoint framework project, because using office 365 see like code to our upgrades. My name is hugo Bernier, I'm an MVP I'm, also a proud member of the patterns and practices. Virtual.

B

A

Be reached on my blog and on Twitter and don't be shy to reach out to me. Let's talk about what is office, 365 CLI! Well, if you don't know what office 365 CLI is I'm really offended and I'm not talking to you ever again. It's it's really a you know. Cli is the command-line interface that allows you to manage your office, 65 tenant and your SharePoint framework projects on any platform. Unlike you know, some other command-line tools or parish le kind of things where it was not so available in the past to install it.

A

You just need to use NPM and you deploy it with the GE tag or the GE flag to make it the global. So it's at PNP office, 365, CLI, and to use it really. All you need to do is to type office 365 in your command or terminal or any anything used to type your commands at the bottom of included. Some URLs one of them is to have access to get all the documentation and one the other one I think is just access to code.

A

If you want to contribute, because this is an open source initiative that everyone can contribute to and what we'll be showing today is actually something that I had the opportunity to contribute to.

A

So one of the commands that are available in office, 365 CLI is the SPF X project upgrade and what it allows you to do- and this is this is probably very timely, given the fact that you know SPF X 111 is is coming soon. Is the ability for you to take your SPF X project from pretty much any version 1.0 and above and to convert it to any specific specified version?

A

Now the the one thing that we have to be clear is this command does not change your project. What it does is it gives you the instructions or the steps to upgrade your project, but all you need to do. Is you type? You know after you've, typed office 365, and you get this this pretty new command, prompt users, type SP effects project upgrade, and then you put the options and the options are listed here on the screen.

A

But I'll show you a little bit further later and then the types of upgrades that you can do our text, JSON, markdown and tour. Now. The reason why we didn't want to change your project is because, depending on the complexity of your project, you might have a lot of NPM packages that are included in your project. That may or may not be compatible with the newer versions of the aesthetics upgrades, and this is something that you have to do yourself.

A

You have to validate every every component that you got in your project to make sure that it upgrades successfully. But what the report or the steps give you is really kind of a the full detailed list of what you have to do. The problem is: if you're working on a big project like the project I'll be showing you had a lot of steps for me to upgrade. It becomes really hard to keep track of okay.

A

What was I on step, 11 or step 111 I can't remember- and this is where the code or upgrade comes in now. What is code tour well, code tour is actually a Visual Studio code extension. The URL is at the bottom here, AKMs slash, go tour and it was not written or it was not intended to be used for the office 365 CLI, it's just. We saw a great opportunity here.

A

Code tours are something that allows you to record a and and playback a guided walkthrough of your code in your project, and you can have as many code tours as you want in your projects. In fact, we've started to add code tours in a lot of the PM samples, be as specific starter. Kit now has a code tour that walks you through the architecture of the solution and we're planning on adding more and more so it's it's a great way to guide people through.

A

You know where, where they should pay attention and what it does is it creates a tours, folder dot tours and that's what our solution does so now, because my upgrade process actually requires doing NPM install I actually pre-recorded this, because I didn't know how much time it would have to do this demo.

A

So this is one of the samples that I've created, it seems like 20 years ago, but it's actually probably last year, which contains probably a dozen webparts in it, and so it's a big project to upgrade and it's a project that's available in the samples repository so I.

A

All I did is I open the visual studio code or the project folder and I open my command line there and then I, just typed office 365 and hit enter and what I get is I get this command prompt and that's the command prompt, that's provided to me by office, lucify, CLI and then I, just type SPF, X project upgrade and then I always do help, because I never remember what what what the instructions are and then what you'll see here is le. Remember right here, the output this here.

A

So the command is output and the output types are JSON text, markdown or tor, and the default is text so once you've once you've done that, so, let's actually just again I'm in the current project, folder. So I don't really need to do anything. Fancy here, I just need to just type output and then tour and that's it that's my demo. Thank you to ruin no I'm just kidding really the code tour has been created, the upgrade has been created and this was not sped up. This is actually real time.

A

This is how long it took to do this. So then, what you do is you open your Visual Studio code project and you'll notice at the top here there is a new folder called tours right here. I know it's green on green, it's hard to see, but it it adds this to your project. Now, if you don't have code tours installed as an extension, it doesn't do anything right, it's just a folder with some JSON files in it and you can absolutely ignore it.

A

But if you have code tours installed automatically, it shows you this window here that lets you start the code or so, if you click on play- and let's do that, you click on play. What it should do is it should launch a coat or for you- and it shows you here- and this is a I- have to to admit. This is a big project.

A

It's got 146 steps, but it gives you the steps here and you see it says, execute the following command and all you need to do is click on that blue button or that clewd blue text. It will automatically start the command for you now. We could just sit here and wait until NPM install has been completed, but I recorded the video to make it faster. So once it's done, you actually click on right here.

A

You just click on next and it takes you to step 2 and as we go through the whole process, we actually walk you through every file. So you know exactly what's being changed in your project, so you can see here.

A

Lodash subset is showing version 171, but at the end of this step, it'll show me that it's on version 1 pen, so you keep on doing this until you get to and I've skipped a lot of steps here, I'm already at 7:10, but then you'll have some other steps where, if we go to the next step, you'll see this one, it can't be updated for you with a command. So it says this is what you need to do.

A

You need to copy the version number from 171 to 110, so you this is where you exercise your copy and paste skills, and you just do that now when it, when you do this, you have to keep in mind that you still want a JSON to be properly formatted when you are entering the information. So there's a few steps in there, where we ask you to add new nodes and things like that. Just remember. Sometimes you need to add some. You know commas or things like that, so you go through all the steps.

A

It's usually not a hundred and forty-six steps, it's usually about 20 or so steps, but you go through all the steps and then eventually, when you get to the end, it'll tell you.

A

This is an optional step. If you have any problems, because sometimes some people will get into problems with SP HTTP client configuration, it tells you, you can just run NPM dedupe. Otherwise it says: that's it you're done there is one additional thing that you can do is: if you really don't want people to be to have to see the store when they open the project, you can delete the tour folder, but I strongly I stand I actually strongly recommend you delete the tour and then go nuts and create your own tour.

A

So you can, you can introduce people to the content and the structure of your code. So that's that's it at this point. Once you've done this, you can just run your npm build and you have. If, if everything went well, you actually have a fully upgraded SPF X project. Now there is one little thing that I should point out is the the code. Tour extension was updated yesterday and, of course, it happened just the day before I was doing a demo and what could happen is depending on the version.

A

The the code to our schema might require your your file to be instead of having slash dot. Slash like this, it might have to be just the relative path from from the root of the project. So if you open the code tour and depending on the version of the code tour that you have installed, if the code tour doesn't start, that's more likely what it is so you'd have something like this. You just go and remove this I just did a global search and replace, and the code tour will be happy.

A

That's pretty much it I'm available for questions. Vesa.

B

There were, there was a question from Neelam Mugen. Can we use culture with the summary upgrade because it will be shorter? Summary upgrade not not. Following on the question I placed on this one I'm.

A

Not sure the summary upgrade is.

B

But anyway, so whenever, when you are executing the office raises for CLI, it will give you the steps- and this is a great add-on actually in point you to the actual locations actual places where you change. This needs to be done and obviously, from the Chevron framework. Engineering are working directly with office, 365 CLI team, so that whenever the 1.11 comes out, there will be immediately available. Upgrade steps from the one point ten to one point: eleven us needed, so that's that's being already tested.

B

Actually, as I speak for the one point eleven so that that work is already ongoing, so pretty cool, and then you go, you point it out, but that's actually good point as well. Anybody could use the the code tours in general for approach and, let's say creating an intro for the future right. Yes,.

A

And in fact, both Cameron David, Warner and I started creating code tours for the the SP starter kit, because it's probably one of the largest solutions out there that's made of a whole bunch of components.

A

So when you started with just an overview of the SP starter kit and then we're actually going in and creating code tours for each of the web parts so to just to lower the adoption barrier and make it easy for people to understand the project structure and every new SPF ex webpart sample that I'm, creating I'm, actually adding code tours in them as well, just to kind of give the the same tour. That I would give if I was demoing. This on the community call I'm doing the same code.

A

Tour in the two repos and I encourage you to do the same. If you want to share code with other people, absolutely.

B

A

I agree with Ralph's code. Tour should be part of the review process. In fact, you may have noticed when you have a good tour running that it's it's. Actually, it gives you the ability to reply, because it's really intended doesn't as a quick way to review code.

A

You know this is not a session, a bad code tour, but code tour actually does allow you to bind your coat or to a specific version of a commit in github, so that when you, when you upgrade or you go back in history, you're actually able to see, you know the the code tour for that specific version really.

B

Really cool stuff, absolutely absolutely and good point from Ralph related on this being a great tool for the for the remote work and for the teamwork as well.