New CodeTour Option for SharePoint Framework (SPFx) Upgrades in the Office 365 CLI

I tried out the relatively new CodeTour option in the Office 365 CLI today to upgrade a SharePoint Framework (SPFx) Web Part solution. I originally built the Web Part to work in SharePoint 2019, so the underlying SPFx version was 1.4.1. I wanted to get it “up to rev” to 1.10.0 to put a cleaned up version of it into the pnp/sp-dev-fx-webparts repo of SPFx samples.

The first thing I needed to do was install the CodeTour extension for VSCode, which you can download from the marketplace.

Next, I made sure I had the latest version of the Office 365 CLI by running:

npm i -g @pnp/office365-cli

You’ll need version 2.1.0 or greater. The line above will install the Office 365 CLI globally, which is probably what you want.

To get the tour started (and who doesn’t like a good tour?), I simply ran the following:

o365 spfx project upgrade --output tour

This created a tour in the CodeTour section in the left rail in VS Code, which looks something like this:

To start the tour, I just clicked on the Upgrade project… row, which expanded out all the steps I needed to complete the upgrade.

Because I was going all the way from SPFx 1.4.1 to 1.10.1, there were 44 steps. That’s more that you would generally see, since it’s such a big jump.

The great thing about this is each step does the following:

1. Highlights the row of code or parameter which needs to change. You see the exact context for the change.
2. Provides some information about what the step will do. I expect these messages will improve over time.
3. Gives you a link to click to accomplish the step if it’s possible to automate it. If it’s not possible to automate it, you get instructions about what to do yourself.

In the past, when I used the spfx project upgrade command, I’d scroll all the way down to the output, copy the commands out, and just paste them into the terminal. I didn’t really take the time to understand what specifically was happening because I didn’t need to. (I trust Waldek Mastykarz (@waldekm) and Gary Trinder (@garrytrinder), who manage the Office 365 CLI project. Maybe I trust them too much?)

I like the fact that the CodeTour approach lets me pay a bit more attention, without spending much more time to get the work done. If you’re interested in understanding more about the internal workings of SFPx, this is a nice middle ground: it gets the upgrade done pretty painlessly, but you can follow along and learn some things.

Give it a try and let me know what you think in the comments…

---

I was remiss in the initial version of this post in not giving Hugo Bernier (@bernierh) credit for his work on the CodeTour updates.