Problem Statement
You can work with SharePoint Framework web parts, both for SharePoint Online and on premise. However, if you generate a “Hello world” SharePoint Framework web part for SharePoint server 2019 using Yeoman generator (SharePoint Framework version 1.4.1 is used for SharePoint 2019), you will find that it uses old versions of React (15.6), Typescript and Office UI Fabric React. The most recent versions (as of May 11, 2020) are React 16.13.1, Typescript 3.8 and Office UI Fabric React (now called Fluent UI React) 7.111.0.
Below is the screen shot of package.json file scaffolded for SharePoint Server 2019,
So, the issue is you have to always work with older versions of packages, in which case you will be working on old technologies and as a developer you could miss a lot of potential features, bug fixes, and other things.
Let’s talk about the solution of the above problem!
Solution
As we know that in main web part file (HelloWorldWebPart.ts), from webpack’s perspective, the line of code - export default class HelloWorldWebPart is just exporting a module that can be transformed in a require call.
So, let’s move the HelloWorldWebPart class into another folder called external (with our own dependencies) and refer it in HelloWorldWebPart.ts file. So essentially what we are saying that in your SPFx solution, there will be two folders – one will be external and another will be the one which is scaffolded using Yeoman generator. The HelloWorldWebPart.ts file will look like, as shown in below image,
In the above image, “hello-world-web-part” is a webpack bundle (referred inside dist folder) which contains the code of your web part.
Implementation
- Create a new folder with the name “external” and create a node-based project inside it using the command - npm init –yes. This folder will store the actual code of the web part.
- Add dependencies in your external project. Add all dependencies used in the original SharePoint Framework solution. Below is the image showing package.json file of external project,
- Run npm install in the external project.
- Create the same folder structure in external folder as in your original SharePoint Framework solution. Then copy “helloWorld\components\” folder from SharePoint Framework web part into the corresponding folder in external project. Below is the image showing the solution structure of the external project,
- So until this step, code has been moved to the external folder. Now we will make a JavaScript package out of it. Add a common.js file, as shown in the below image.
Based on the above image, below are the important things to note,
- entry node points to HelloWorldWebPart.ts file, because, it's our entry point. The name of a JavaScript package is hello-world-web-part.
- externals node includes SharePoint localized strings.
- Add a new js into the externals project, as shown in the below image. This is required to create a new gulp task, which copies Typescript definition files from a folder in SharePoint Framework solution to external folder.
- In a SharePoint Framework web part, whenever you make a change in any of the files, it gets reflected in the workbench. However, this will not happen in this type of solution because all the resources are in an external folder. So, you need to another task in js (as shown in below image) to request reload of the web part.
- You can also add a watch task in js (as shown in below image) to make reload happen on every code change,
- For your convenience, you can add below NPM scripts in json file of the external folder.
Testing the Web Part
- In an external folder, run the command – npm run watch or npm run build.
- In SharePoint Framework solution, run the command – gulp serve for development environment. For production environment, you can run the below two commands to package your SPFx solution: -
- gulp bundle –ship
- gulp package-solution --ship
Summary
In this article, I have explained how you can use the latest versions of packages in your SharePoint Framework solutions for SharePoint on-premise version. I will suggest don’t use the above method for SharePoint Online because SharePoint Framework generator for SharePoint Online is updated on a regular basis and there is no need to create another external folder.
Abdelbasset EssordiPosted Mar 22, 2022, 1:56 PM
Hello, thanks for this amazing article is this the only way to make spfx in sharepoint on prem 2019 accepts the latest of the dependencies or there is another way to do so otherwise if you have a video on your channel making the above logic please share and thanks
Madhan ThuraiPosted May 12, 2020, 8:45 AM
Cant we update package.json directly and run npm install??(delete package-lock.json before npm install)