Update SPFx Project with Code Tour

Want to upgrade your SPFx project and want that extra guidance, consider using code tour to see where to apply the updates. 😊

I had a scenario, where I wanted to update my SPFx project from 1.13.0 to 1.14.0, naturally for this task, I use the CLI for Microsoft 365 to provide that support in listing out what I need to do to upgrade my project.

What is code tour and where do I get it?

Code Tour is a free Visual Studio extension by Jonathan Carter (Microsoft) that provides a guided tour of the code in your project - like it says on the tin, allowing you to record walkthroughs of your code to share with others any changes, bug fixes etc.

Super cool stuff! And now this is part of SPFx project upgrades making it super clear what to do.

If you want this free extension either search for “CodeTour” in Visual Studio extensions or go to this link: CodeTour | Visual Studio Market Place

How project upgrade works with Code Tour?

Firstly, make sure you have the latest CLI for Microsoft 365, as this tool gets updated inline with the SPFx releases. For this example, I am using the newly released V5.0.0 as this introduced support for V1.14.0 project upgrades.

Navigate to the root of your project folder with the SPFx solution, then run:


m365 spfx project upgrade --output tour

Immediately, it will generate a code tour file for you.

{{< cdnimg src=“/images/2022/upgrade-spfx-generate-code-tour-file.png” caption=“Screenshot of the output from running code tour” >}}

Pretty cool. Now, the next step is to navigate through the ~~instructions~~ lego build steps and make the changes.

{{< cdnimg src=“/images/2022/upgrade-spfx-follow-instructions.png” caption=“Screenshot of the steps to upgrade your project” >}}

Some pointers in using this tool:

As you apply the changes, the steps but you will get a tick making it easier to track your progress especially if you are making bigger jumps between versions BUT this is not a validation check just progress from what I’ve observed.
Do not blindly use the “insert code” function if there is existing code, in most cases it has been obvious (to me at least) what the suggested changes are.

Remember to follow the last recommendation to remove the CLI for Microsoft upgrade code files once you are done.

I felt these were minor snags, the overall process was pretty straightforward.

Cool Resources

Enjoy!