Also, we will discuss how to build a client side web part using SPFx for SharePoint Online Office 365.
Apart from this, this SharePoint framework tutorial step by step explains:
- What is SharePoint Framework (SPFx)
- Advantages of SharePoint framework (SPFx)
- Set up your SharePoint Framework development environment
- Build your first hello world spfx (SharePoint Framework) client side web part
- Deploy spfx webpart to SharePoint Online
At the end of this SharePoint framework development step by step tutorial, you should be able to set up your development environment for SharePoint framework and also, you will be able to create your first client side web part in SharePoint Online Office 365.
You may like following SPFx tutorials:
- (SPFx) SharePoint framework client web part example
- How to set up development environment for SharePoint framework
- SharePoint Framework (SPFx) Extensions Application Customizer Example
- Create and Deploy SharePoint Framework (SPFx) extension field customizer
- Create and deploy SharePoint Framework (SPFx) listview command set extension
Create SharePoint framework web part step by step – Video
I have create a sharepoint framework video tutorial how to set your development environment for SharePoint framework and create your first client side web part in Office 365.
If you like our videos, Subscribe to EnjoySharePoint YouTube Channel.
What is SharePoint Framework (SPFx)
According to Microsoft, The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open source tooling.
With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready from day one.
SharePoint Framework is a smooth integration with the SharePoint Data and open source tooling. It provides full support for client-side SharePoint development.
SharePoint Framework (SPFx) works for SharePoint On-premise (SharePoint2016 Feature Pack 2 and SharePoint 2019) and also for SharePoint Online.
Advantages of SharePoint Framework
There are some key features in SharePoint Framework which is in below:
- SharePoint Framework runs in the context of the current user and connection in the browser.
- SharePoint Framework controls are responsible or accessible by nature. It is responsive across all devices like Desktop, tablet, or mobile.
- The performance of the SharePoint Framework is reliable.
- End-users can use this SharePoint Framework(SPFx) that is approved by the tenant administrator on all sites including Team Site, Group/Personal sites, etc.
- SharePoint Framework(SPFx) web part can be added to both the Classical Pages and as well as Modern Pages.
Pre-requisites for SharePoint Framework Development
First of all, when you are going to work with SharePoint Framework, then you have to follow some below pre-requisites as:
- Sign up Office 365 subscription, You can also sign up for an Office 365 developer program.
- Create app catalog sites (It helps to upload and deploy the spfx client-side web part)
- Create a new SharePoint Online developer Site Collection (It helps for your testing purpose)
- SharePoint Workbench (It is a designer surface which helps to test the building app very quickly and gives the validate solutions)
URL for Workbench:
Set up your SharePoint Framework development environment
Now, we will discuss how to set up your SharePoint Framework development environment for SharePoint Online Office 365.
There are a few open-source development tools that we need to install to set up the SPFx development environment.
You can use Windows, mac or Linux environments.
Step #1: Install NodeJS for SharePoint Framework
In this step by step SharePoint framework tutorial, first we will see how to install NodeJS in the system.
Microsoft releases a lot of versions very frequently, but the currently supported version of Nodejs is LTS 10.x.
If you want to work with SharePoint server 2019 or SharePoint Online, then you can install NodeJS LTS 10.x.
But if you want to work with the SharePoint framework for the SharePoint server 2016 version, then you can download and install NodeJS v8.x.
Note: According to MSDN, Node.js v9.x, v11.x, and v12.x are not currently supported with SharePoint Framework development.
You can download NodeJS V10.21.0 (node-v10.21.0-x64.msi or node-v10.21.0-x86.msi).
You can download previous versions of NodeJS.
After clicking on the latest node js features, A welcome page will come to set up the Node.js. Just click on the “Next”.
To Setup the Node.js, accept the EndUser License Agreement. So for License Agreement, put the check into checkbox of “I accept the terms in the License Agreement“. Then click on “Next”.
After setup, a “Destination Folder” page will come where you have to choose a custom location. Then click on to “Next” to install the Node Js.
After clicking on to “Next”, a “Custom Setup” page will come. Just chose the icons in the tree below to change the way features will be installed. Then click on “Next” like below screenshot.
In this below screenshot, a “Tools for Native Modules” page has appeared where there is optionally install the tools necessary to compile native modules. Then click on to the “Next” option.
Now the Node.js will ready to install. So for installation, Click “Install” to begin the installation. If you want to change any of your installation settings, then click on to “Back” otherwise “Cancel”.
After clicking the “Install”, a Node.js installation page will come. So we have to wait for the Setup Wizard installs Node.js like below screenshot.
Now the Node.js installation is over. Just click the “Finish” button to exit the Setup Wizard and the Node.js has been successfully installed.
Once, the installation over, you can check the NodeJS version, by running the below command in the NodeJS command prompt (run as administrator).
Step #2: Install Visual Studio Code
To work with the SharePoint framework, next is we need to install a code editor.
Below are the Code Editors you can use for SharePoint framework development.
- Visual Studio Code
You can check how to install visual studio code step by step.
Step #3: Install Yeoman and gulp
Before installing the yeoman and gulp, check the “node” version and as well as the “npm” version of the SharePoint Framework (SPFx).
To check the version of node and npm version, Run the below command in your Windows PowerShell.
- node -v (check the node version)
- npm -v (check the npm version)
Yeoman helps to create kick-start a new project and yeoman generator helps to create a new web part in the SharePoint Framework.
Enter the following command to install Yeoman and gulp by using one command
npm install -g yo gulp
Or individually, you can install the below commands:
npm install gulp --global
npm install yo --global
You can enter this command by using your Windows PowerShell or NodeJS command prompt.
For installing the Yeoman and gulp, enter that above command in the Windows PowerShell. Then it will proceed like the below screenshot.
Step #4: Install Yeoman SharePoint Generator
Yeoman SharePoint Generator helps you to quickly create a SharePoint Client side solution project with the project structure in the SharePoint Framework.
Enter the following command to install Yeoman SharePoint Generator:
npm install -g @microsoft/generator-sharepoint
For installing the Yeoman SharePoint Generator, enter that above command in the Windows PowerShell. Then it will proceed like below screenshot.
Note: You can install Gulp, Yeoman and Yeoman SharePoint Generator by using a single line command:
npm install gulp yo @microsoft/generator-sharepoint --global
Step #4: Trusting the self-signed developer certificate
You need to run the below command to trust the certificate after you develop the client side project. You can run in the same directory, using Windows PowerShell or NodeJS command prompt.
Note: You need to run the command only once in the development enviroment.
Develop SharePoint framework hello world web part
Now we will see how to develop SharePoint framework hello world web part.
You can use windows PowerShell or NodeJS command prompt.
Client-side web parts mean it is client-side components that run inside the context of a SharePoint page.
Client-side web parts support:
- Both SharePoint Online and on-premises environments.
To create a new web part project, First, Create a new project directory in your Windows Powershell by using the below command:
Then you have to go to the project directory by using below command:
By running the Yeoman SharePoint Generator, you can create a new HelloWorld web part.
After running this above command, a SharePoint Client-side solution generator welcome option will come and then it will ask for specific information about your web part.
- 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.
- Accept the default HelloWorld description as your web part description, and then select Enter.
When the running process will complete, you can see the following message indicating a successful solution that “helloworld-webpart” is created.
Note: Developer certificate has to be installed ONLY once in your development environment, so you can skip this step if you have already executed that in your environment.
The below command is:
To build and preview your web part, you can enter the below command in the command prompt.
This command executes a series of gulp tasks to create a local, node-based HTTPS server to preview your web part in your local dev environment as like below screenshot.
SharePoint workbench URL
We can use SharePoint Workbench to preview and test your client-side web part in SharePoint Framework in SharePoint Online Office 365.
SharePoint Workbench is a surface that helps you to quickly create a preview and test web parts without deploying them in SharePoint.
By using this SharePoint Workbench, you can add, delete, and test your web parts in development.
To create a SharePoint Workbench, You can follow the below URL:
In any SharePoint site, the SharePoint workbench URL is
https://SiteURL/_layouts/workbench.aspx Example: https://tsinfo.sharepoint.com/sites/enjoysharepoint/_layouts/workbench.aspx
To add the HelloWorld web part, click on the “+” icon. It will open the toolbox where you can see various web parts available to add.
There you can see the HelloWorld web part as well other web parts available locally in your development environment. Just click on that web part as shown below.
Once you will click on that “HelloWorld” web part, It will appear a SharePoint Welcome page like below screenshot.
Now select the edit icon which is present at the left of the web part. Once you will click on that, a description pane will appear on the existing page.
Now, enter some description about that web part which will show you on that web part page.
Deploy spfx webpart to SharePoint Online
Now, we will see how to deploy spfx webpart to SharePoint Online.
To deploy SPFx client side web part to SharePoint Online, we need to bundle and package solution by running the below command one by one:
gulp build gulp bundle --ship gulp package-solution --ship
Then it will create the .ppkg file in the SharePoint -> Solution folder. It looks like below:
Now, you can upload it into the .sppkg file in the App Catalog site in SharePoint Online.
Once it is deployed, you can go to any SharePoint Online site collection and click on Add an app to add the web part to the site collection
Why the SharePoint Framework?
Previously, There are two development models we use in SharePoint Online:
- Client-side JS injection
- SharePoint Add-ins
1. Client-side JS injection
While you are working with your Solution, if the end-user will drop the control on to the page, then the configuration option will not work. So for that, the end-user can edit the page and modify the script which can break the web part.
Disadvantages of Client-side Js:
There is no available of “Safe for Scripting” in the Script Editor WebPart. There are present some Site Collections as like “Team Sites”, “Group Sites” has a feature known as “No-Script” enabled.
2. SharePoint Add-ins
One most useful advantage of SharePoint Add-ins is that it has no access to the current DOM or connection. Also, it is external to the system.
Because of this advantage, the End-user can easily install the “Add-ins” on the No-script sites and use it.
Disadvantages of SharePoint Add-ins:
First, it runs in the iFrame. Iframes are slower than the Script Editor WebPart.
iFrame has stronger security which can be very useful for the end-users. That means the control has no access to their connection to office 365.
To overcome these issues, Microsoft comes with SharePoint framework development model. And in SharePoint Online modern experience we can use only the SharePoint framework for SharePoint web part development.
You may also like following SPFx tutorials:
- The entry point for component has a dependency on “@microsoft/sp-http” that is not declared in the manifest react spfx
- Property welcome does not exist on type ‘JSX.IntrinsicElements’ in SPFx React
- How to Create Site Columns, Content Type and Custom List using SharePoint Framework
- SharePoint client-side web part configurable properties in Property Pane using spfx
- Retrieve SharePoint list items using SharePoint framework (SPFx)
- How to Create a list using SharePoint Framework (SPFx)
- [spfx-serve] The api entry could not be loaded: node_modules/@microsoft/sp-webpart-workbench/lib/api/ in SharePoint Framework
- cannot find module ‘@microsoft/sp-build-web’ SharePoint Framework (spfx)
In this sharepoint framework tutorial we discussed what is SharePoint framework and
- What is SPFx development model
- Advantages of SharePoint Framework
- Pre-requisites for SharePoint Framework Development
- Set up your SharePoint Framework development environment
- Install NodeJS for SharePoint Framework
- Install Visual Studio Code
- Install Yeoman and gulp
- Install Yeoman SharePoint Generator
- Trusting the self-signed developer certificate
- Develop SharePoint framework hello world web part
- SharePoint workbench URL
- Deploy spfx webpart to SharePoint Online
I am Bijay a Microsoft MVP (8 times – My MVP Profile) in SharePoint and have more than 15 years of expertise in SharePoint Online Office 365, SharePoint subscription edition, and SharePoint 2019/2016/2013. Currently working in my own venture TSInfo Technologies a SharePoint development, consulting, and training company. I also run the popular SharePoint website EnjoySharePoint.com