SharePoint  

SharePoint SPFx 1.22

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?  

  1. Transition from gulp to heft-based toolchain. 

  2. Typescript 5.8 Upgrade 

  • In earlier versions of SPFx, it relied heavily on Gulp configuration in a gulpfile.js. The developer needs 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 heft-based toolchain completely removes this. 

If you see in lates version of SPFx 1.22 it provides rig.json file and typescript.json file inside config folder. 

rig.josn 

   "$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"] 
 
    } 

Now, let’s understand the use-cases of rig.json and typescript.json in short. 

The rig package in latest SPFx 1.22 is an npm package which provides latest and standardised build configurations for heft-based SPFx projects.  

Typescript.json sets default configurations for latest typescript. Or it provides typescript settings which provides modern typescript features from Typescript 5.8. 

Performance Improvement  

In SPFx 1.22 provides significant changes related to build tasks. Like when you are working on SPFx 1.22 web part and you made changes then we don't need to wait like in previous versions till run-watch or reload status in terminal. 

It directly refreshes the page and shows updates. Like below output you can see that how faster it is. 

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 you see in above output from heft-based toolchain in SPFx 1.22. you should have questions like what is Heft and how it is so powerful. 

So let me give you a quick answer that heft is like a key to building an applications using your desired tools like ypeScript, ESLint, Jest, Webpack, and API Extractor . 

If you want to know more about heft the click here.  

Now, let’s see the demo of creating SPFx web part using SPFx 1.22 latest version. 

So, first we need to install the generator and Yeoman. There is no any updates related to SPFx web part creation. 

So, if you have not downloaded latest version then download it by using below commands. 

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

Once you have downloaded above dependencies then you will be able to build new SPFx web part using the latest version 1.22. 

Just run below command to start building process of web part. 

yo @microsoft/sharepoint 

After running above command it will ask you some questions like below give proper answer so that it can create web part according to it. 

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 webpart name 
 Which template would you like to use? - React or whatever you want 

Once you give above answers for all questions hit enter and it will start the process of creating your web part with given name. 

After process is completed you need to run the solution, and to run that solution use heft start command instead of gulp serve. Because as we discussed that in gulp based solution we have to wait for changes compiled or status run-watch or reload in terminal. After that we have to refresh the browser page to see changes. 

While with heft, it has made it completely simple and significant. Like we just need to run the solution by using below command. 

heft start 

Once you start your solution, you can deploy your SPFx web part either in workbench or in SharePoint site by using debug URL. 

And most beneficial part is that when you made any changes in your solution, it automatically refreshes the page and shows changes immediately. Which shows faster performance. 

Now, we have gone through the basic information to webpart creation with SPFx 1.22. now how we can get the production build or how we can generate the package for production like we did with gulp (gulp bundle –ship, gulp package-solution --ship) . 

So, for production package we need to build and in heft it is super easy to build a production build or package by just running one command given below. 

heft package-solution 

Once you run above command it will generate a .sppkg solution in you solution inside SharePoint/Solution folder. 

Conclusion  

We learned about basics of SPFx 1.22 version and build a solution using that latest version. Also seen some latest updates in 1.22 compared to 1.21 and how it is faster than previous versions. Also build a demo solution and seen that how we can generate production ready package by using just one command heft package-solution . 

Membership not found