How To Package And Deploy Client-Side Web Part To A SharePoint Document Library

SharePoint client-side web parts

Client-side web parts are client-side components built using HTML and JavaScript or using common scripting frameworks such as AngularJS and React. They can be deployed in both SharePoint Online as well as on-premise. They are the building blocks of pages that run inside the context of a SharePoint Page. For more details refer to this Overview of SharePoint client-side web parts.

In my previous blogs, you have seen

• How to Set Up Development Environment for SharePoint Framework
• How To Create Your First SharePoint Client-Side Webpart
• How to Connect Your Client-side Web Part to Access SharePoint Page Context

In this blog you will see how to package and deploy client-side web part to a SharePoint document library.

Steps Involved

Open command prompt and navigate to the respective project directory. For example

cd D:\SPFx\MyClientSideWebpartDemo

Run the following console command to open the project files in Visual Studio Code.

code .

Open write-manifests.json file which is located in Config folder. Update cdnBasePath value with the document library URL which will act as CDN. In my case I have created a folder named SPFx under Site Assets library and update cdnBasePath with that URL as shown below. Save the file.

Run the following console command to bundle your solution.

gulp bundle --ship

 

Execution of above command will create the output files to temp/deploy folder as shown below. These are the files that have to be uploaded to a SharePoint document library.

 

Upload the files to the document library which you have mentioned in cdnBasePath.

 

Run the following console command to package your solution.

gulp package-solution –ship

 

Execution of above command will create a <clientsidewebpart>.sppkg package file to sharepoint/solution folder as shown below.

Upload this package file to the App Catalog. Click Deploy.



Navigate to the site where you want to add the web part and test it. Go to Site Contents and add the app which we deployed.



After few minutes, app will be installed. Navigate to the page where you want to add the client-side web part. Edit the page and add the client-side web part.


Client-side web part is added successfully as shown below.


Summary

In this blog you have seen how to package and deploy client-side web parts to a SharePoint document library.