Create Web Part With SharePoint Framework (SPFx)

Introduction

 

In this article, we will learn to create a web part using SharePoint Framework. In previous articles, we have already learned the basic beginning steps that are required to start with SharePoint Framework (click here to view the article). Also, we have learned to set up a development environment for SPFx (click here to view the article). After setting the development environment for SPFx we will demonstrate how we can create our first SPFx web part.

 

What is the Web part?

 

Web parts are a block of UI we can render within the SharePoint page. There are some OOTB web parts available that we can use on Modern pages but we can add our custom web parts using SPFx. In this article, we will create one custom web part using SharePoint Framework.

 

Create First Hello World Web part

 

Let’s create the new SPFx web part project using the given instructions.

 

Create a folder with the appropriate project name to the location where we want to create the solution. Here we have created one folder with the name FirstSPFxProject in the D:/Solutions location.

 

 

Open Visual Studio Code and open the folder D:\Solutions\FirstSPFxProject location in Visual Studio Code.

 

 

Open Node Terminal inside Visual Studio Code.

 

 

Node Terminal will open at the bottom of the window.

 

 

Run the below command in the terminal to create a new solution on the current location.

 

yo @microsoft/sharepoint

 

SharePoint Generator will run and ask for user input like Solution name, Target environment(SharePoint Online only (latest)/SharePoint 2016 onwards, including 2019 and SharePoint Online SharePoint 2019 onwards, including SharePoint Online), file placement, tenant deployment feature, and permission requirement for web APIs. Below we have answered all these user inputs from the SharePoint generator.

 

 

After that generator will ask for one important user input which is the component type. We can create a Web part, extension, or library using SPFx so we need to choose from this option because the functionality of all three solutions will be different.

 

 

After selecting the solution type we need to enter the web part name and web part description. Here web part name can be different from the solution name because we can create multiple web parts in single solutions. After creating the one web part if we run the same SharePoint generator command it will add another web part in the same solution and directly ask for the web part name instead of the solution name.

 

After inserting the web part name and description we need to select the Framework. There are three Frameworks we can use to develop the Spfx web part. That is No Javascript Framework, React, and Knockout. No Javascript Framework is pure JavaScript without any other framework. Among all of these, React is a very popular framework to develop the SPfx components. So we will also select React framework here.

 

 

After selecting the framework terminal will show the progress bar and will start creating the files and folder inside our selected folder and finally gives a success message as given below,

 

Also, we can see created files in Explorer. Code for every Web Part that we will create in the solution will be staying in the Web Parts folder and required files for the Web Part will be staying in the folder with the Web Part name.

 

 

Testing the Web Part

 

After creating the solution we can test the Web Part on a workbench but before testing the Web Part if it is our first Web Part on an installed development environment and we are testing it on a local workbench then we need to run the below command to trust the self-signed certificate otherwise we can face a certificate error.

 

gulp trust-dev-cert

After that, we can run the solution by running the below command,

 

gulp serve

 

Run a Web Part on the Local Workbench

 

After running the gulp serve command we will automatically redirect to a local workbench in the default browser and the URL of the workbench will be given below,

 

https://localhost:4321/temp/workbench.html

 

Run a Web Part on the SharePoint Workbench

 

In the local workbench, the SharePoint context will not be available so to test the web part with the current SharePoint context we can use the SharePoint workbench. The URL of the SharePoint workbench will be given below,

 

https://your-sharepoint-tenant.sharepoint.com/_layouts/workbench.aspx

 

Here we can give our SharePoint site URL before /_layouts/workbench.aspx so that we can get that site’s context in our Web Part and list and libraries will be available to use.

 

Add the Web Part in the workbench

 

We need to add the Web Part by clicking the + sign on the workbench page then we can see the Web Part in the Web Part List.

 

 

After adding the Web Part we can see the loaded Web Part on the workbench.

 

 

Publish the Web Part

 

After completing the development of the Web Part we can publish our Web Part in SharePoint so that it will be available to add on SharePoint Pages.

 

To publish the Web Part we can follow the below steps,

 

Bundle the Solution

 

We need to bundle the solution by running the below command in the Node Terminal.

 

gulp bundle –ship

 

Package the solution

 

We need to run the below command to package the solution in the .sppkg file. After running the command we will get the solution file with the .sppkg extension on \sharepoint\solution folder path.

 

gulp package-solution –ship

 

Upload the solution in App catalog site

 

We need to upload the generated <solution name>.sppkg file in SharePoint App catalog site.

 

 

Deploy the Solution

 

After uploading the solution package Dialog box to deploy the solution will appear from where we can deploy the solution in our SharePoint. We will see Make this solution available to all sites in the organization option in a dialog if we have selected Yes in Tenant level deployment while creating the solution if we select the Check box then web parts will be available in the whole tenant without adding as an app to each site. Otherwise, the web part will be available to only those sites where a solution is added as an app in Site contents.

 

 

After deploying the solution web part will be available to add on SharePoint pages.

 

Note

To use SPFx web parts in SharePoint sites Custom Scripting should be enabled for the SharePoint Site.

 

Conclusion

 

In this article, we learned about creating the new SharePoint web part. Also, we learned how we can test the web part in local and SharePoint workbench and deploy the web part. If you find anything that I am missing in this article or you find it useful please provide your valuable feedback.