SharePoint Framework - Deploy SPFx WebParts to SharePoint Library

Overview

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

In the production-ready scenario, the web parts 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 web parts using the SharePoint library.

Deployment to CDN

The build output of the SPFx client-side web part consists of a solution package (.sppkg file) and various scripts, CSS, and other assets. The sppkg file is deployed to SharePoint which includes a manifest with a 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 they can be accessed. That means you can even upload the scripts to a SharePoint library inside your tenant to which everyone has access. SharePoint Framework client web part 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 regard 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 the "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 every user).