Blog written by:
Dhaval Shah
SharePoint & .Net Consultant
Intro
In a previous article we showed how to develop announcement web parts using the SharePoint Framework. We added various styles to the web part and created a service layer to get the announced data from the SharePoint list if it’s hosted in SharePoint or from the mock data if it’s hosted in local workbench. This article covers generating the package for a web part and deploying it in the Office 365 Public CDN.
Generating the Package
Before generating the package for the web part, look at the solution. You’ll find the package-solution.json file in the config folder.
Your package-solution.json file will look something like this:
{
"solution": {
"name": "spfx-announcement-client-side-solution",
"id": "9af7ce6b-7e38-427b-a4f5-129dd1acfc0a",
"version": "1.0.0.0"
},
"paths": {
"zippedPackage": "solution/spfx-announcement.sppkg"
}
}
If you look at the property “zippedPackage,” it specifies the location where the package will generate for your web part.
In order to generate the package, execute the command below.
| gulp package solution |
Once successfully executed, it will generate the package under the “Sharepoint/Solution” folder in your project.
In the folder you can find the spfx-announcement.sppkg file that you must upload to the SharePoint app catalog that we created in this article.
You’re not done yet. If you use this package file in our app catalog, it launches the application from your local machine, which won’t work in production.
So, make some changes to the project and deploy the web part in the CDN, and you’ll point the resources file to the CDN location instead of localhost.
Configure Your Document Library in Office 365 as CDN
Use Office 365 as the public CDN. Recently, Microsoft announced the public CDN capability on Office 365. So, you can publish your resources files to the document library in SharePoint, and you can access the library through CDN.
Here’s how to create a document library to be used as CDN. (I created the document library in the same site as “CDN”.) Make a note of this url:
https:///sites/SPFX/CDN
Launch the SharePoint Online management shell.
| Connect-SPOService –Url <sharepoint admin tenant url> |
Note : Specify your sharepoint admin tenant url in the –Url parameter
It will prompt you to enter your tenant admin username and password.
On successful authentication it should complete the command’s execution.
First, though, you have to enable CDN on your tenant; by default it disables. You can get the status using the command below.
| Get-SPOTenantCdnEnabled –CdnType Public |
Now, to enable the CDN on your tenant, execute the command below.
| Set-SPOTenantCdnEnabled –CdnType Public |
Now, add the document library as the CDN’s origin as shown below.
| Add-SPOTenantCdnOrigin –CdnType Public –OriginUrl sites/SPFX/CDN |
Note: -OriginUrl parameter will only take the relative url of the SharePoint site.
It takes some time to complete “configuration pending.” You can check the status using the command below.
| Get-SPOTenantCdnOrigins –CdnType Public |
It takes roughly around 15 to 20 minutes for the configuration to complete.
Once it successfully configures, you can upload the image in the folder.
If you uploaded the image “logo.png” in the “cdn” document library, the public CDN path looks something like this:
So in this case it looks like this:
https://publiccdn.sharepointonline.com/<Sharepoint_Tenant_Url>/sites/SPFX/CDN/logo.png
Next, create a folder “spfx-announcements” in this document library for the announcement web part.
Public CDN path for this folder is
https://publiccdn.sharepointonline.com/<Sharepoint_Tenant_Url>/sites/SPFX/CDN/spfx-announcements
Update Solution to Use CDN
Now that the CDN has configured, package the solution for the SharePoint Framework web part to use the CDN path to render the resources.
Navigate to write-manifests.json in the config folder. Update the cdnBasePath to your pubic CDN path as shown below
{
"cdnBasePath": "https://publiccdn.sharepointonline.com/<Sharepoint_Tenant_Url>/sites/SPFX/CDN"
}
Generate the Web Part Files
Execute the command below to generate the web part files using the cdn url mentioned in previous step.
| gulp bundle –ship |
Navigate to “./temp/deploy” folder and copy the files from that folder to “spfx-announcements” folder in CDN document library. It will look something like this:
Generate the Web Part Package
Execute the command below to generate the package file for your Sharepoint framework web part with the new CDN path.
| gulp package-solution –ship |
The web part package file generates inside this folder.
Upload the spfx-announcement.sppkg file in the app catalog site. It will prompt you to trust the solution package file you want to deploy.
Note the url this time currently points to the CDN path. Click on Deploy.
Navigate to the site where you want to add this web part. Click on “Add an app”
You should see you web part as shown below:
Select it, and it will add the web part to your site.
Navigate to the page and click on “Add web part,” you’ll see the newly created web part section as “Under Development.”
Click on “Add,” which adds the web part on the page.
Ta da! You can see the web part running on your page without running the gulp serve command.
This is the last of the SharePoint Framework series of blog posts. I hope this series helped you. Please let us know if you have any issues or suggestions in the article comments section.
View his professional profile on linked in
https://www.linkedin.com/in/dhavalshah27/
- SharePoint Metadata - October 8, 2018
- SharePoint Permission Levels - August 29, 2018
- How to Create multiple SharePoint Sites using PowerShell and XML template? - September 5, 2017