To use SharePoint Framework SPFX on SharePoint Server 2016 we need to install SharePoint 2016 Feature Pack 2.
SharePoint 2016 Feature Pack 2 supports SharePoint Framework client-side web parts hosted in classic SharePoint pages.
SharePoint 2016 Feature Pack 2 supports SharePoint Framework client-side web parts hosted on classic SharePoint pages built by using the SharePoint Framework v1.1.0. This means that when you are targeting the SharePoint 2016 platform, you need to use the SharePoint Framework v1.1.0 due to the server-side version dependencies.
Install following prerequisite to develop SharePoint Framework SPFX.
- Nodejs (Download Link: https://nodejs.org/en/) Make sure you install node version 6.11.2
- Gulp Version 3.9.1
- Yeoman Template Generator 2.0.2
- NPM Version 3.10.10
- SharePoint Framework Yeoman Generator Version 1.0.2
- Visual Studio Code or any other editor (Visual Studio Code: https://code.visualstudio.com)
Please make sure that you install Microsoft Template Generator Version 1.0.2 any other version will not work for SharePoint 2016 On Premise.
Installation of Yeoman Template Generator
Installed Package Version
Package Installation Command
npm install -g yo gulp
npm install firstname.lastname@example.org
npm install -g @email@example.com
Create New SPFX Solution using command
Give Solution Name, Web Part Name and other required information as shown in Image
Once Solution is created it will appear as shown below
Now let’s make changes in created solution. You can open it using command
Once you enter command it will open in Visual Studio Code Editor.
We are going to update HTML Code in file: HelloSpfxWebPart.ts
You can reach HelloSpfxWebPart.ts file from solution location SPFX\src\webparts\helloSpfx\HelloSpfxWebPart.ts
I have added my name”Nilesh Rathod” in html text/tag.
You can make changes as per your requirement.
Now next task is to test SPFX Solution/WebPart on SharePoint Server environment.
Before that we are going to run command “gulp trust-dev-cert” so that when we run our SPFX webpart on local machine it will not give Certificate Error
After that you can add command “gulp serve” to run this SPFX Solution/WebPart on local environment.
When you run gulp serve command it will open browser with URL: https://localhost:4321/temp/workbench.html which contains modern UI for SharePoint Web Part.
Here you can insert web part as shown in image
Once you add Web Part on Page, it will appear as per our updated changes.
Now we are able to Create and Run Web Part on SharePoint Server 2016 environment.
Next step is to deploy it on SharePoint Server Environment.
Deployment of SPFX WebPart on SharePoint Server 2016
Now when we are going to deploy WebPart on SharePoint Server we also needs to keep on mind that we need to add its related js file or configuration file which is required to run that SPFX application.
When we build our WebPart it will create its configuration file which are required on server to run it without any dependency.
While working with SharePoint Framework WebPart we can assign that location name from where it can read files when we are going to deploy it on any server.
That configuration is called CDN Path which is available in Configuration -> write-manifests.json file.
I have created Document Library named MySPFXFiles on my site location http://sps2012:4444/MySPFXFiles where I can add all required files which will be my CDN Address for SPFX Web Part.
You can set your own document library on your application and can use it as CDN Address.
We can set CDN Path as shown in image
After adding CDN Path let’s ship solution by running command
gulp bundle --ship
This builds the minified assets required to upload to the CDN provider. The –ship indicates the build tool to build for distribution. You should also notice that the output of the build tools indicate the Build Target is SHIP.
Next run command
gulp package-solution --ship
This creates the updated client-side solution package in the sharepoint\solution folder.
Once we run above command it will prepare 2 locations which we needs to consideration for actual deployment on server.
- One location is “SPFX\sharepoint\solution” where our actual app package file “spfx-soln.sppkg” is generated.
- Another location is “SPFX\temp\deploy” where all other mandatory file to run SPFX WebPart is generated.
Note that we can easily check or configure “temp\deploy” folder location in solution copy-assets.json file which is location at SPFX\config\copy-assets.json.
Now let’s copy all files on required file from temp\deploy folder to SharePoint Serve.
Open Solution in Folder. You can open it from command prompt also using command
Navigate to Temp Deploy Folder Location: SPFX\temp\deploy
Here SharePoint 2016 will not allow to copy JSON file to SharePoint as it is blocked by environment. To enable it please check my post for Allow JSON to SharePoint 2016.
Copy all files and upload into SharePoint CDN Location which we already mentioned in above steps.
In my case it is : http://sps2012:4444/MySPFXFiles
I have copied all files on CDN address as shown in above Image.
Once all required file is copied next step is to deploy app on SharePoint App Catalog
If you are not aware How to Configure SharePoint App Catalog or How to setup App Domain on SharePoint Server you may refer to my post.
SharePoint Server 2016 Configure APP Domain
SharePoint Server App Catalog Configuration
Navigate to SPFX\sharepoint\solution location
Now Upload App File spfx-soln.sppkg on SharePoint App Catalog
When you upload package it will ask us to deploy application. You can click on Deploy button and trust application. You may also check your given CDN address is also available on application.
Once you click Deploy, SPFX Solution will deploy on SharePoint Server 2016 you can also check is Deployed Column value as shown in below Image
Once Application is deployed in App Catalog Site it will available in your desired site under Your Application -> Application From your Organization
Click on that app and it will install on server. You can see Installed application as shown in below image
Now you can add SPFX WebPart on any page.
I have created page named SPFXAPP.aspx Edit Page and Click on Insert Web Part Link . You may find SPFX WebPart in “Under Development” section.
Add HelloSPFX WebPart on Page and it will appear as shown in below Image.
Check In and Publish Page.
Hence we learn How to Create SPFX Solution on SharePoint Server 2016 Environment and Deployment Of SharePoint Framework WebPart or Solution on SharePoint Server 2016.