SPFX – SharePoint 2016

Step 1: Prepare the development environment

In order to be able to use SharePoint 2016 you need to install feature pack2 because it supports SharePoint Framework client-side web parts hosted in classic SharePoint pages. The correct combination of the npm versions must be:

  1. microsoft/generator-sharepoint @1.0.2
  2. gulp@3.9.1
  3. npm@3.10.10
  4. yo@2.0.0

The following command can be used to check on the installed versions of the installed libraries npm list -g -depth o

  1. So, your first step will be removing feature pack3 first by using the following cmdlet npm uninstall -g @microsoft/generator -SharePoint
  2. Install SP-feature pack2 support
    1. npm install -g @microsoft/generator -SharePoint @1.0.
    2. npm i -g gulp@3.9.1
    3. npm i -g -yo@2.0.0

Step 2: Create SharePoint SPFX web-part

The web-part will be created using command line and will be edited using VS code tool.

Steps:

Create the folder and navigate to it using the command line. My folder is called code and It’s in the D drive. My web part is called “helloSpFX“. So my prompt will be “D:\Code\helloSpFx>“

backup the modules folder before creating the SharePoint Solution.

Use the following command, to create the web part: yo @microsoft/SharePoint

D:\Code\helloSpFx>yo @microsoft/SharePoint

There are question to answer which are related to the solution name, location and framework support. The answers are:

  1. Solution name: hello-sp-fx
  2. Solution location: Current folder
  3. framework support: No JavaScript web framework
  4. web part name: helloworld
  5. web part description: helloworld description

Now, the solution will be created in the specified folder. When the generation is finished, the image on the right-side will be displayed.

Without modifying anything deploy the solution using CMD:

D:\Code\helloSpFx>gulp serve

Now, the following error will be displayed

Can’t find module ‘@microsoft/sp-web-build’

Reason why:

When YO is used to generate the SharePoint package, it removes some of the libraries from npm folder without changing the version of the installed npm. So, when trying to build and deploy a lot of errors will be received due to the missing libraries. I recommend that you backup the library folder to use it in the deploy.

Also, all the required libraries for deploying SPFX on prem in GitHub. Some of them belongs to Microsoft folder and the others to Modules folder.

After restoring the missing libraries, you rerun

D:\Code\helloSpFx>gulp serve

The solution package is generated and can be deployed

Step3: Deploy the solution

The package is generated but it is not deployed to SharePoint. App catalog must be created from central administration under Apps >> App Management >> Manage App Catalog >> create new app catalog

Navigate to the created app catalog and upload the package (sppkg) and wait for few seconds and the deployed status will be “Yes”. Now the web part can be used on SharePoint classic pages.

References:

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-2016-support

One Reply to “SPFX – SharePoint 2016”

Comments are closed.