SharePoint Framework - Deploy SPFx WebParts to SharePoint Library

Overview

Please refer my previous article, Develop First Client-Side Web Part, to get started, develop first SPFx client-side web part ,and test it on a local SharePoint workbench.

In the production-ready scenario, the webparts can be deployed to any of the below,

• Azure CDN (Previous article)
• Office 365 Public CDN (Previous article)
• SharePoint Library in your tenant (This article)

In this article, we will explore the option of deploying the SPFx webparts using SharePoint library.

Deployment to CDN

The build output of SPFx client side webpart consists of a solution package (.sppkg file) and various scripts, CSS, and other assets. The sppkg file is deployed to SharePoint which includes manifest with URL pointing to the location where script files are deployed. The script files should exist at the location specified in the manifest file, otherwise, the web part will not work in SharePoint.

These files usually get deployed to a CDN location. CDN location could be Azure BLOB storage or Office 365 public CDN. We can use any of these CDN locations, however, using CDN is not a must. SharePoint Framework does not impose any restrictions that scripts should be deployed to any CDN. You can upload the scripts anywhere from where it can be accessed. That means you can even upload the scripts to a SharePoint library inside your tenant to which everyone has an access. SharePoint Framework client webpart can access the scripts from the SharePoint library.

In short, scripts can be deployed to any location including Azure BLOB storage, Office 365 CDN, any document library in SharePoint or even a physical web server from where it can be accessed. However, each of these approaches has its own pros and cons with regards to cost, performance, and scalability.

If the organization has its users worldwide across different geo-locations, having a CDN will help to serve as a central repository.

In package-solution.json, specifying includeClientSideAssets as true will include the assets in .sppkg file. After deploying the sppkg solution to the app catalog, SharePoint will unpack the assets to a predefined location in the tenant.

Create SharePoint Library as CDN

1. Open SharePoint Site
2. Click "Settings" (gear icon) > "Add an App"
   
   
   
   
3. Click "Document Library" tile
4. Give it a name - SPFxDeploy
5. Click (gear icon) > "Library settings"
6. Under “Permissions and Management”, click “Permissions for this document library”
7. Give read permission to all users (use everyone user)

Configure SPFx Solution for SharePoint Library - Update package details

1. Open command prompt
2. In the command prompt, navigate to SPFx solution folder
3. Type “code .” to open the solution in code editor of your choice
4. Open package-solution.json file from config folder. This file takes care of solution packaging.
5. Set includeClientSideAssets value as false. The client-side assets will not be packaged inside the final package (sppkg file) because these will be hosted in SharePoint library.
   
   
    

Update CDN Path

1. Open write-manifests.json file from config folder
2. Update CDN base path as SharePoint library URL.
   
   
    

Prepare the package

In the command prompt, type the below command

1. gulp bundle --ship

This will minify the required assets to upload to CDN. The ship switch denotes distribution. The minified assets are located at “temp\deploy” folder.

Upload the files from “temp\deploy” folder to SharePoint library,

 

 

Deploy Package to SharePoint

In the command prompt, type the below command

1. gulp package-solution --ship

This will create the solution package (sppkg) in sharepoint\solution folder.

Upload package to the app catalog

1. Open the SharePoint app catalog site
2. Upload the solution package (sppkg) from sharepoint\solution folder to app catalog.
3. Make sure the URL is pointing to SharePoint library.
   
   
4. Click Deploy

Test the web part

1. Open any SharePoint site in your tenant.
2. Add the App to your site from “Add an App” menu.
3. Edit any page and add the webpart.
   
   
   
4. Click F12 to open developer toolbar. Confirm that it is served from SharePoint library.
   
   
    

Summary

There are multiple options to deploy the SPFx client side webparts ranging from Azure BLOB storage, Office 365 public CDN, or even regular SharePoint library. Considering the pros and cons of each option, choose the one that suits you better.