SharePoint Framework - Develop First Client Side Web Part

Overview

Client Side WebParts developed using SharePoint Framework (SPFx) are the future of the modern SharePoint. Client-side WebParts are developed using modern UI standards, modern JavaScript tools, and libraries. They run inside the context of SharePoint page and are responsive in nature.

Features of SPFx Client Side Web Parts

• Lightweight - Developed using JavaScript libraries and HTML
• Responsive - Renders on any device
• Environments - Work on both SharePoint Online and OnPremise (SharePoint 2016 onwards)

In this article, we will learn how to build a simple SPFx based Client Side WebPart. Please refer to my previous article to set up your developer environment.

Create SPFx Solution

1. Create a directory for SPFx solution.
   
   md firstspfx-webpart
   
   
2. Navigate to the above-created directory.
   
   cd firstspfx-webpart
   
   
3. Run Yeoman SharePoint Generator to create the solution.
   
   yo @microsoft/sharepoint
   
   
4. Yeoman generator will present you with the wizard by asking questions about the solution to be created.
   
   
   
   
   
   1. Solution Name
      Hit enter to have a default name (firstspfx-webpart in this case) or type in any other name for your solution.
      
      Selected choice - Hit enter
      
      
   2. Target for component
      Here we can select the target environment where we are planning to deploy the client webpart i.e. SharePoint Online or SharePoint OnPremise (SharePoint 2016 onwards).
      
      Selected choice - SharePoint Online only (latest)
      
      
   3. Place of files
      We may choose to use the same folder or create a subfolder for our solution.
      
      Selected choice - Same folder
      
      
   4. Deployment option
      Selecting Y will allow the app to deployed instantly to all sites and will be accessible everywhere.
      
      Selected choice - N (install on each site explicitly)
      
      
   5. Type of client-side component to create
      We can choose to create client sidewebpart or an extension. Choose the webpart option.
      
      Selected choice - WebPart
      
      
   6. Web part name
      Hit enter to select the default name or type in any other name.
      
      Selected choice - Hit enter (default name)
      
      
   7. Web part description
      Hit enter to select the default description or type in any other value.
      
      Selected choice - Hit enter (default description)
      
      
   8. Framework to use
      Select any JavaScript framework to develop the component. Available choices are (No JavaScript Framework, React, and Knockout)
      
      Selected choice - No JavaScript Framework
   
   
5. Yeoman generator will start the scaffolding process to create the solution and will install the required dependencies. This process will take a significant amount of time.
   
   
   
   
6. Once scaffolding is completed, Yeoman will show the below message.
   
   
    

Open Solution in Code Editor

Any of the below code editors can be used to open the SPFx client-side solution.

• Visual Studio Code (https://code.visualstudio.com/)
• Atom (https://atom.io/)
• Webstorm (https://www.jetbrains.com/webstorm)

Install any of above code editor. Being in the solution folder in command prompt, type below command to open the solution in the code editor.

code .

Run WebPart on a local server

As the client-side toolchain uses HTTPS endpoint, we need to install the developer certificate that comes with the SPFx toolchain.

To install developer certificate, run below command from the command prompt.

gulp trust-dev-cert

Run the below command to preview the web part.

gulp serve

 

This command runs series of gulp tasks that perform the below.

• Minify and bundle JavaScript and CSS files
• Compile SASS (Syntactically Awesome Style Sheets) to CSS
• Compile TypeScript to JavaScript

Upon successful compilation and running the gulp tasks, it will open up SharePoint local workbench.

 

• Click Add (+) icon.
• Select the web part to add it on the page.

Congratulations! The first client side web part is ready.

Click Edit icon, modify description from the properties pane and it will be reflected on client-side web part.

 

SharePoint Local Workbench

SharePoint Local Workbench is HTML page which helps to preview and test client-side web parts without deploying to SharePoint. It gets served locally usually on the URL - https://localhost:4321/temp/workbench.html

Summary

SPFxclient side web parts are based on modern JavaScript libraries, which can be created using Yeoman generator. We can choose the JavaScript library (No JavaScript Framework, React, and Knockout) to build the client side web part. They can be tested locally on SharePoint Workbench.