SPFX Host a SharePoint solution's files in a SharePoint Online Document Library CDN

Introduction 

In my previous post

'SPFX SharePoint Online Responsive Web Part using the SharePoint Framework, Bootstrap, JQuery, JQuery Datatables and Toastr'

I demonstrated using the SharePoint Framework (SPFx) to create and deploy a solution to SharePoint Online (SPO), the solution referenced several JavaScript libraries that once deployed to SPO, would look back to the localhost dev environment for these libraries and other required files. This means that in order for the web part to be added to the page or viewed correctly the Gulp serve command must be initiated before you can successfully access the web part.

To cut this cord and make the solution self sufficient, a Content Delivery Network (CDN) must be provided to enable SharePoint to access the solution resources it needs to correctly render. All of the JavaScript libraries have externally hosted CDN's and these can be added to the project using the  method below for bringing in the libraries.

For example, in the webpart.ts file adding the following lines will allow the web part to reference css and 'js files.

import { SPComponentLoader } from '@microsoft/sp-loader';

SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css');
SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', { globalExportsName: 'jQuery' }).then((jQuery: any): void => {
SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js',  { globalExportsName: 'jQuery' }).then((): void => {        
    });
});

But if we are referencing external JavaScript libraries and want these libraries un-bundled during the development process, which I prefer, these references would be included in the config.json file using the method below.

For example, to bring in JQuery and Toastr libraries, the following lines can be added to the config.json file in the externals section.

{
  "entries": [
    {
      "entry": "./lib/webparts/spfx/SpfxWebPart.js",
      "manifest": "./src/webparts/spfx/SpfxWebPart.manifest.json",
      "outputPath": "./dist/spfx.bundle.js"
    }
  ],
  "externals": {
    "jquery": {
      "path": "node_modules/jquery/dist/jquery.min.js",
      "globalName": "jQuery"
    },
     "toastr": {
      "path": "node_modules/toastr/toastr.js",
      "globalName": "jQuery"
    }
   },
  "localizedResources": {
    "spfxStrings": "webparts/spfx/loc/{locale}.js"
  }
}

Then in the webpart.ts file we can reference these external libraries using the following lines.

import * as jQuery from 'jquery';
import * as toastr from 'toastr';


This will cause the web part thats added to SharePoint Online to look back to the localhost 
development machine for these files. To change that, we'll make the following configuration updates.

Prerequisites


SharePoint Online Tenant
SharePoint Online Document Library Location for CDN/Files
SharePoint Online Management Shell - Download




Create a CDN hosted on your SharePoint Online Tenant

Launch the SharePoint Online Management Shell and enter the following commands replacing 

contoso with your tenant name.



#Authenticate to your tenant
$creds = Get-Credential
Connect-SPOService -Url https://contoso-admin.sharepoint.com/ -Credential $creds

#Enable Public CDN in the tenant
Set-SPOTenant -PublicCdnEnabled $true

#Create CDN to your SPO document library
New-SPOPublicCdnOrigin -Url "https://contoso.sharepoint.com/siteassets/folder1"

#Verify CDN successfully created
Get-SPOPublicCdnOrigins





Configure SharePoint Solution for CDN

Locate the write-manifest.json file in the config folder of the SharePoint solution



Update the file from this

{
  "cdnBasePath": "<!-- PATH TO CDN -->"
}




To this 



{
  "cdnBasePath": "https://contoso.sharepoint.com/siteassets/folder1"
}




Create files for deployment
From the integrated terminal window type the following
Gulp --ship

This will create the files for deployment in the temp - deploy folder


Copy Files to SharePoint Online

Copy all of these files into the CDN folder at - https://contoso.sharepoint.com/siteassets/folder1

The document library should look similar to this



From the integrated terminal window type the following

Gulp package-solution --ship

Deploy the solution to the SharePoint App Catalog - Instructions for this can be found in my

previous post Here

You should no longer need to run Gulp serve for your web part to correctly render.