Post
Ask Question

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,

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".
    SharePoint
  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).

Configure SPFx Solution for SharePoint Library
 

Update package details

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

Update CDN Path

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

Prepare the package

In the command prompt, type the below command.

gulp bundle --ship

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

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

SharePoint library

Deploy Package to SharePoint

In the command prompt, type the below command.

gulp package-solution --ship

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

Upload the package to the app catalog

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

Test the web part

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

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.


Similar Articles