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

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