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.png

(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_8.png

Make 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.png

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.png

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.png

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

snip20170818_12.png

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

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

screen-shot-2017-08-18-at-10-36-17-am.png

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.png

Update the gulpfile.js as shown below:

snip20170818_6.png

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.png

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.png

Tasks

Add the following tasks and configure it as shown below

Process

snip20170818_19.png

Get Sources

snip20170818_20.png

NPM Install – npm

snip20170818_21.png

Update CDN Location – Gulp 

snip20170818_22.png

Bundle Project – Gulp

snip20170818_23.png

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.png

Trigger

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.png

screen-shot-2017-08-18-at-11-26-25-am.png

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.png

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

Email Notification

snip20170818_35

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

Azure Traffic Manager for Provider Hosted Apps – Global Load Balancing

Microsoft Azure Traffic Manager allows us to control the distribution of user traffic to the specified endpoints (Zone Specific Azure Sites).

Azure Traffic Manager gives us three traffic routing methods to choose from:

  • Failover
  • Performance
  • Round robin.

We can choose the one that is right for our application or scenario.

Advantages

  • Traffic Manager can improve the availability of important applications by monitoring our Azure sites and automatically directing users to a new location anytime there is a failure.
  • Traffic Manager makes applications more responsive and improves content delivery times by directing users to an Azure or external location with the lowest network latency.
  • Traffic Manager can direct user traffic to distribute it across multiple locations

Steps to load balance provider hosted apps

drawing1.png

Reference

https://azure.microsoft.com/en-us/documentation/articles/traffic-manager-manage-profiles/

Deploying Multiple Provider Hosted Apps to a Single Azure Web Site

Is it possible to host Multiple Provider Hosted Apps to a Single Azure Web Site?

The answer is Yes. If yes how?

Here you go…..

  • Create Azure Site
  • Create Required App Folders
    1. Go to azure web site
    2. Click on the Configure link in the top navigation for the web site
    3. Scroll to the bottom of the page and enter the values for your new virtual paths as shown below:

1

Note: Make sure you check the Application checkbox.

  • Register your apps using appregnew.aspx page as shown below

2.png

Note: Here I am adding my virtual directory sub folder name(App1 and App2) after azure website URL.

  • Your app manifest file should look like this

3.png

Note: Here I am adding my virtual directory sub folder name(App1 and App2) after ~remoteAppUrl. If you don’t have Remote Event Receiver in your app, you do not need to configure InstalledEventEndpoint and UninstallingEventEndpoint.

  • Publishing configuration(App Web Project) should be something like this

4.png

Note: Here I am adding my virtual directory sub folder name(App1 and App2) after site name.

  • Finally the app package configuration should be like this

5.png

Note: Here I am NOT adding my virtual directory sub folder name(App1 and App2).

Let me know if you  have any questions on this.

Provider Hosted App Deployment to Azure Website’s (One Azure site for multiple apps)

Deployment Steps

  • Create an Azure Website in Azure Portal. In this example, I am going to create an azure website with name “cloud-demo-providerapps”
  • I wish to use one azure website to host multiple provider hosted apps. So I am going to create separate folders to deploy my provider hosted app files as shown below: (In this example, I am going to deploy my provider hosted app files under “AzureDeployTest” folder.)

Note: It is mandatory to check the application checkbox

  • To prepare the build, create a new folder in your system(laptop/server). In this example the folder name is “SPOL_Stage_Build_09252015V01
  • Download the azure website profile from azure portal and paste it inside the “SPOL_Stage_Build_09252015V01” folder. In this example my azure profile name is “cloud-demo-providerapps.azurewebsites.net.PublishSettings

         Note: This will be done by admin team. So include this in the deployment instruction.

  • Create a XML file inside the “SPOL_Stage_Build_09252015V01” folder with name “xml” and configure the XML file in the below format

<?xml version=”1.0″ encoding=”utf-8″?>
<parameters>
<setParameter name=”IIS Web Application Name” value=”cloud-demo-providerapps/AzureDeployTest” />
</parameters>

Here cloud-demo-providerapps is the azure website name and AzureDeployTest is the folder where I wanted             to place my provider app files.

  • Download the below PowerShell script from my one drive and paste it inside the “SPOL_Stage_Build_09252015V01” folder

        Publish-AzureWebApp.ps1

  • Package the provider hosted web project and paste the zip file inside the “SPOL_Stage_Build_09252015V01” folder. In this example my package file name is “AzureDeployTestWeb.zip

Note: This will be done by development team.

  • At this point my build should be ready as shown below
  • Open the Windows PowerShell IDE and navigate to the “SPOL_Stage_Build_09252015V01” folder location
  • Execute the following command

.\Publish-AzureWebApp.ps1 -WebDeployFile AzureDeployTestWeb.zip –SetParametersFile config.xml -PublishSettingsFile cloud-demo-providerapps.azurewebsites.net.PublishSettings

  • If everything works fine, deployment artifacts should be deployed to the target folder and you should see the success message in the powershell IDE.

How to Package and Deploy Provider Hosted Apps

This article provides the steps to package and deploy Provider Hosted App.

I assume you are aware of the following:

  • Provider Hosted Environment readiness
  • IIS site setup for remote web deployment
  • Provider Hosted App Project Setup using VS 2013
  • Registering an app in the App Registration Page
  • Setting up Publishing Profile (using high trust certificate)
  • Package and deploy the .app file in App Catalog from SharePoint Project

Steps to Package & Deploy

  • Right click on the Web Project and select Publish

1-provideapppackage.png

  • Click Next (Note: If required update the IIS Web Application Name, ClientId, ClientSigningCertificatePath, ClientSigningCertificatePassword and IssuerId in the publishing profile. In my case, I have configured all these during the project creation)
  • In the connection tab select the Publish method as “Web Deploy Package” and update the Package location & Site name as per your environment (refer the below example). Click Next

2-provideapppackage4.png

  • Select “Release” in the Configuration drop down and click Publish

3-provideapppackage1.png

  • Now your package should be ready at the package location you have configured in the previous step

4-provideapppackage2.png

  • Copy the app remote web package to the remote web server you wish to deploy
  • Open the Command Prompt and traverse to the directory containing the package files
  • Run the following command:  <Command File Name> /y

Example: SiteProvisioningWeb.deploy.cmd /y

  • Now the deploy command should have deployed the files in the remote web server IIS website.
  • Access the app and make sure the app is working with the logic you have written.

SharePoint Online – Column Formatting

Background 

Microsoft has changed calculated fields to block the execution of custom markup. That means calculated fields that contain any unsupported markup will not display correctly.

This change went into effect on June 13, 2017. Administrators can request an extension through September 10, 2017 at the latest. During this extension, execution of custom markup in calculated fields will not be blocked. This request can be submitted through Microsoft Support. However, beginning September 10, 2017, all unsupported markup will be ignored. This change can be controlled in on-premise SharePoint 2013 and 2016 using CustomMarkupInCalculatedFieldDisabled setting.

Alternatives 

SharePoint Framework Field Customizer 

  • To extend the SharePoint user experience within modern pages and list/document libraries
  • Provides modified views to data for fields within a list/library
  • more powerful and can write custom code
  • End users need developer help to deploy the solution
  • For more advanced scenarios that column formatting does not support
  • Not supported in classic experience

Column Formatting 

  • To customize how fields in SharePoint list/library is displayed
  • No change in data; only changes how it is displayed to the users who browse the list/library
  • Anyone who can manage list/library views in a list can use column formatting
  • JSON based scehma
  • Reusable as site column

Supported Column Types 

The following column types support column formatting:

  • Single line of text
  • Number
  • Choice
  • Person or Group
  • Yes/No
  • Hyperlink
  • Picture
  • Date/Time
  • Lookup Title (in Lists)

The following are not currently supported:

  • Managed Metadata
  • Filename (in Document Libraries)
  • Calculated
  • Retention Label

Sample List with Column Formatting 

03082018SampleList

03082018ColumnFormatting

For more info click here 

Enable Modern Site Pages in SPOL

What is modern site Page?

Modern team site pages are fast, easy to author, and support rich multimedia content. Additionally, pages look great on any device, in a browser, or from within the SharePoint mobile app.

If you want to learn more about the functionalities offered by the “modern” experiences, see here.

Prerequisite

We should activate the Site Pages feature on the SharePoint site before creating the modern pages.

  • Click the settings(gear) icon and select Site settings
  • Click on Manage site features under Site Actions
  • Search for “Site Pages”
  • Click on Activate

How to create a modern page?

  • Click the settings(gear) icon and Site contents
  • Open the “Site Pages” Library
  • Click the Files options from top ribbon bar and select Site Page
  • Configure the required webparts
  • Save and Publish
  • Done

Supported Customizations

  • Custom branding
  • Adding “modern” pages programmatically
  • Adding, deleting, and updating client-side web parts on “modern” pages
  • Alternative layouts

Unsupported Customizations

  • Adding “classic” web parts on “modern” pages
  • Custom CSS via AlternateCSSUrl web property
  • Custom JavaScript embedded via user custom actions
  • Custom master pages
  • Minimal Download Strategy (MDS)