SharePoint SPFx 1.22

Introduction

Hey Folks,

In this article, we will discuss the latest SPFx version (1.22) and what is new and beneficial.

An important turning point in Microsoft 365's development is the release of SharePoint Framework (SPFx) 1.22. SPFx 1.22 completely overhauls the build toolchain and addresses security vulnerabilities to modernise the development process.

What is New in SPFx 1.22?

Transition from gulp to heft-based toolchain
TypeScript 5.8 upgrade

In earlier versions of SPFx, it relied heavily on Gulp configuration in a gulpfile.js. Developers needed to update tasks manually in this file.

With SPFx 1.21, your gulpfile.js might look like this:

'use strict';

const build = require('@microsoft/sp-build-web');

build.addSuppressionWarning("[sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.");

var getTasks = build.rig.getTasks;

build.rig.getTasks = function () {
  var result = getTasks.call(build.rig);
  result.set('serve', result.get('serve-deprecated'));
  return result;
};

build.initialize(require('gulp'));

SPFx 1.22 introduces a Heft-based toolchain, which completely removes this configuration.

In the latest version of SPFx 1.22, it provides rig.json and typescript.json files inside the config folder.

rig.json

{
  "$schema": "https://developer.microsoft.com/json-schemas/rig-package/rig.schema.json",
  "rigPackageName": "@microsoft/spfx-web-build-rig"
}

typescript.json

{
  "extends": "@microsoft/spfx-web-build-rig/profiles/default/config/typescript.json",
  "staticAssetsToCopy": {
    "fileExtensions": [".resx", ".jpg", ".png", ".woff", ".eot", ".ttf", ".svg", ".gif"],
    "includeGlobs": ["webparts/*/loc/*.js"]
  }
}

Purpose of rig.json and typescript.json

rig.json

The rig package in the latest SPFx 1.22 is an npm package that provides standardized build configurations for Heft-based SPFx projects.

typescript.json

typescript.json sets default configurations for the latest TypeScript version. It enables modern TypeScript features available in TypeScript 5.8.

Performance Improvements

SPFx 1.22 introduces significant improvements related to build tasks.

When working on an SPFx 1.22 web part and making changes, you no longer need to wait for the run-watch process or manually reload the browser as in previous versions.

Instead, the page refreshes automatically and displays updates immediately.

Example output:

Entrypoint sp-fx-latest-web-part 209 KiB (244 KiB)
= sp-fx-latest-web-part.js 203 KiB
sp-fx-latest-web-part.2dcc8ca4f3c84fc5d35a.hot-update.js 6.43 KiB
4 auxiliary assets

webpack 5.95.0 compiled successfully in 47 ms

---- build finished (0.355s) ----
-------------------- Finished (0.359s) --------------------

As shown above, the Heft-based toolchain significantly improves performance.

What is Heft?

Heft is a build system used for modern JavaScript and TypeScript projects. It provides powerful tooling support for:

TypeScript
ESLint
Jest
Webpack
API Extractor

It acts as a central build orchestration tool that simplifies project builds.

Creating an SPFx Web Part Using SPFx 1.22

First, install the SharePoint generator and Yeoman.

If you do not already have the latest versions installed, run the following commands:

npm install @microsoft/generator-sharepoint@latest --global
npm install -g yo@latest

After installing the dependencies, you can create a new SPFx web part using version 1.22.

Run the following command:

yo @microsoft/sharepoint

You will be prompted with several questions.

Example configuration:

What is your solution name? – Your desired solution name
Which type of client-side component to create? – WebPart
What is your Web part name? – Your desired web part name
Which template would you like to use? – React or any preferred template

After answering these questions, the generator will create the SPFx web part project.

Running the SPFx Solution

After the project is created, you need to run the solution.

Instead of using the traditional command:

gulp serve

SPFx 1.22 uses the Heft command:

heft start

This command starts the development server and loads the solution.

You can deploy your SPFx web part in:

SharePoint Workbench
A SharePoint site using the debug URL

The most beneficial feature is that whenever you make changes in your solution, the page automatically refreshes and displays updates instantly.

Building a Production Package

In earlier SPFx versions, production packages were generated using:

gulp bundle --ship
gulp package-solution --ship

In SPFx 1.22, the process is simplified using Heft.

Run the following commands:

heft build --production
heft package-solution --production

These commands generate a .sppkg solution package.

The package will be located in:

sharepoint/solution

Conclusion

In this article, we explored the basics of SPFx 1.22 and created a solution using the latest version.

We also reviewed the major updates introduced in SPFx 1.22 compared to earlier versions, including the transition to the Heft build system, improved development performance, and simplified production builds.

Finally, we created a demo solution and generated a production-ready package using the heft package-solution command.