SharePoint Framework encourages us to host customizations outside of SharePoint. Consisting fully of client-side assets these customizations can be hosted on public CDNs or other locations optimized for delivery of static resources. But hosting resources externally isn’t without downsides. Assuming you’re not hosting your organization’s customizations publicly, it adds yet another location for you to monitor and maintain. So, to deploy SharePoint Framework web-parts in Private CDN of the Office 365 CDN is a new edition of SharePoint Online. In this article we will discuss about the SPFx web-part deployment procedure in office 356 private CDN and discuss other CDN’s possibilities.
Different Type of CDN to Deploy SPFx Client web part
Office 365 CDN
Microsoft Office 365 has the capability of the both public and private CDN. Publishing a file to the Office 365-based CDN is as simple as uploading it to a document library. Using a specific URL, the files can be accessed instantly through the CDN.
As enabling the public CDN capability on a document library or a folder, its contents become publicly available. And anyone on the Internet with the name of files can able to download them without authentication. That’s why private CDN is preferable than public CDN for SharePoint.
Azure CDN
Azure storage can be a good option to use as CDN. Though Azure is comparatively high priced, it is very use full for developers as it’s global solution for delivering high-bandwidth content by caching blobs and static content of compute instances at physical nodes.
Deploy SP Framework client-side web parts
Enable CDN in your Office 365 tenant
As we already discussed, there are two types of CDN capability in office 365: Public and Private, I am going to use Private CDN for the further procedure of this article. And to know about more and to configure the public CDN, this article from Microsoft Dev center can be useful. Now for private CDN, we don’t need to follow any procedure as any folder or library can be used as Private CDN from same tenant.
Create web part folder
As in this article, we are going with privet CDN in Office 365 tenant, a folder need to be created in the targeted site where the web part files will be uploaded. Because a web part consists of multiple files, storing them in a separate folder will help to keep all web part files together. Though a lot of people prefer library to upload these files, it is preferable to upload the file under site collection root folder. This will make the folder invisible from the users who are browsing the site and only using SharePoint Designer this folder can be changed.
Update the web part CDN URL
Before building the package, CDN URL in the SharePoint Framework project need to be updated. To do this, SharePoint Framework project need to be opened in the code editor. Then, write-manifests.json file under config folder need to open [./config/write-manifests.json]. And in the cdnBasePath property, the CDN URL of the newly CDN folder need to be placed.
{
"cdnBasePath": "https://Tahmid.sharepoint.com/sites/TestSite/test_spfx_assets"
}
Mange all the configuration
Need to set the web-part name and group name before build the package. To do that, <WebPartName>.manifest.json file need to be opened and edited. The file can be found under the targeted web-part [./src/webparts/<WebPartName>/<WebPartName>.manifest.json]. Need to change the property Group and title under preconfiguredEntries. This group property is used as when the client web-part will be added in the page, this can be found under folder with this name. And web-parts name will be as provided in title.
To change the package name if needed, can be done from package-solution.json file which can be found under config folder as the value of zippedPackege property, location: [./config/package-solution.json].
Build the package of SharePoint Framework project
Now open the node.js common prompt. And change the base path with the working solution folder. First in the command line execute the gulp clean command as this will clean all the previous build files if there is already.
Now, run the execute the gulp bundle --ship command to build the project files on which the output files of this command are located in the ./temp/deploy folder as specified in the write-manifests.json file. These are the files that in a moment you will upload to the web part folder.
To generate the package run the gulp package-solution --ship command in the node.js command prompt. A file with .sppkg extension will be generated with containing the information about the web parts in your project and where they are hosted. The generated file will be located in the ./sharepoint/deploy folder.
So, if we make a summery as we had to run three consecutive command lines to complete the package building and related files compilation process. The command lines are here bellow to make it easier for the readers.
gulp clean //To clean the previous compiled files gulp bundle –ship //To Compile the web-part files gulp package-solution –ship //To Generate the package file
Upload web part files and Deploy the Package File
As the project is already built and packaged, it’s ready to be deployed. Web part files are need to be uploaded in the web-part folder first and then the package file with .sppkg extension need to deploy in the app catalog. So, to upload the files, go to the ./temp/deploy folder of your project and upload all files to the web part folder in your CDN folder which we have already created in the first part of our article.
Now, we need to deploy the package file as it will help to use your web parts in SharePoint. The package file need to be deployed in the app catalog of your Office 365 tenant on which tenant the target site exist. At this moment deploying .sppkg files to app catalog is possible only in developer tenants, otherwise deploying in different tenant will get an error.
To deploy the .sppkg file in the app catalog, open the app catalog site and from the menu navigate to the Apps for SharePoint page and deploy it.
Install the App in the Site
As all the package and web-part files are deployed accordingly, now start using them in your site. But SharePoint Framework web parts are distributed similarly to SharePoint add-ins, so first need to add the app to the site. In the target site, navigate to the Site contents view and from the menu choose New App option. Now search with your solution name and the app will be found.
After adding the app in the site, now add the SPFx client-side web parts to pages or in List form as you need like as the same way of adding any other web part in SharePoint. The SPFXs will be displayed in the Custom category in the web part gallery as configured under preconfiguredEntries in /<WebPartName>.manifest.json file in the time of web-part configuration.
Conclusion
If the steps are being followed correctly, the SPFx client-side web part will work correctly and being loaded from your Office 365 private CDN. There is some complicacy to use same web-part with different version in different site under same tenant like as staging and production uses. But there is some work around to achieve this which will I describe in my next article.