In this article, we will package and deploy the spfx webpart assets to a remote CDN instead of using the local environment. We will use SharePoint Site Assets Library as our CDN to deploy our assets.
In this article, we will package
and deploy the spfx webpart assets to a remote CDN instead of using the local
environment. We will use SharePoint Site Assets Library as our CDN to deploy
our assets.
In this article, we will package
and deploy the spfx webpart assets to a remote CDN instead of using the local
environment. We will use SharePoint Site Assets Library as our CDN to deploy
our assets.
==> The first step is to create the
App Catalog site collection if it hasn't already been created.
1) Sign
in to Office 365 as a global admin or SharePoint admin.
2) Admin centers > SharePoint > apps in the left pane
> App Catalog.
3) Select Create a new app catalog site, and then select OK.
4) Enter the required
information, and then select OK.
==> To load the WebPart assets from CDN, we have to configure our CDN path in write-manifests.json file. This file can be found in the config folder.
{
“cdnBasePath“: “https://<site name>/sites/home/SiteAssets/Test”
}
In this example, I have created a folder with name “Test” inside the Site Assets library.
Save the file.
==> Switch to the console of the spfx webpart project directory and run the following command to generate the assets to be uploaded in CDN
gulp bundle --ship
Generated assets can be found in spfx webpart\temp\deploy folder
Run the following command to generate app file that needs to be uploaded in App Catalog site
gulp package-solution --ship
Generated sppkg file can be found in spfx webpart\sharepoint\solution
==> Upload the sppkg file to the App Catalog you have created above. Since this is a full trust client-side solution,
SharePoint will show you a popup and ask you to trust the client-side solution to deploy.
Click Deploy
==> Drag the files from spfx webpart\temp\deploy folder and upload the assets inside https://<site name>/sites/home/SiteAssets/Test
Now we can add spfx webpart(you can find under custom group) to any SharePoint page.
