For now, our CDN endpoint is ready, but the folder is still empty. We need to instruct our SharePoint Framework project to start using the CDN path next. Before changing anything in the configuration, we have to construct a publicly accessible URL that points to our CDN.
The base address is always https://publiccdn.sharepointonline.com/{tenant-name}.sharepoint.com/{cdn-origin-id}. We need to replace the {tenant-name} to point to our Office 365 tenant, and then replace the CDN origin ID with a real ID. This is the ID you got from Get-SPOPublicCdnOrigins commands.
A base address with our tenant name and modifications might look like this: https://publiccdn.sharepointonline.com/tenant.sharepoint.com/12390061f758b807354244dd12e9808aba5c97058384a46b61b43861da5e600492d2947. Write this down, as you'll need it next.
Now, let's update the project:
- Go back to Visual Studio Code and find the write-manifests.json file in the /config folder of the project. It only contains a placeholder that we now need to fill:
{
"cdnBasePath": "<!-- PATH TO CDN -->"
}
- Replace the value of cdnBasePath to the URL you crafted previously:
{
"cdnBasePath": "https://publiccdn.sharepointonline.com/tenant.sharepoint.com/12390061f758b807354244dd12e9808aba5c97058384a46b61b43861da5e600492d2947"
}
- Next, package the solution again. Use gulp bundle -ship first to minify and bundle everything together, and then use gulp package-solution -ship to re-package the solution. The --ship parameter will generate optimized bundles and copy them to the /temp/deploy folder of your project:
- You should now have a new .sppkg file:
- And also new minified asset files under /temp/deploy:
