Continuous Deployment of Angular application in SharePoint

(For details around angular-cli, refer to angular-cli documentation.)

Angular-cli makes it possible to rapidly develop client side applications. It is really easy to debug angular applications locally using Hot Module Replacement that angular-cli brings. If we are using client side libraries with SharePoint, we have to upload the updated code file every time it is changed and does not provide a good development experience. In this post, we will build Continuous Deployment pipeline that can be used to building and debugging angular applications with SharePoint. One caveat to this approach is that is not following standard build and package process that SharePoint Apps and SharePoint Framework provides. If you want more controlled way for distributing apps SharePoint Apps/Framework should be preferred for packaging. If you want to use scipt editor webpart and ability to easily test and develop client side components, you can take advantage of this Continuous Deployment pipeline.

Best Practice Alert :

Building application using script editor webpart is not a controlled/repeatable way for building customization for SharePoint Online. You can use Script Editor webpart and CD piepline for good dev experience but make sure you are distributing apps using recommended Apps packing approach.

Tools Required:

1) NodeJS - install from https://nodejs.org/en/
2) Angular CLI - Install using npm install -g @angular/cli
3) Code editor of your choice - mine is VS code - https://code.visualstudio.com/
4) SharePoint Online environment

Step 1: Create new angular project:

Go to command line and run ng new mysp-app to scaffold a new angular project. This will also install all the required Node packages.

Step 2: Setup OneDrive SYNC option

We will be using Site Assets library for our deployment. Navigate to Site assets library of target site collection and click on SYNC option to start syncing this library with local OneDrive installation.

Step 3 : Set one drive folder as deployment target

Open the angular project that was created in visual studio code and open .angular-cli.json file. This is configuration file for angular cli. You will various project properties and the one that we are interested in is "outDir" property. Set this property to one drive local folder which was synced in previous step. Here we are instructing angular cli to put the output files that are generated after building application to one drive folder. After output is generated, OneDrive will be responsible to syncing this back to SharePoint Document library.

Step 4: Build blank application

Build the blank angular application that was created in step 1. To build application, open command prompt and navigate to root folder of angular application and run
ng build --prod This command will build application in production mode and will generate output in "outDir" folder path. This will generate some javascript files
and these files are referenced in our index.html file which is also generated in output directory

Step 5 : Using script editor webpart

Now that we are able to build and deploy our files to SharePoint site assets library, we can use these files to serve our application in SharePoint. Before that, we will have to make couple to changes:
Create a new webpart page in SharePoint and add script editor webpart. Change index.html content as below:
If you look carefully, base href is updated to a SharePoint page : https://sumitagrawal.sharepoint.com/SiteAssets/AngularApp.aspx This should be the URL of the page where script editor webpart is added. We have updated base href as this will be used later by angular routing. We are specifying here that for all routing use this page as base URL.
Second change that we have made is updated all script and stylesheet urls to the ones that are there in SiteAssets library. Also note that file names are changed and we have removed hash from filename. This change is done so that whenever new files are generated by angular-cli, we do not have to change file references in our script editor webpart content.

Step 6: Build without hash

Since we don't need hash in our file names, run ng build --prod --output-hashing none command which will generate same output but without hashes

If you navigate to your webpart page now, you should be able to see Hello World Angular Application!

Step 7: Continuous deployment

What we are targeting is to save our changes and see them directly in browser. For this, run the following command from command line from root of current project:
ng build --prod --output-hashing none --watch

We are instructing angular cli to run the build process in watch mode so that as soon as any files are changed in our source code, angular cli will build the application in production mode without any hashes and push outout to OneDrive folder, OneDrive will sync these changes to our SharePoint site assets library and out script editor webpart will have updated files after hard refresh (Ctrl+ F5)
That is all!

In next post, we will see how to add Routing and and use Angular Service for SharePoint CRUD operations.

Comments

comments powered by Disqus