Du développement moderne sous SharePoint 2013 ?

Je vous vois déjà vous dire « Le mec, il fait un article sur SharePoint 2013 alors qu’on est en 2018 ? », et… Vous aurez raison surtout que le support « général » est arrivé à son terme.

Mais la vérité est celle du marché et aujourd’hui beaucoup d’entreprises disposent encore d’une ferme SharePoint 2013 OnPremise.

L’autre vérité du marché est qu’il est difficile de trouver des consultants SharePoint pour réaliser des développements. Il est donc nécessaire de limiter l’adhérence des développements avec SharePoint en hébergeant des services sur la Ferme, accessibles depuis des technologies Front.

Il est primordial que le développement Front ne soit pas dépendant de SharePoint, le développeur n’a pas besoin ni envie de savoir comment déployer dans la bibliothèque de styles et encore moins uploader manuellement ses modifications.

Pour répondre à ces problématiques, nous avons mis en place avec Hamza Iqbal (star d’UX chez IS) une méthode de développement basée sur :

• Gulp qui va nous permettre d’automatiser certaines tâches comme l’upload de fichiers.
• Browersync qui va nous permettre d’actualiser et de synchroniser automatiquement vos pages web.
• Et nodeJs pour faire tourner tout ça.

Pour pousser le concept de modernité, nous avons choisi d’utiliser SASS et TypeScript.

De quoi avons-nous besoin ?

• SharePoint 2013
• Visual studio 2012+ (pour générer le WSP à livrer sur vos environnements de production)
• Visual studio code
• NodeJS
• TypeScript
• SASS
• SharePoint 2013
• C# .net 4.5
• npmjs
• Gulp
• Bootstrap
• jQuery

Comment tout ceci fonctionne ?

Le concept tourne autour de Gulp qui est un automatiseur de tâches.

Nous allons l’utiliser pour « transpiler », minifier et « uglifier » le code TypeScript en JavaScript et pareil pour le SASS en CSS.

Une fois ces fichiers générés, ils seront uploadés automatiquement à l’endroit désiré et le navigateur sera automatiquement rafraîchi grâce à browsersync.

Comment mettre en place ce type de projet ?

Voici le fichier contenant les dépendances NPM à installer. Il est à positionner à la racine du projet : package.json

{
"name": "dev",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"browser-sync": "^2.18.13",
"gulp": "^3.9.1",
"gulp-cache": "^1.0.1",
"gulp-exec": "^2.1.3",
"gulp-fn": "0.0.0",
"gulp-ignore": "^2.0.2",
"gulp-inject-string": "^1.1.0",
"gulp-load-plugins": "^1.5.0",
"gulp-notify": "^3.0.0",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-rimraf": "^0.2.1",
"gulp-sass": "^3.1.0",
"gulp-spsave": "^3.1.0",
"gulp-typescript": "^3.2.3",
"gulp-uglify": "^3.0.0",
"gulp-watch": "^4.3.11",
"jquery": "^3.2.1",
"node-sass": "^4.7.2",
"run-sequence": "^2.2.0",
"tsify": "^3.0.4",
"typescript": "^2.6.2"
}
}

Pour fonctionner, Browsersync va utiliser un proxy interne. Il vous faut donc autoriser un accès anonyme sur votre site.

Pour cela je vous conseille de créer une extension de votre WebApplication.

Dans cet exemple, nous avons créé une extension « http://portalanonymous » et l’avons définie dans le fichier browsersync.json placé à la racine du projet.

{

"proxy":

{

"target": "http://portalanonymous/"

}

}

Pour uploader les fichiers dans SharePoint nous utilisons le module node : gulp-spsave

Ce module a besoin d’un compte utilisateur pour télécharger ainsi que les différents emplacements d’upload. Nous les avons positionnés dans un fichier gulpconfig.json placé à la racine du projet :

{

"spCredentials": {

"username": "gulpagent",

"password": "password",

"domain": "domain"

},

"spStyleLibrary": "style library/dev",

"spTemplates": "_catalogs/masterpage/dev",

"spPortalUrl": "http://portal",

"spControlsPath": "C:/Program Files/Common Files/microsoft shared/Web Server Extensions/15/TEMPLATE/CONTROLTEMPLATES/dev",

"spAssemblyName": "dev, Version=1.0.0.0, Culture=neutral, PublicKeyToken=AAA12345878"

}

Je vous conseille de créer un utilisateur local pour éviter de commit votre mot de passe sur votre contrôleur de code source 😉

Il faudra avoir créé ces fonctions dans votre fichier gulpfile.js placé à la racine du projet :

var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
var plugins = gulpLoadPlugins();

var browserSync = require('browser-sync').create();
var browserSyncConf = require('./browsersync.json');

var bsReload = function (file) {
	return browserSync.reload();
	if (file.contents > 0) {
		console.log("file not empty : refresh");
	}
	else{
		console.log("file empty : no refresh");
	}
}

var bsStream = function () {
	return browserSync.stream();
}

// Chemins vers les fichiers
var files = {
	sass: '**/*.scss', 
	css: '*.css',
	jsDistMain: '*.js'
};

Ces fonctions déterminent quels types de fichiers sont à « surveiller ».

Dans ce même fichier, voici un exemple de tâche Gulp permettant le téléchargement sur SharePoint de fichiers Javascripts :

/**
 * Task : spUploadJSMain
 * 		- Upload JS main files to SharePoint
 *******************************************/
gulp.task('spUploadJSMain', function () {
	return gulp.src(files.jsDistMain)
		.pipe(plugins.spsave({
			siteUrl: gulpConf.spPortalUrl,
			folder: gulpConf.spStyleLibrary + "/js",
			notification: true,
		}, gulpConf.spCredentials))
		.pipe(plugins.fn(bsReload))
});

/**
 * Task : browserSync
 * 		- Synchronize all browsers and devices
 *******************************************/
gulp.task('browserSync', ['sass', 'typescript'], function () {
	browserSync.init(browserSyncConf);

	// JS Main file
	gulp.watch(files.ts, ['typescript']);

	// JS auto refresh
	gulp.watch(files.jsDistMain, ['spUploadJSMain']);

	// SASS Compilation
	gulp.watch(files.sass, ['sass']);
	gulp.watch(files.css, ['spUploadCSS']);

});

Afin d’initialiser le projet, il vous suffit de vous rendre à la racine de votre projet via une console et effectuer la commande suivante :

npm install

Pour finir, afin d’activer le téléchargement automatique, il suffira de lancer la commande : gulp 

Vous pouvez maintenant commencer vos développements et votre solution devrait avoir cette allure :

Mais quel est l’intérêt au final ?

L’effort à fournir pour migrer sur une technologie comme Office 365 sera moins important.

Vous pourrez remplacer uniquement votre couche d’appels aux services par du SharePoint Framework (SPFX) et SharePoint Patterns and Practices par exemple.

D’ailleurs, je vous invite à regarder l’excellente série d’articles de mon collègue Haythem Brigui : SHAREPOINT FRAMEWORK (SPFX) : GETTING STARTED AND DEEP DIVE (PARTIE 1/3)

Vous trouverez ici une coquille prête à l’emploi.