SharePoint Framework Web Part – Continuous Integration and Delivery

Continuous Integration and Delivery are the foundations of Modern Software Development. Continuous Integration and Delivery process is going to help your team in the following aspects:

  • Revision Control
  • Build Automation
  • Automated Deployment
  • Reduced Overhead
  • Consistent Build Process
  • Confidence and Team Communication
  • Risk Mitigation

In this article, I am going to show you how to set up Continuous Integration and Delivery for SharePoint Framework Web Part.

Tools Needed 

  1. Visual Studio Team Service – Source Control System
  2. Visual Studio Code – Code Editor
  3. SharePoint Framework Development Environment – Refer
  4. Git Repository Project in Visual Studio Team Service(VSTS)
  5. Git Commands
  6. A SharePoint Document Library that acts as a CDN
  7. SharePoint App Catalog Site
  8. A SharePoint Site to test the app

SharePoint Framework(SPFx) Git Project Configuration

The first step is to create a SPFx Git Repository Project in VSTS.

Snip20170818_1(Example)

Let us clone the newly created Git project into your favorite local folder using the following git command

git clone -b master repopath

SharePoint Framework(SPFx) Web Part Setup

Go to the project directory using command prompt/ terminal and set up your SPFx Web Part project as explained here. I am going to use my sample code here but feel free to write your own logic in your SPFx Web Part.

This is my project folder structure

Snip20170818_4.png

One Time Activity

Let us package artifacts and upload the files in app catalog site and CDN library.

Open the write-manifests.json file under config folder and update the cdnBasePath parameter with your CDN SharePoint Document Library path.

Snip20170818_8Make sure you are still in the project directory you used to set up your web part project. In the console window, execute the following gulp task:

Snip20170818_9

This will build the minified assets required to upload to the CDN library in temp\deploy directory. Go to your CDN SharePoint Library and upload the generated files.

Snip20170818_11

Snip20170818_14.png

In the console window, execute the following gulp task to package your client-side solution that contains the web part:

Snip20170818_10

The command will create the .sppkg package file in the sharepoint/solution.

Snip20170818_12

Go to your App Catalog site and upload the generated .sppkg file to the App Catalog. This will deploy the client-side solution package. SharePoint will display a dialog and ask you to trust the client-side solution to deploy. Click deploy.

Snip20170818_13.png

 

At this point the web part is ready to be used on a page. Open a site where you want to test the web part and go the Site contents page of the site. Choose Add – App from the toolbar and choose the your app to be installed on the site.

Snip20170818_16.png

After the app has been installed, add the webpart in a page

Screen Shot 2017-08-18 at 10.36.17 AM

Check-in the code and push the same to master branch via Visual Studio Code editor.

Climax

At this point we are ready integrate our SPFx web part project repository with VSTS continuous build and release process.

Gulp Tasks

Upload the highlighted custom gulp tasks provided by Elio Struyf and install the necessary npm packages as per the instruction given.

Snip20170818_7

Update the gulpfile.js as shown below:

Snip20170818_6

Continuous Integration and Delivery Setup in VSTS

Switch back to VSTS

Go to build & release section and click New buttonScreen Shot 2017-08-18 at 10.43.52 AM

Select the empty template and click Apply.

Variables

Configure the following variables for the build and release. Adjust the values as per your environment.

Snip20170818_28

Tasks

Add the following tasks and configure it as shown below

Process

Snip20170818_19

Get Sources

Snip20170818_20.png

NPM Install – npm

Snip20170818_21

Update CDN Location – Gulp 

Snip20170818_22.png

Bundle Project – Gulp

Snip20170818_23

Package Solution – Gulp 

Snip20170818_24.png

Upload Files in CDN – Gulp

Snip20170818_25.png

Upload App Package to App Catalog – Gulp 

Snip20170818_26.png

Deploy App – Gulp 

Snip20170818_27.pngTrigger

Also enable the continuous integration settings so that the build process starts when the latest code is checked-in in master branch.

Snip20170818_29.png

All done. Now it is time to test our continuous build and release process by pushing a new code change to git repository and check build process get triggered.

Code Change 

Let us change the progress bar color to red and check-in the latest change to git.

Screen Shot 2017-08-18 at 11.23.24 AM.png

Commit & Push Code Changes 

Screen Shot 2017-08-18 at 11.26.05 AM

Screen Shot 2017-08-18 at 11.26.25 AM

Build and Release Status

Screen Shot 2017-08-18 at 11.30.18 AM.png

Snip20170818_31.png

Snip20170818_32.png

Snip20170818_33.png

Snip20170818_34

As you can see in the screenshot, the latest code got updated and progress bar color is reflecting.

Email Notification

Snip20170818_35.png

Note: You can isolate the deployment process from the build process using a release template.

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: