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.
The above command will delete all the temporary files created by any of the previous commands.
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.
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.