Scribd
Upload
159 views6 pages

Continuous Deployment of Angular Application in SharePoint

This document describes how to set up continuous deployment of an Angular application to SharePoint using OneDrive sync. The steps are: 1. Create an Angular project using the Angular CLI. 2. Set up OneDrive sync to sync the project folder to a SharePoint document library. 3. Configure the build output folder to the synced OneDrive folder. 4. Add the built files to a SharePoint page using a Script Editor web part. 5. Continuously build and deploy the app by running `ng build` in watch mode.

Uploaded by

Zoltán Perhács
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
159 views6 pages

Continuous Deployment of Angular Application in SharePoint

This document describes how to set up continuous deployment of an Angular application to SharePoint using OneDrive sync. The steps are: 1. Create an Angular project using the Angular CLI. 2. Set up OneDrive sync to sync the project folder to a SharePoint document library. 3. Configure the build output folder to the synced OneDrive folder. 4. Add the built files to a SharePoint page using a Script Editor web part. 5. Continuously build and deploy the app by running `ng build` in watch mode.

Uploaded by

Zoltán Perhács
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

2017. 12. 12.

Continuous Deployment of Angular application in SharePoint

(https://www.sumitagrawal.io)

04 Oct 2017

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 le 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:

https://www.sumitagrawal.io/spng01/ 1/6
2017. 12. 12. Continuous Deployment of Angular application in SharePoint

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 le. This
is con guration le 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 les 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 les

https://www.sumitagrawal.io/spng01/ 2/6
2017. 12. 12. Continuous Deployment of Angular application in SharePoint

and these les are referenced in our index.html le which is also generated in output directory

Step 5 : Using script editor webpart


Now that we are able to build and deploy our les to SharePoint site assets library, we can use these
les 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
https://www.sumitagrawal.io/spng01/ 3/6
2017. 12. 12. Continuous Deployment of Angular application in SharePoint

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 le names are changed and we have removed hash from
lename. This change is done so that whenever new les are generated by angular-cli, we do not
have to change le references in our script editor webpart content.

Step 6: Build without hash


Since we don't need hash in our le 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 les 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 les 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.
https://www.sumitagrawal.io/spng01/ 4/6
2017. 12. 12. Continuous Deployment of Angular application in SharePoint

sharepoint (/tag/sharepoint/) angular (/tag/angular/)

Author

SUMIT AGRAWAL
(/AUTHOR/SUMIT/)

You might enjoy:

PREVIOUS POST

SPFx - Important life cycle events for Client-


side webparts

NEXT POST

Forms Technology for O ce 365

https://www.sumitagrawal.io/spng01/ 5/6
2017. 12. 12. Continuous Deployment of Angular application in SharePoint

Comments
0 Comments sumitagrawal.io  Zoltán Perhács

Sort by Best
 Recommend ⤤ Share

sumitagrawal.io requires you to verify your email address before posting. Send verification email ×
to [email protected]

Start the discussion…

Be the first to comment.

✉ Subscribe d Add Disqus to your siteAdd DisqusAdd 🔒 Privacy

https://www.sumitagrawal.io/spng01/ 6/6

You might also like