4/6/17

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

  1. SharePoint Online Tenant
  2. SharePoint Online Document Library Location for CDN/Files
  3. 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.

No comments:

Post a Comment