Create Your First WebPart Using SPFx Framework And Deploy It In SharePoint Online

In this article, you will learn how to create your first web part using SPFx framework and deploy it in SharePoint Online.

 
In this article, we are going to see how to create your first app using SPFx framework in SharePoint Online but before getting into the topic, we need to understand what SPFx is and what is the difference between SharePoint Add-in model and SharePoint framework.
 

What is SPFx?

 
SPFx stands for SharePoint Framework, which can be used in modern web technologies in any development environment to build responsive applications. It runs in the current client context and connection in the browser, so the page renders and the result is displayed faster than classic experience.
 
SPFx can be implemented in both the classic and Modern experience of SharePoint pages, and it supports SharePoint online, SharePoint 2016 (Feature pack 2), and SharePoint 2019.
 

Difference between SharePoint Add-in Model and SharePoint Framework

 
SharePoint Add-in model  SharePoint framework
 This approach created an IFrame while executing the code  This approach will not create any IFrame while executing the code
 The pages will go through authentication and authorization  HttpClient object that handles authentication to SharePoint
 This will make own calls to get SharePoint data  This will run with the current user connection
 
Initially, we required one app catalog site to build and deploy SPFx web part in your SharePoint tenant, so let's see how to create one app catalog site in your SharePoint Online tenant
 

Create app catalog

 
Step 1
 
Log into your SharePoint admin center using the following URL - https://tenant-admin.sharepoint.com
 
Step 2
 
On your left navigation, click "classic SharePoint admin center" because modern admin center doesn’t have the facility to create an app catalog site.
 
Step 3
 
On your classic admin center, click apps >> app catalog from the right panel like highlighted below.
 
Create Your First WebPart Using SPFx Framework And Deploy It In SharePoint Online
 
Step 4
 
Click "Create a new app catalog site" radio option from your right panel.
 
Create Your First WebPart Using SPFx Framework And Deploy It In SharePoint Online
 
Step 5
 
Provide the title, web site address, administrator, and server resource quota.
 
Create Your First WebPart Using SPFx Framework And Deploy It In SharePoint Online
Step 6
 
Once you provide all information and click OK, it will take 15 minutes to create an app catalog site for your tenant. 
 
Then as a next step, you need to create one developer site collection for testing purposes and this also can be done in the Classic admin center.
 

Create a developer site

 
Step 1
 
On your Classic admin center, click "site collection" from the left navigation.
 
Step 2
 
On the SharePoint ribbon, select new >> private site collection.
 
Step 3
 
While creating a new site collection, you need to select Developer site on template selection like below.
 
Create Your First WebPart Using SPFx Framework And Deploy It In SharePoint Online
 

Workbench

 
Lastly, you should know about the SharePoint workbench where you can test your web part without deploying in your tenant. It runs locally on your machine to validate the solution which you created.
 
And your execution workbench URL will be like https://localhost:portnumber/temp/workbench.html and you can access the workbench from any SharePoint site with the following URL to preview the web parts https://tenant.sharepoint.com/sites/dev/_layouts/15/workbench.aspx
 

Setup development environment

 
You can follow my old blog to set up a development environment on your local machine.
 

Build your first web part

 
After installing all the prerequisites in your local machine, you need to run the command yo @microsoft/sharepoint to download the SharePoint handcuffs.
 
Create Your First WebPart Using SPFx Framework And Deploy It In SharePoint Online
 
Once you've downloaded all required SharePoint handcuffs, then you need to execute gulp trust-dev-cert to install the https certificate in your local machine to run the application locally --and note this command is one-time execution. Once the certificate is installed on your machine, then you no need to run this command on the next execution and this command should run inside of your Webpart folder.
 
To install a certificate, click yes on the below-displaying popup. 
 
Create Your First WebPart Using SPFx Framework And Deploy It In SharePoint Online
 
Then execute gulp serve, this command will run your web part in your local machine and there, you can test the functionality before deploying it in your tenant.
 
Once testing is complete then you can execute gulp serve --nobrowser to make your webparts works in your tenant level, this command will change "internalModuleBaseURL" from your manifest file, which is located in \dist folder with the name of <web-part guid>.manifest.json. 
 
Create Your First WebPart Using SPFx Framework And Deploy It In SharePoint Online
 

Deploy web part to the SharePoint page

 
After you've completed your testing, you can click Ctrl+C on your PowerShell to stop debugging your web part, then execute gulp package-solution to make your code as a package in .sppkg format and you can find the solution under your web part.
 
folder/sharepoint/solutionname.sppkg
 
Create Your First WebPart Using SPFx Framework And Deploy It In SharePoint Online
 
Now you can open your app catalog site and click "Apps for SharePoint" from the left navigation and you can drag and drop your .sppkg solution to your apps for SharePoint library and while adding the solution, it will prompt you to deploy it. So you can click the deploy button to fully trust your solution.
 
Create Your First WebPart Using SPFx Framework And Deploy It In SharePoint Online
 
Once the deployment went successfully, then you can go to your modern site and go to site content and click add Apps button and search for your client side application and add it to your site
 
Create Your First WebPart Using SPFx Framework And Deploy It In SharePoint Online
And finally, you will add the solution to your team site by editing your site and add it like the below image,
 
Create Your First WebPart Using SPFx Framework And Deploy It In SharePoint Online