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
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.