Package and Deploy SharePoint Framework WebPart

My previous article explains about how to create a simple Angular WebPart using SharePoint Framework Preview.

In this article, we will package and deploy the spfx-messagecenter-webpart assets to a remote CDN instead of using the local environment. We will use SharePoint Document Library as our CDN to deploy our assets but we can use our favorite CDN provider and upload the files.

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://o365jv.sharepoint.com/sites/spfx/CDN/MessageCenter/
}

In this example, I have created a folder with name “MessageCenter” inside the CDN document library.

Save the file.

Switch to the console of the spfx-messagecenter-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-messagecenter-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 spapp file can be found in spfx-messagecenter-webpart\sharepoint

Upload the spapp  file to the App Catalog. 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-messagecenter-webpart\temp\deploy folder and upload the assets inside https://o365jv.sharepoint.com/sites/spfx/CDN/MessageCenter/

Now we can add spfx-messagecenter-webpart(you can find under custom group) to any SharePoint page. We are done.

deploy4

deploy5.PNG Source Code

Advertisements

About Joseph Velliah
As a SharePoint Developer my professional interests tend to be technical and SharePoint focused. I run a blog at "SP RIDER" where you can expect to read HOW TOs and scenarios that I run into during my day to day job. I hope my posts will give back a little to the community that is helped me.

Comments are closed.

%d bloggers like this: