SharePoint Framework (SPFx) (Part 3) Deploying and Shipping Your Client-side Web Part with Office 365 CDN

Blog written by:
Dhaval Shah
SharePoint & .Net Consultant

Intro

In a previous article we showed how to develop announcement web parts using the SharePoint Framework. We added various styles to the web part and created a service layer to get the announced data from the SharePoint list if it’s hosted in SharePoint or from the mock data if it’s hosted in local workbench. This article covers generating the package for a web part and deploying it in the Office 365 Public CDN.

Generating the Package

Before generating the package for the web part, look at the solution. You’ll find the package-solution.json file in the config folder.

package-solutions

Your package-solution.json file will look something like this:

 {  
  "solution": {  
   "name": "spfx-announcement-client-side-solution",  
   "id": "9af7ce6b-7e38-427b-a4f5-129dd1acfc0a",  
   "version": "1.0.0.0"  
  },  
  "paths": {  
   "zippedPackage": "solution/spfx-announcement.sppkg"  
  }  
 }  

If you look at the property “zippedPackage,” it specifies the location where the package will generate for your web part.

In order to generate the package, execute the command below.

gulp package solution

gulp-package-solution

Once successfully executed, it will generate the package under the “Sharepoint/Solution” folder in your project.

In the folder you can find the spfx-announcement.sppkg file that you must upload to the SharePoint app catalog that we created in this article.

You’re not done yet. If you use this package file in our app catalog, it launches the application from your local machine, which won’t work in production.

Deploy app in Catalog

 

So, make some changes to the project and deploy the web part in the CDN, and you’ll point the resources file to the CDN location instead of localhost.

Configure Your Document Library in Office 365 as CDN

Use Office 365 as the public CDN. Recently, Microsoft announced the public CDN capability on Office 365. So, you can publish your resources files to the document library in SharePoint, and you can access the library through CDN.

Here’s how to create a document library to be used as CDN. (I created the document library in the same site as “CDN”.) Make a note of this url:

https:///sites/SPFX/CDN

Launch the SharePoint Online management shell.

Connect-SPOService –Url <sharepoint admin tenant url>

 

Note : Specify your sharepoint admin tenant url in the –Url parameter

It will prompt you to enter your tenant admin username and password.

SharePoint Online Login

On successful authentication it should complete the command’s execution.

First, though, you have to enable CDN on your tenant; by default it disables. You can get the status using the command below.

Get-SPOTenantCdnEnabled –CdnType Public

Get-SPOTenantCdnEnabled

Now, to enable the CDN on your tenant, execute the command below.

Set-SPOTenantCdnEnabled –CdnType Public

Now, add the document library as the CDN’s origin as shown below.

Add-SPOTenantCdnOrigin –CdnType Public –OriginUrl sites/SPFX/CDN

Note: -OriginUrl parameter will only take the relative url of the SharePoint site.

Add-SPOTenantCdnOrigin

It takes some time to complete “configuration pending.” You can check the status using the command below.

Get-SPOTenantCdnOrigins –CdnType Public

Get-SPOTenantCdnOrigins

It takes roughly around 15 to 20 minutes for the configuration to complete.

Once it successfully configures, you can upload the image in the folder.

If you uploaded the image “logo.png” in the “cdn” document library, the public CDN path looks something like this:

https://publiccdn.sharepointonline.com/<SharepointTenantUrl>/sites/<site_name>/<Document_Library>/logo.png

So in this case it looks like this:

https://publiccdn.sharepointonline.com/<Sharepoint_Tenant_Url>/sites/SPFX/CDN/logo.png

Next, create a folder “spfx-announcements” in this document library for the announcement web part.

Public CDN path for this folder is

https://publiccdn.sharepointonline.com/<Sharepoint_Tenant_Url>/sites/SPFX/CDN/spfx-announcements

Update Solution to Use CDN

Now that the CDN has configured, package the solution for the SharePoint Framework web part to use the CDN path to render the resources.

Navigate to write-manifests.json in the config folder. Update the cdnBasePath to your pubic CDN path as shown below

 {  
  "cdnBasePath": "https://publiccdn.sharepointonline.com/<Sharepoint_Tenant_Url>/sites/SPFX/CDN"  
 }  

Generate the Web Part Files

Execute the command below to generate the web part files using the cdn url mentioned in previous step.

gulp bundle  –ship

 

Navigate to “./temp/deploy” folder and copy the files from that folder to “spfx-announcements” folder in CDN document library. It will look something like this:

SPFX Webpart Resource Files

Generate the Web Part Package

Execute the command below to generate the package file for your Sharepoint framework web part with the new CDN path.

gulp package-solution –ship

 

The web part package file generates inside this folder.

SPFX Webpart Package

Upload the spfx-announcement.sppkg file in the app catalog site. It will prompt you to trust the solution package file you want to deploy.

trust-spfx-solution-deploy

Note the url this time currently points to the CDN path. Click on Deploy.

Navigate to the site where you want to add this web part. Click on “Add an app”

Site Settings

You should see you web part as shown below:

site contents

 

Select it, and it will add the web part to your site.

Navigate to the page and click on “Add web part,” you’ll see the newly created web part section as “Under Development.”

Add Webpart

Click on “Add,” which adds the web part on the page.

Ta da! You can see the web part running on your page without running the gulp serve command.

SFPX Webpart Deploy

This is the last of the SharePoint Framework series of blog posts. I hope this series helped you. Please let us know if you have any issues or suggestions in the article comments section.

Do you use SharePoint? Try our toolkit
Download SharePoint Essentials Toolkit Now
Download the SharePoint Essentials Toolkit
Follow me

Dhaval Shah - MCD, MCSD

SharePoint and Dot Net Consultant at QiPoint
Dhaval Shah (Houston, TX USA) has more than 9 Years of professional experience working as a SharePoint and Dot Net Consultant. He has worked on 30+ projects dealing with more than 15+ clients. He has a special focus on developing and implementing enterprise-level business solutions, built on SharePoint, Dot net and the Microsoft technology stack involving MVC apps, Web API and REST services.

View his professional profile on linked in
https://www.linkedin.com/in/dhavalshah27/
Follow me

Latest posts by Dhaval Shah - MCD, MCSD (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.