SharePoint or Teams Apps with Azure CDN

As a default, the SharePoint Framework packages all code inside the SPPKG file that is deployed to the app catalog. In the example below, you can see that the package is almost 1 MB. Yikes! In the web world, that is a huge file.

The generated package includes your markup, CSS, and JavaScript. When your web part renders, SharePoint serves the static files. If you don’t care about performance, this might be fine.

Examples of when you might not worry about web part performance:

  • Test or Stage environments
  • Web parts that are rarely used
  • Web parts that only a few people will see

For most situations, of course, you want your web parts to execute as quickly as possible.

To improve the performance of your SharePoint/Teams SPFx app, consider using an Azure CDN to serve static content.

The Azure Content Delivery Network (CDN) is designed to send audio, video, images, and other files faster and more reliably to customers using servers that are closest to the users. This dramatically increases speed and availability, resulting in significant user experience improvements.

  • Better performance for your apps and services
  • Global distributed network
  • Highly scalable infrastructure
  • Active redundancy and failover
  • High reliability
  • Robust security

Note: You will need to have permissions to create new resources in Azure.

Use these instructions to create an Azure CDN profile and endpoint.

When you have completed these steps you can tell your SharePoint Framework project to serve static files from the Azure CDN. The following steps outline the process.

  • Go to the ‘config’ folder in your project
  • Open the ‘write-manifests.json’ file
  • This ‘write-manifests.json’ file is where you will define the CDN. By default the value is set to “<!– PATH TO CDN –>” . This default value tells SharePoint to expect the static files to be part of the SharePoint package file. If you do not change this value, the files are served from SharePoint.
  • Change ‘cdnBasePath’ to the location to the path of your CDN
  • In File Explorer, go to the following folder in your project: project/temp/deploy
  • Copy the files to your CDN. You can use Microsoft Azure Storage Explorer. I prefer to use RedGate’s Azure explorer, but it doesn’t matter what tool you use.
  • Use Gulp to build and package your solution

Notice the size of the SPPKG file is now only 11 kb!

When you deploy, notice that when you are prompted to ‘trust’ the solution, it indicates that the app will get contents from your CDN.

If you want to verify that static files are coming from the CDN, use developer tools (F12 on Chrome on Windows). View the Sources tab. You should see your CDN listed as a source, and you should see your static files being served from that location:

%d bloggers like this:
search previous next tag category expand menu location phone mail time cart zoom edit close