SPFx First Client-Side Web Part

Overview

The SharePoint Framework (SPFx) is a web part model provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open source tooling. Microsoft introduced a SPFx in 2016 for SharePoint online and later for on-premises (SharePoint 2016 Feature Pack 2 and SharePoint 2019).

Set up the SharePoint Framework development environment

We have to set up the SPFx development environment by installing a developer tools as follows.

  1. Install NodeJS Long Term Support (LTS) version.
    • For Windows machine, you can use MSI installer to installer to setup NodeJs.
    • Use node -v command on CMD to check you have already NodeJs installed or not, if yes then it will return the current version of Node Js.
  2. Install a code editor
  3. Install Yeoman and gulp
    • SharePoint client-side development tools include a Yeoman generator for creating new web parts. The generator provides common build tools, and a common structure to the website to host web parts for testing.

Enter the following command on cmd to install Yeoman and gulp:

npm install -g yo gulp
install1

4. Install Yeoman SharePoint generator

  • The Yeoman SharePoint web part generator helps you quickly create a SharePoint client-side solution project with the right tool chain and project structure.

Enter the following command to Install SharePoint Framework Yeoman generator globally

npm install -g @microsoft/generator-sharepoint
install-g

Steps to build your first SPFx SharePoint client-side web part

  • To
    build a SharePoint client-side web part you can use windows command prompt
    shell or Nodejs command prompt.
  • Client-side
    web parts can be deployed to SharePoint Online, and you can also use modern
    JavaScript tools and libraries to build them.
  • Client-side
    web parts supports both SharePoint Online and on-premises environments.

Create a new web part project

Step 1 : 
Open Node.js Command Prompt. By default, CMD set default user location C:\Users\ _PCName_

Step1

Create a new project directory by md command.

md helloworld-webpart
helloworld

Step 2 :
Go to the project directory.

cd helloworld-webpart
spfx cd-helloworld

Step 3 :
Now run Yeoman SharePoint Generator to create a new HelloWorld web part.

yo @microsoft/sharepoint
spfx microsoft

Step 4 :
Now prompted ask set of configuration about web part.

A) Now prompted:

  • Accept
    the default helloworld-webpart as
    your solution name, and then select Enter.
  • Select
    SharePoint Online only (latest), and
    select Enter.
  • Select
    Use the current folder for where to
    place the files.
  • Select
    N to allow the solution to be
    deployed to all sites immediately.
  • Select
    N on the question if solution
    contains unique permissions.
  • Select
    WebPart as the client-side component
    type to be created.

B) The next set of prompts ask for specific information about your web part:

  • Accept the default HelloWorld as your web part name, and then select Enter.
  • Accept the default HelloWorld description as your web part description, and then select Enter.
  • Accept the default No javascript framework as the framework you would like to use, and then select Enter.
spfx prompted

At
this point, Yeoman installs the required dependencies and scaffolds the
solution files along with the HelloWorld web part.
This might take a few minutes.

When the scaffold is complete, you should see the following message indicating a successful scaffold.

spfx HelloWorldSuccess

Using your favorite Code Editor

Because
the SharePoint client-side solution is HTML/TypeScript based, you can use any
code editor that supports client-side development to build your web part.

SharePoint Framework documentation uses Visual Studio code in the steps and examples. Visual Studio Code is a lightweight but powerful source code editor from Microsoft that runs on your desktop. It comes with built-in support for JavaScript, TypeScript, and Node.js.

  • Now enter the following command in the console to build and
    preview your web part:
gulp serve

SharePoint
Workbench is a developer design surface that enables you to quickly preview and
test web parts without deploying them in SharePoint. SharePoint Workbench
includes the client-side page and the client-side canvas in which you can add,
delete, and test your web parts in development.

This command use for build and run web part on a local browser- HTTPS server localhost:4321 and launches your default browser to preview web parts from your local dev environment. The address of workbench preview SPFx web part page is https://localhost:4321/temp/workbench.html 

To use SharePoint Workbench to preview and test your web part

  1. To add the HelloWorld web part, select the add icon. This opens the toolbox where you can see a list of web parts available for you to add. The list includes the HelloWorld web part as well other web parts available locally in your development environment.
spfx Workbench

2. Select HelloWorld to add the web part to the page.

spfx Select-HelloWorld

You have just added your first client-side web part to a client-side page.

3. Select the pencil icon on the far left of the web part to reveal the web part property pane.

spfx pencil-icon

Preview the web part in
SharePoint

We also use SharePoint Workbench to
host and preview test of local web parts. The key advantage of SharePoint
Workbench is it runs in the context of SharePoint so we able to interact with
SharePoint elements like a list, library etc. For SharePoint Workbench hit
following URL.

  1. Go
    to the following URL: https://your-sharepoint-tenant.sharepoint.com/_layouts/workbench.aspx
  2. Now
    select + add an icon from canvas which shows a list of web parts in a site so
    you have to select HelloWorld.
spfx Go-to-the-following

3. Add HelloWorld from the toolbox. Now you’re running your web part in a page hosted in SharePoint!

spfx Add-HelloWorld

Note: – If you do not have the SPFx developer certificate installed, Workbench notifies you that it is configured not to load scripts from localhost. Stop the currently running process in the console window, and execute the gulp trust-dev-cert command in your project directory console to install the developer certificate before running the gulp serve command again.

Web part project structure

Here we discuss on web part project structure using Visual Code editor. 

  • To use Visual Studio Code to explore the web part project structure.

Enter the following command to open the web part project in Visual Studio Code

Code .
Code

OR

  • Open Visual Code
    Editor. From the menu bar, select Files => Open Folder option
    to open helloworld-webpart
  • Now Visual Code
    dashboard show helloworld-webpart project structure see screenshot below.
Code-dashboard

Project structure contains all basic and dependency files in respective folders like src, config, lib, and dest etc.

src folder contains three main files .manifest.json, .module.scss, .ts

  • .manifest.json – This file tells SharePoint about important properties of client-side web part like title, description, icon, properties, version, group and requiresCustomScript flag etc. 
  • .module.scss – SCSS is a special type of file for SASS, a program written in Ruby that assembles CSS style sheets for a browser. SASS adds lots of additional functionality to CSS like variables, nesting and more which can make writing CSS easier and faster. SCSS files are processed by the server running a web app to output a traditional CSS that your browser can understand. 
  • .ts – This typescript file is the main file in project solution where all files are source files are added like a .scss file, external js, images etc. This file has web part class; the main entry point for the web part. Here we also set web part properties, customize and render web part HTML etc.  
  1. Notice that the web part class is defined to accept a property type IHelloWorldWebPartProps.
  2. The property type is defined as an interface before the HelloWorldWebPart class in the HelloWorldWebPart.ts file.
HelloWorldWebPart web part
  • config.json – config.json file present in the in config
    folder. This file has basic configuration about web part like entry point URLs,
    external js etc. We also create multicomponent bundles in this file. 
SPFx First Client-Side Web Part

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top