How to deploy SPFx web part on SharePoint Online

Microsoft’s SharePoint Framework (SPFx) client web component is a development approach for building bespoke web parts in SharePoint. It generates responsive and interactive components using modern web technologies such as TypeScript, React, and JavaScript. These web elements can be rendered more quickly and dynamically because they are rendered on the client side. They may communicate with SharePoint data using the SharePoint REST API and have user-configurable property panels. A .sppkg file is used to package and deliver SharePoint Framework client web elements, which can be hosted internally or outside. They improve the functionality and user experience of SharePoint by using modular and scalable code. Here, we will explain how to deploy a SharePoint Framework client web part to the SharePoint Online App Catalog. We will also cover how to add the web part to a modern SharePoint page, allowing you to enhance the functionality and user experience of your SharePoint sites.

Now we will see how to deploy the SharePoint Framework client-side web part to the SharePoint site using the SharePoint Online App Catalog site.

In the command prompt or Visual Studio Code Terminal, run the following command one by one.

gulp clean

The above command will delete all the temporary files created by any of the previous commands.

Now run the following command.

gulp bundle –ship

Now run the following command.

gulp package-solution –ship

This will create the package (.sppkg) file that we need to deploy to the SharePoint Online app catalog site.

The .sppkg file is created in a subdirectory of the project folder under /sharepoint/solution. The package file looks like this:

Now we need to upload the .sppkg file to the SharePoint app catalog site.

Upload .sppkg file to SharePoint Online app Catalog page

Now we can upload the .sppkg file to the SharePoint Online app catalog page.

Open the SharePoint Online app Catalog page and drag the .sppkg file to the app for SharePoint folder.

The SharePoint framework client web part is deployed to the SharePoint Online app catalog page as shown below:

Adding the SPFx client web part to the SharePoint modern page

Now, we will see how to add spfx client-side web part to Sharepoint online modern page. Open any SharePoint Online modern page, edit the page and then click on the + icon to add a web part to the page.

There you can see that our hr-365-spfx-web-part webpart is available.

Click the web part to add it to the modern SharePoint Online page.

One can make a SharePoint framework client web part available for users to add to their SharePoint sites by deploying it to the SharePoint Online app Catalog. You may quickly package and deploy your web parts by following the steps outlined in this article, you will gain the knowledge and understanding necessary to successfully deploy your SharePoint framework client web parts, making them readily available for users to incorporate into their SharePoint Online environments.

About HR365

HR365 leads and serves the industry in application development with focus on Power Apps, Microsoft Teams Apps, SharePoint Apps, Intranet branding, legacy app migration, and has out of box ready to deploy such as Employee Directory 365, Employee Onboarding 365, Helpdesk 365, Contract Management 365, Asset Management 365, Performance Management 365, Timesheet 365, Expense Tracker 365, Time Off Manager 365, and Custom Application. Click Here for more.