Upgrade your SharePoint Framework (SPFx) projects to v1.12.1 with CLI for Microsoft 365

Context

With the recent release of SharePoint Framework (SPFx) v1.12.1, it’s now time to upgrade your projects for this brand new version. I made my first project upgrade last week and everything went well! This task can be greatly reduced in time by using CLI for Microsoft 365 especially the spfx commands group. In this article, I’ll show you how to easily upgrade a SPFx project to the latest version with CLI for Microsoft 365 so let’s have a look at this now!

Project upgrade

First, you need to install CLI for Microsoft 365 using npm by executing the following command:

npm install -g @pnp/cli-microsoft365

If you already have CLI for Microsoft 365 installed on your machine, you can simply update to the latest version:

npm install -g @pnp/cli-microsoft365@latest

When it’s done, you can open an existing SPFx project to upgrade with Visual Studio Code and execute the following command:

m365 spfx project upgrade --toVersion 1.12.1 --output md > "project-upgrade.md"

This command generates a markdown file named project-upgrade.md inside your project with all the required steps to upgrade your project to the latest version of SPFx (1.12.1).

You can generate the same result in plain text with the following command:

m365 spfx project upgrade --toVersion 1.12.1

Here is an example of plain text output with the required steps to upgrade:

Execute in bash
-----------------------
npm un -D @types/chai @types/mocha @types/es6-promise
npm i -SE @microsoft/sp-core-library@1.12.1 @microsoft/sp-lodash-subset@1.12.1 @microsoft/sp-office-ui-fabric-core@1.12.1 @microsoft/sp-webpart-base@1.12.1 @microsoft/sp-property-pane@1.12.1 react@16.9.0 react-dom@16.9.0 office-ui-fabric-react@7.156.0
npm i -DE @microsoft/sp-build-web@1.12.1 @microsoft/sp-module-interfaces@1.12.1 @microsoft/sp-webpart-workbench@1.12.1 @microsoft/sp-tslint-rules@1.12.1 gulp@4.0.2 @microsoft/rush-stack-compiler-3.7@0.2.3 @types/react@16.9.36 @types/react-dom@16.9.8
npm dedupe
rm ".editorconfig"

./config/copy-assets.json
-------------------------
Update copy-assets.json deployCdnPath:
{
  "deployCdnPath": "./release/assets/"
}


./config/deploy-azure-storage.json
----------------------------------
Update deploy-azure-storage.json workingDir:
{
  "workingDir": "./release/assets/"
}


./.yo-rc.json
-------------
Update version in .yo-rc.json:
{
  "@microsoft/generator-sharepoint": {
    "version": "1.12.1"
  }
}


./.gitignore
------------
To .gitignore add the 'release' folder:
release


./tsconfig.json
---------------
Remove tsconfig.json exclude property:
{
  "exclude": []
}

Update tsconfig.json extends property:
{
  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.7/includes/tsconfig-web.json"
}

Add es2015.promise lib in tsconfig.json:
{
  "compilerOptions": {
    "lib": [
      "es2015.promise"
    ]
  }
}

Remove es6-promise type in tsconfig.json:
{
  "compilerOptions": {
    "types": [
      "es6-promise"
    ]
  }
}


./gulpfile.js
-------------
Before 'build.initialize(require('gulp'));' add the serve task:
var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
  var result = getTasks.call(build.rig);

  result.set('serve', result.get('serve-deprecated'));

  return result;
};



./tslint.json
-------------
Update tslint.json extends property:
{
  "extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json"
}


./package.json
--------------
Remove package.json property:
{
  "engines": "undefined"
}

You can also generate a CodeTour file with the following command:

m365 spfx project upgrade --toVersion 1.12.1  --output tour
CodeTour steps generated with CLI for Microsoft 365
CodeTour steps will guide you into the upgrade process

Now it’s time for the biggest job in this process, execute all the steps for the upgrade! It depends of the project and the dependencies you have installed but it can takes a little bit time for some big projects in my recent experience but trust me this is the fastest and secure way to achieve this task 😉

Happy upgrading everyone!

Resources

https://pnp.github.io/cli-microsoft365/cmd/spfx/project/project-upgrade

https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour

2 thoughts on “Upgrade your SharePoint Framework (SPFx) projects to v1.12.1 with CLI for Microsoft 365

  1. Why they deprecated local workbench and gulp serve? How is supposed to test out spfx solutions now? Thank u for the post, very useful.

    Liked by 1 person

    1. You can use the online workbench to debug your solutions. I guess they will replace the deprecated gulp serve with something else in the coming SPFx release, more news at Build in two weeks maybe!

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s