SharePoint Framework tutorial (SPFx) + Set up development environment

In this SharePoint Framework tutorial (spfx tutorial) we will how to set up a development environment in SharePoint Online Office 365.

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:

• There is no iFrame customization in the SharePoint Framework. That means JavaScript is embedded directly into the page.
• 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.
• It is Framework-agnostic. That means it can use any JavaScript Framework like NodeJS, ReactJS, Handlebars, Knockout, AngularJS, etc.
• 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.
• For a C# developer, TypeScript is an easy implementation method in the JavaScript world. There are some developers who like to use the IDE Visual Studio Code, ATOM, Sublime, etc.

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:

https://tsinfo.sharepoint.com/_layouts/15/workbench.aspx

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).

node -v

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.

1. Visual Studio Code
2. Atom
3. Webstorm

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:

Install Gulp

npm install gulp --global

Install Yeoman

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.

gulp trust-dev-cert

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:

• Building with HTML and JavaScript.
• Both SharePoint Online and on-premises environments.

Step #1:

To create a new web part project, First, Create a new project directory in your Windows Powershell by using the below command:

md helloworld-webpart

Step #2:

Then you have to go to the project directory by using below command:

cd helloworld-webpart

Step #3:

By running the Yeoman SharePoint Generator, you can create a new HelloWorld web part.

yo @microsoft/sharepoint

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.

Now select the button option as No javascript web framework as the framework you would like to use, and then select Enter. Then the running process will proceed as shown in below screenshot.

When the running process will complete, you can see the following message indicating a successful solution that “helloworld-webpart” is created.

Step #4:

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:

gulp trust-dev-cert

Step #5:

To build and preview your web part, you can enter the below command in the command prompt.

gulp serve

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:

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

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:

1. Client-side JS injection
2. SharePoint Add-ins

1. Client-side JS injection

Basically, in the Client-side Js, We are using the Script Editor which is very popular in the SharePoint Online. In that Script Editor, Simply you just paste the JavaScript code and it will execute the code when the page renders. It runs in the same browser context with the same DOM.

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)

Conclusion

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