Developing Web Parts Using SharePoint Framework - Part Three


In this article, you will learn deploying onto SharePoint sites and adding the web parts to SharePoint pages.

In my previous article, you have seen about SPFx introduction, prerequisites, steps for setting up the environment, and developing and testing the web parts using the local environments.

Let us deploy the web part, which renders the items of a custom list with the help of SPFx and REST API. Here, let us see how to deploy the Web part.

Note- In this article, I have used Office 365 SharePoint developer site collection. Please check the Microsoft site to check your site capabilities.

Configure CDN Path

The supporting Web part bundle files needs to be uploaded to the CDN path, which need to be configured on the manifest file. Open the CDN repository and create the sub folder to upload the Web part assets. Open the write-manifests.json file of the project and set the CDN project path.

Package the Web parts

Package the developed client side Web part, using Gulp commands. 

  • Bundle the files, using "gulp bundle --ship" command. Ship flag is used to generate the minified assets. This will run the build and create the bundle files required for the Web part. This will also force the task to pick up CDN base path configured

  • The bundle files are generated under temp/deploy folder of the project.

  • Create the app package file for the Web part, using gulp "package-solution --skip" command. This will generate the package file under sharepoint/solution folder of the project.

The snapshot, given below, shows the packaged files.

Uploading Asset files to CDN