12/24/2017

Including Assets in SharePoint Framework Solution Packages

SharePoint Framework v1.4 contains new feature - ability to include all the used assets inside solution package to simplify the overall process of the solution hosting and delivery.
The assets are all JavaScript files, CSS files, images, fonts, etc. that are referenced in the project.
Let's deep dive a bit in the topic to understand the process.

Configuration

First of all, there is a new boolean property in package-solution.json file named includeClientSideAssets. By default this setting is set to true which means that all the assets will be included in the .sppkg file.
There is one more condition to include the assets in the package: cdnBasePath property in write-manifests.json file should remain the default one: <!-- PATH TO CDN -->. If we change it to some custom url, we'll see next warning while running gulp package-solution --ship:
Warning - [package-solution] The "cdnBasePath" in "config/write-manifests.json" has been changed from its default value ("") to "https://cdn.test.com", however the "includeClientSideAssets" setting in "config/package-solution.json" is "true" and will be ignored. If you meant to deploy your assets in your SPPKG to SharePoint, reset the value of "cdnBasePath" to "".
If both settings are set correctly, all the assets will be included in the package.

Deployment and Hosting

No we have the .sppkg file with all the assets inside. This package can be deployed either to Tenant App Catalog or to Site Collection App Catalog.
After deployment the assets will be hosted from one of next locations (based on the tenant settings):
  • Office 365 Public CDN - if the CDN is configured (See details about O365 Public CDN here).
  • Directly from App Catalog (Tenant App Catalog or Site Collection App Catalog). The url will look like https://orgname.sharepoint.com/sites/<app_catalog_url_or_site_collection_url>/CliendSideAssets/<solution-id>

Benefits

I see next main benefits of including assets to the solution:
  • Organizations (tenants owners) are in control of the assets - you know what is running on the tenant
  • No need of additional hosting environment
  • The same package can be deployed to multiple environments (QA, UAT, PROD or multiple customers)
  • As ISV or product owner you can create unique package for every customer with some unique configurations
I would say that in most scenarios this option is the one to use. And only in some cases you can use external CDN.
That's it!
Have fun!

3 comments: