Create SharePoint Framework (SPFx) Webpart For SharePoint Server 2016

Prerequisites

• Node version ^8.11.3
• YeomanGenerator
• Gulp

Steps to create a web part,

 

Step 1

 

Open Command Prompt and browse through the projects folder where you store all your SPFx projects. Run “md spfxOnPrem” command to create a new folder.

 

Step 2

 

Run the command yo@microsoft/sharepoint

 

 

For the questions Yeoman Generator asks, I have selected the below things:

1. What is your solution name?
   
   
• spfxOnPrem
  
  
2. Target Sharepoint Version
   
   
• SharePoint 2016 onwards, including 2019 and SharePoint Online
  
  
3. Where do you want to place your files?
   
   
• Current Folder
  
  
• You can also select “Create a subfolder with solution name”
  
  
4. Which type of client-side component do you want to create?
   
   
• Whenever we select target version SharePoint 2016 onwards, it will only give web part option for these questions. Otherwise, we can create 2 types of the client-side component (Web part, Extension).
• Here we have selected Web part
  
  
5. Web part name
   
   
• HelloWorld
• We can have the name of the web part according to our naming convention.
  
  
6. Web part Description
   
   
• HelloWorld Description
• Here also we can give a description according to our web part
  
  
7. Framework
   
   
• I am using React framework

1. After the solution and web part has been created it will show us that it is created successfully.
   
   
   
   
2. Open spfxDemo Folder in Visual Studio Code. Open “Src -> webparts -> helloworld -> components” Folders in the VS Code. In this hierarchy of folders, we can see the HelloWorld.tsx file, which we have created using commands.
3. To run this web part run “gulp serve” command in the command line. It will open the system default browser and web part in a workbench.
4. If you get any kind of security or proxy server error in your browser, go to the config folder, check for serve.json file and make “https” property “false” and run the gulp serve command again.
   
   
   
   
5. In the browser check the Url and remove the letter “s” from the “https” and reload the page, You will see workbench is loaded.
6. Add the web part by clicking on + Symbol on the page.
   
   
   
   
7. Our basic web part is ready now.
   
   

In our next step, we’ll see how we can install and use office-ui-fabric-react components. As we are not creating the web part with Node or React latest versions we will need to install office-ui-fabric-react older versions.

 

According to the Microsoft documentations https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/use-fabric-react-components#create-a-new-web-part-project, supported version of Office-ui-fabric-react is v5.132.0. But in some cases, it doesn’t work. When we try to build the solution using gulp build command it gives so many errors which look like react version errors, manifest file syntax errors or node modules error.

 

I have come across this issue and came to know that when we create SPFX web part for SharePoint 2016 and try to install Office-ui-fabric-react the version which supported the solution and stopped giving react errors is 2.34.2. To install this version of Office-ui-fabric-react run below command

 

npm install [email protected]

 

After installation completes run gulp build and check again if the errors still exist. In my case the errors have been resolved. 

 

To test the web part you can add some basic controls like PrimaryButton, Dropdown, etc.

 

I hope this article is helpful to you.

 

Happy Learning!!