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.
- 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.
- Install a code editor
- For development, you can use Visual Studio Code IDE to build your web part.
- 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
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
Steps to build your first SPFx SharePoint client-side web part
build a SharePoint client-side web part you can use windows command prompt
shell or Nodejs command prompt.
web parts can be deployed to SharePoint Online, and you can also use modern
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_
Create a new project directory by md command.
Step 2 :
Go to the project directory.
Step 3 :
Now run Yeoman SharePoint Generator to create a new HelloWorld web part.
Step 4 :
Now prompted ask set of configuration about web part.
A) Now prompted:
the default helloworld-webpart as
your solution name, and then select Enter.
SharePoint Online only (latest), and
Use the current folder for where to
place the files.
N to allow the solution to be
deployed to all sites immediately.
N on the question if solution
contains unique permissions.
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.
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.
Using your favorite Code Editor
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.
- Now enter the following command in the console to build and
preview your web part:
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
- 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.
2. Select HelloWorld to add the web part to the page.
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.
Preview the web part in
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
to the following URL: https://your-sharepoint-tenant.sharepoint.com/_layouts/workbench.aspx
select + add an icon from canvas which shows a list of web parts in a site so
you have to select HelloWorld.
3. Add HelloWorld from the toolbox. Now you’re running your web part in a page hosted in SharePoint!
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
- 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.
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.
- Notice that the web part class is defined to accept a property type IHelloWorldWebPartProps.
- The property type is defined as an interface before the HelloWorldWebPart class in the HelloWorldWebPart.ts file.
- 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.