SharePoint Framework WebPart Deployment

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.