Sivarajan's Blog

SharePoint | Office 365 | Azure | JavaScript

Client WebPart Starter Project for SharePoint On-Premise / Online using AngularJs with Gulp

Overview

SharePoint Framework is completely a client side development model and Microsoft is going to release it soon. As per their notes, this will support only SharePoint Online and SharePoint 2016.

This post is mainly who is currently working with SharePoint 2010/2013. Instead of developing a Visual/Standard WebPart, you can build the entire development using front-end technologies (AngularJs, ReactJs or KnockoutJs) and later you can easily convert it into SharePoint Framework easily.

Tools and Frameworks

I have used the following tools and frameworks for build the starter project.

Visual Studio Code and JavaScript IntelliSense

This is an open source and cross-platform IDE. Here you can find more details about VS Code and why I used for client side development. Similarly, you can find that how to enable the JavaScript IntelliSense for your project.

Node.Js and NPM

I have used Node.Js for build and deployment and NPM for install the node packages (AngularJs, Gulp, etc.). Here you can find more details about Node.Js and NPM

Gulp

This is a build automation tool.  Here you can find more details about Gulp

Office UI Fabric

This is UI framework for Office 365 and SharePoint, similar to Bootstrap. You can ignore if you are not familiar with this.

Setup the Project in Local Machine

Please make sure that you installed and configured Visual Studio Code, NodeJs and Gulp properly. If everything is working properly then, you can continue further.

You can download the starter project from GitHub location and extract zip file in your local machine. Open the folder in VS code.

08122016-1

Package.json file

Open the package.json and you can find the two attributes dependencies and devDependencies.


{
  "name": "spo-ng-officeuifabric-gulp",
  "version": "1.0.0",
  "description": "SharePoint Angular Office UI Fabric Starter App with Gulp",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Sivarajan Raju",
  "license": "MIT",
  "dependencies": {
    "angular": "^1.5.8",
    "angular-router": "0.0.2",   
    "ng-office-ui-fabric": "^0.12.2",
    "office-ui-fabric": "^2.6.1"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-changed": "^1.3.1",  
    "gulp-concat": "^2.6.0",
    "gulp-notify": "^2.2.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-spsync": "wictorwilen/gulp-spsync",
    "gulp-uglify": "^1.5.4",
    "gulp-watch": "^4.3.9"
  }
}

Open the extracted file location in the command prompt and run the below command.

> npm install

Now all the dependencies will be installed in your local machine and you can see the modules under node_modules folder.

Gulpfile.js file

The next important file is Gulpfile.js file. Open this file and you can find the multiple tasks. Lets see in detail below.

This is a list of gulp related plug-ins I used.

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var notify = require('gulp-notify');
var sourcemaps = require('gulp-sourcemaps');
var changed = require('gulp-changed');
var sp = require('gulp-spsync');
var watch = require('gulp-watch');

//Change your project name here
var PROJECT_NAME = 'spo-ng-officeuifabric-gulp';

Authentication Settings

I have used gulp-spsync plug-in for for synchronizing local files with a SharePoint library. We need to create security token for SharePoint authentication. Please follow this link to create the client_id ad client_secret and update settings section.


var settings = {
            "client_id":"your here client",
            "client_secret":"your here client code secret",
            "realm" : "",
            "site" : "https://your tenent.sharepoint.com/",
            "verbose": "true"
        };

Task : build-app


//Combine all the JavaScript files (Controllers and Services) under the App folder and create 'combined.js' file for upload to SharePoint.
//with sourcemaps for debugging 

gulp.task('build-app', function () {

    console.log('start - dev task');

    return gulp.src(SOURCE_APP_SCRIPT_PATH)
        .pipe(sourcemaps.init())
        .pipe(concat('combined.js'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(DEST_APP_SCRIPT_PATH));
});

Task : spupload-app


//Call the build-app task and then upload the combined.js to SharePoint
gulp.task('spupload-app',['build-app'], function() {

    console.log('starting spupload-app');

    return gulp.src('content/**/scripts/*.*')        
        .pipe(sp(settings)) 
});

Task : spupload-views


//upload the HTML templates from content/_catalogs/masterpage/spo-ng-officeuifabric-gulp/views folder to SharePoint
gulp.task('spupload-views', function() {
    return gulp.src('content/**/views/*.*')
        .pipe(changed('_build'))
        .pipe(sp(settings))
        .pipe(gulp.dest('_build'))
});

Task: watch


//Whenever we modify the JavaScript files or HTML templates, this task will help to upload the modified file to SharePoint immediately.  
gulp.task('watch', function() {

    gulp.watch('content/**/views/*.*', ['spupload-views']);

    gulp.watch('app/**/*.js', ['spupload-app']);   
});

Task: copy-npmjs


//Each npm packages will have a minified and unminified JavaScript files with documentations. 
//But we need only minified versions and run this task to copy the mentioned js files to our content folder
gulp.task('copy-npmjs', function () {
    console.log('starting external-scripts task');

    return gulp.src([
        /* JS Files */
        'node_modules/angular/angular.min.js',
        'node_modules/ng-office-ui-fabric/ngOfficeUiFabric.min.js'
        
     ]).pipe(gulp.dest(DEST_EXTERNAL_SCRIPTS_PATH));
});

Task: copy-npmcss


//Each npm packages will have a minified and unminified CSS files with documentations. 
//But we need only minified versions and run this task to copy the mentioned css files to our content folder
gulp.task('copy-npmcss', function () {
    console.log('starting external-scripts task');

    return gulp.src([
        
        /* CSS Files */
        'node_modules/office-ui-fabric/dist/css/fabric.css',
        'node_modules/office-ui-fabric/dist/css/fabric.components.css'
     ]).pipe(gulp.dest(DEST_EXTERNAL_CSS_PATH));
});

Task: spupload


//Upload all the files from content folder to SharePoint including external JavaScripts
gulp.task('spupload', function() {
    return gulp.src('content/**/*.*')        
        .pipe(sp(settings))     
        .pipe(gulp.dest('_build'))
});

Run the gulp task.

> gulp <task name>

>gulp spupload

Now all your files under content folder will be uploaded to SharePoint master page gallery. https://<your tenent>.sharepoint.com/_catalogs/masterpage/Forms/AllItems.aspx

08122016-2

 

08122016-3

Use the following gulp task for incremental uploads,

> gulp watch

View the Results

We can view the results by using Script/Content Editor. I have used content editor webpart. Add the two content editor webpart in your SharePoint page and set the content link to /_catalogs/masterpage/spo-ng-officeuifabric-gulp/views/include-script.html and /_catalogs/masterpage/spo-ng-officeuifabric-gulp/views/main.html respectively.

Summary

The advantages of the approach is, while you are working in your local machine, the latest changes will be combined and minified and will be uploaded silently to SharePoint. You can see the latest changes by simply refresh your SharePoint page.

I tested this starter project against SharePoint online. For SharePoint On-premises, you need to include the following gulp plug-in additionally.

https://github.com/estruyf/gulp-spsync-creds

Please let me know if you are facing any issues.

Download Source

Add comment

Loading