We need to upload all assets from /temp/deploy/ to our Azure Storage account. Microsoft has built a handy Gulp task for this, called deploy-azure-storage that we can simply execute. It reads through the configuration file and automatically uploads our assets to Azure Storage. This is also a handy but crude test to see if our Storage account is accessible and correctly configured within the project.
- In the Integrated Terminal, run gulp deploy-azure-storage:
- You should see from the output of the task that the upload completes. You can also verify that the files have been uploaded by opening the Blob Container from Azure Storage, and the files should be visible there:
We still have to update our old previously deployed SharePoint Framework package. In order to do this, navigate back to your App Catalog site, and re-upload the new .sppkg file to replace the old version (which did not use CDN).
Upon completing the upload, you'll get the dialog for deploying the solution just like before. Note that it now takes into consideration the CDN path and shows you the full URL where content will be served:
If you still have the web part on the page, navigate to your SharePoint Online site where the previous deployment took place. When you reload the page, content should be served correctly, without gulp serve running in your localhost.
As before, we can verify that the assets are being downloaded from the CDN. Press F12 in your browser to open up developer tools. In Internet Explorer, you will have multiple tabs visible in the new pane. Select Network and click the green Play icon next to it. When you reload the page, developer tools capture the network traffic and visually show a list of files that are being loaded.
Use search (Ctrl + F) to find akamai or Verizon depending on which CDN provider you chose in Azure:
You have now verified that your SharePoint Framework web part is loading correctly, and all JavaScript assets are loaded from a Microsoft Azure Storage-based CDN!