Create Your First WebPart 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.

Step 5

Provide the title, web site address, administrator, and server resource quota.

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.

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.

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.

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.

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

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.

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

And finally, you will add the solution to your team site by editing your site and add it like the below image,