Deploy SPFx Solution Package using Azure CDN

0

Configure MS Azure Storage Account

  • Loginto MS Azure Portal (https://portal.azure.com)
  • Click “Create a resource”
  • Click “Storage account – blob, file, table, queue”
  • Click Create
  • The storage account endpoint can be referred by URI – http://<StorageAccountName>.blob.core.windows.net

Configure BLOB Container

  • Select storage account from dashboard
  • Click “Blobs”
  • Add New Container
  • Click Access keys and note down any of the access keys

Enable Azure CDN for Storage Account

We will enable CDN for the above created storage account.

  • Select storage account from dashboard
  • Under “BLOB Service”, select “Azure CDN”
  • Click Create
  • The endpoint will appear in the endpoint list
  • The BLOB container can be accessed from url: http://<EndpointName>.azureedge.net/<myPublicContainer>/<BlobName>

Configure SPFx Solution for Azure CDN Update package details

Please go through my previous post, HelloWorld Web Part to create SPFx client-side web part, and test it on a local SharePoint workbench, to deploy these SPFx web parts files to Azure CDN.

  • Open package-solution.json file from config folder. This file takes care of solution packaging.
  • Set includeClientSideAsserts value as false. The client-side assets will not be packaged inside final package (sppkg file) because these will be hosted on external CDN.

Update Azure storage account details to Solution

  • Open deploy-azure-storage.json from config folder to specify the Azure storage account details
  • Update values as below:
    1. account – storage account
    2. name – container – BLOB container
    3. accessKey – storage account access key (primary or secondary)

Update CDN Path

  • Open write-manifests.json from config folder
  • Update CDN base path as BLOB container end point

Bundle package

Bundle your SPFx webpart project source code using the gulp bundle task.
gulp bundle –ship

Deploy assets to Azure Storage

Deploy SPFx assets using the gulp deploy-azure-storage.
gulp deploy-azure-storage

Deploy your SPFx webpart package

Deploy your SPFx webpart package using the gulp package-solution task.
gulp package-solution –ship

Upload package to app catalog

  • Open the SharePoint app catalog site
  • Upload the solution package (sppkg) from sharepoint\solution folder to app catalog
  • Make sure the url is pointing to Azure CDN
  • Click Deploy

Test the web part

  • Open any SharePoint site in your tenant
  • Add the App to your site from “Add an App” menu
  • Edit any page and add the webpart
  • Click F12 to open developer toolbar. Confirm that it is served from Azure CDN
0

You may also like

Leave a Reply

Your email address will not be published.