Updating the project to support Microsoft Azure CDN

Now, let's update the project:

  1. Go back to Visual Studio Code and find the deploy-azure-storage.json file in the /config folder of the project. It contains a placeholder that we now need to fill:
{ 
"workingDir": "./temp/deploy/",
"account": "<!-- STORAGE ACCOUNT NAME -->",
"container": "helloworld-webpart",
"accessKey": "<!-- ACCESS KEY -->"
}

Replace the value of account, container, and accessKey with the following values:

  • account: The Storage account name that you created in Microsoft Azure
  • container: The container name you created in the Storage account, such as cdn
  • accessKey: The Storage account access key you recorded earlier (key1)

The updated deploy-azure-storage-json file should look like this:

{ 
"workingDir": "./temp/deploy/",
"account": "spfxcdnstorage",
"container": "cdn",
"accessKey": "ubwLikM1FKFGzxKg2wkjf2ZotlxHmW1ecRjksIszK7voaOfgoJ+yS7G4c24D9XK0B6hcx3X8QqbuPQRzQ=="
}
  1. You might recall that we changed the same project earlier in Visual Studio Code to employ the SharePoint Online document library as a CDN. We need to update the value in the write-manifests.json file to map to the Azure Storage-based CDN.

 

  1. Open the write-manifests.json file from /config, and update the value to point to the Storage account path with the container name. Remember to add the container name the end so that the format of the URL is https://{storage-account-name}.blob.core.windows.net/{container-name}. The updated file might now look like this:
{ 
"cdnBasePath": "https://spfxcdnstorage.blob.core.windows.net/cdn"
}
  1. Save both files (deploy-azure-storage.json and write-manifests.json).
  2. In the Integrated Terminal, bundle the package with gulp bundle -ship:
  1. Then package the solution with gulp package-solution -ship:
  1. You should now have the updated .sppkg package in /sharepoint/solution/:
  1. And the updated bundled (and minified) assets in /temp/deploy:

Our project is now updated to support Microsoft Azure-based CDN, and the package is once again ready for deployment to SharePoint Online. We still need to upload our assets to Azure Storage, as we cannot simply upload them to SharePoint Online's document library anymore.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
13.58.82.79