Blog Acensi
Venez comme vous êtes + Sharepoint

Installer un environnement de développement pour SharePoint Framework (SPFx)

Introduction du SharePoint Framework

Le SharePoint Framework est un modèle de page et de Web Part qui fournit un support complet pour le développement SharePoint côté client, une intégration facile avec les données SharePoint et un support pour l’outillage Open Source.

Grâce au SharePoint Framework, il est maintenant possible de développer pour SharePoint dans votre environnement en utilisant les standards du Web. En effet, il n’est plus nécessaire que SharePoint soit installé dans votre environnement de développement.

SharePoint Framework fonctionne pour SharePoint 2016 on-premises et SharePoint Online.

A travers ce framework, Microsoft se rapproche des développeurs Web qui n’ont pas de connaissance SharePoint et des standards du développement Web.

L’idée à retenir est « Come as you are », chaque développeur Web peut venir avec :

  • Son système d’exploitation (Windows, Mac, Linux)
  • Son éditeur de texte (Visual Studio, Notepad++, Eclipse, etc)
  • Ses outils de développement Web (NodeJs, Gulp, Webpack, Yeoman, Bootstrap, etc)
  • Ses frameworks et bibliothèques JavaScript et CSS (Knockout, Angular, React, Bootstrap etc)

Nirvana    Pub MacDo "Venez comme vous êtes"

Un peu d’histoire

https://blogs.office.com/2016/05/04/the-sharepoint-framework-an-open-and-connected-platform/

Depuis le début de SharePoint, nous créons des solutions largement implémentées en .NET. Comme beaucoup de systèmes de contenu et de collaboration, ces solutions ont été conçues dans l’ère du code côté serveur.

Schema ASP

Avec l’évolution des technologies et de la connectivité, le langage JavaScript et la performance ont considérablement progressé. Nous pouvons revenir à l’informatique distribuée et construire des expériences utilisateur riches, rapides et interactives sur le client. Et nous pouvons construire des interfaces réactives qui fonctionnent dans les différents navigateurs pour tous les « devices ».

Installer un environnement de développement

Un aperçu de la nouvelle caisse à outils du développeur SharePoint :

Schema profil et plateformes

Source : https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment

Installer les outils de développement

NodeJS

Logo Node JS

« Concrètement, node.js est un environnement d’assez bas niveau permettant d’exécuter du JavaScript non plus dans le navigateur web mais sur le serveur. », Wikipedia

Installer NodeJS « Long Term Support » (LTS) – https://nodejs.org

  • Si vous utilisez un Mac, il est recommandé d’utiliser homebrew pour installer et gérer NodeJS.

Après l’installation de NodeJS, ou si NodeJS est déjà présent, vérifiez que vous utilisez la version 3 en lançant la commande :

npm -v

Si ce n’est pas le cas, lancez la commande :

npm install -g npm@3

Editeur de code / IDE

Ici vous avez le choix. La seule contrainte pour ce choix est que l’éditeur doit supporter l’édition de code client.

Quelques exemples :

Si vous utilisez un PC

Vous devez installer windows-build-tools. windows-build-tools va installer Visual C++ Build Tools 2015 fournis gratuitement par Microsoft. Ces outils sont requis pour compiler plusieurs modules natifs. Il va également installer Python 2.7, configurer votre ordinateur et npm convenablement.

Lancez la commande suivante :

npm install -g –production windows-build-tools

Si vous utilisez Ubuntu

Vous devez installer l’outil de compilation en lançant la commande :

sudo apt-get install build-essential

Si vous utilisez Fedora

Vous devez installer l’outil de compilation en lançant la commande :

sudo yum install make automake gcc gcc-c++ kernel-devel

Yeoman & Gulp

Picto YEOMAN

Yeoman permet de générer un nouveau projet en partant d’un modèle. Auparavant, les modèles de solutions SharePoint étaient stockés en local. Il fallait donc penser à les mettre à jour.

Avec Yeoman, plus besoin de s’inquiéter pour savoir si on va démarrer notre projet avec le dernier modèle. Les modèles sont stockés en ligne et maintenus par Microsoft.

Picto Gulp

Gulp est un automatiseur de tâches. Il permet de lancer automatiquement certaines commandes ou scripts au moment de la compilation du projet.

Gulp permet par exemple de :

  • Créer un dossier de sortie pour votre projet
  • Minifier vos scripts JS et feuilles de styles CSS
  • Concaténer des fichiers
  • Créer un serveur local afin de tester notre développement

Pour installer Yeoman et Gulp, lancez la commande :

npm install -g yo gulp

Générateur Yeoman SharePoint

Le générateur de Web Part SharePoint Yeoman permet de créer rapidement des solutions SharePoint côté client avec la bonne caisse à outils et la bonne structure de projet.

Lancez la commande suivante pour installer le générateur Yeoman SharePoint :

npm install -g @microsoft/generator-sharepoint

Vous êtes maintenant parés pour commencer à développer avec le nouveau SharePoint Framework.

Pour aller plus loin :

Source : https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment

Ajouter un commentaire

Pourquoi ce blog ?

Pour permettre à nos consultants et experts techniques de partager leurs connaissances et retours d’expérience autour des sujets qui les passionnent. Ce blog, intégralement écrit par eux, a pour vocation d’être un véritable lieu d’échanges et d’apprentissage.

Alors n’hésitez pas à commenter nos articles pour rejoindre la conversation !

Une suggestion ?

Si vous avez des idées pour améliorer ce blog, nous sommes à l’écoute de vos remarques. Vous pouvez nous écrire via le formulaire de contact qui se trouve en bas de page.

Bonne visite !