SharePoint Framework (SPFx) is the latest development model for SharePoint developers enabling them to use the features for the creation of custom functionality with responsive design compatibility in both SharePoint on-premises and O365 platforms.
Microsoft is already expanding its capabilities by adding updates and SPFx has some new and advanced features for simpler development. Thereby, it is important to follow the best practices to keep the development intact without breaking any functionalities. Today I am discussing the 5 great practices that you should follow.
Check latest Package of SharePoint Framework (SPFx)
Start with SPFx evolution, Microsoft frequently comes with the latest updates of its packages that contain the fixes from previous releases as well as new capabilities. It is important to check the functionalities and bugs with the new release. It is advised to download the latest version of the package by reading the functionalities from Microsoft which will eliminate the hurdles and simplify the process of tracking down the issue if there is any version problem.
Update the outdated packages
The updated and latest packages are downloaded by Yeoman while creating a new SPFx webpart. But it is possible that those packages might get outdated over a period and hence it is important to update them. You can identify the package through the below command,
npm outdated command is used to get the list of outdated npm packages. This will list the current version of the package installed along with the latest version available for the packages that need to be upgraded. You can update SPFx package through the below command,
npm install mypackagename@newversion –saveSave dependencies
Once the package to be installed is identified for the webpart, the best practice is to save the package. This is helpful while migrating the webpart from one environment to another as it will install the latest package without jumping to the major version. Sometimes, it is possible that the latest package has some bugs and that can cause issues to the existing package.
Lock dependencies
Generally, the SPFx code is distributed without the node modules folder as that can be downloaded using the npm install command. But it is an unsaid fact that the code should be compatible in all the versions of npm package installation.
Locking the packages will make the code work without breaking the functionality in any version of the npm package. npm shrinkwrap is used to lock the versions of the installed packages and will generate the file named npm-shrinkwrap.json containing the versions of the installed packages and dependencies used. This file will be used to create the dependency tree while npm install.
Usage of CDN files
Earlier, we were using the JS and CSS files by uploading them in any folder. But in SPFx, as per the best practice CDN path is recommended to increase the loading of the pages faster. For online tenants, using the CDN path, they will render the pages quickly to the end-users as the files are cached. The nature of CDN is that it will store the CSS, JS, Images, favicons, etc. closer to the user’s environment. You can enable the CDN in Microsoft 365 OR deploy web part on Azure CDN
Thanks Tatvasoft for this nice idea.
