Très souvent lorsque l’on commence un nouveau projet, on se retrouve dans la situation de l’écrivain devant sa page blanche, on recherche l’inspiration… mais contrairement à lui, on dispose de nombreux outils pour nous aider à démarrer!

Ce petit article a pour but de vous présenter rapidement un de ses outils, fountainjs, qui permet de générer la structure de votre projet front assez simplement. Découlant de la solution Yeoman, cet outil vous permet d’initier votre projet front-end avec un squelette de projet personnalisable.

Avant de commencer

Vous devez avoir installé au préalable node.js et avoir une version récente de npm. A noter que pour mettre à jour ce dernier, il vous suffit d’exécuter l’instruction suivante:

npm install -g npm

Ensuite avant de lancer la génération (quelque soit la méthode), vous devez vous assurer que votre version de gulp est correcte, ceci afin de vous éviter quelques surprises. Pour ce faire, vous devez lancer les instructions suivantes :

npm rm -g gulp
npm install -g gulp-cli

A noter : Pour ceux qui ne connaisse pas gulp : c’est un outils, similaire à grunt, permettant de gérer la chaîne de compilation de votre projet.

Pour générer votre projet, vous pouvez le faire :

soit en ligne de commande, comme pour d’autre générateur Yeoman
soit ou directement sur le site fountainjs

Dans les deux cas, vous devez créer le répertoire qui contiendra votre projet.

Génération à partir de la ligne de commande

L’avantage de cette solution, c’est de fournir plus de choix à l’utilisateur… même si l’interface est beaucoup moins sexy.

Avant toute chose, il vous faut installer Yeoman et le générateur fountainjs, en exécutant l’instruction suivante :

npm install -g yo generator-fountain-webapp

Rendez-vous dans le répertoire que vous avez créer précédemment.

Maintenant vous pouvez lancer la génération de votre projet en exécutant l’instruction suivante :

yo fountain-webapp

A l’image des autres générateur, une suite de questions vous sont posées :

Which JavaScript framework do you want? :
- React
- Angular 2
- Angular 1
Which module management do you want?
- Webpack with NPM
- SystemJS with JSPM
Which JS preprocessor do you want?
- ES2015 today with Babel
- Pure old JavaScript
- TypeScript
Which CSS preprocessor do you want?
- SASS
- Stylus
- Less
- CSS
Which Continuous Integration platform do you want?
- Travis
- CircleCi
- Jenkins (with Dockerfile)
- Wercker
Do you want a sample app?
- A working landing page
- Just a Hello World
- Ngrx/store TodoMVC
Would you like a router?
- @angular/router
- Angular UI Router
- None

Génération sur le site

Comme vous allez le voir, la génération directement par le site, est beaucoup plus rapide qu’en ligne de commande.

Vous devez vous rendre à la page de personnalisation proposée par le site : http://fountainjs.io/download/

Dans cette page, vous devez choisir les éléments suivants :

Web Framework :
- React
- Angular 1
- Angular 2
- Vue.js 2
Module management :
- Webpack and NPM
- SystemJS and JSPM
- No modules and Bower
JavaScript preprocessing :
- JavaScript (no preprocessors)
- ECMAScript 2015 with Babel
- TypeScript
CSS preprocessing
- CSS (no preprocessors)
- Sass
- Less
- Stylus
Template
- Hello World
- Fountain landing page
- TodoMVC

Une fois que vous avez choisi vous pouvez télécharger votre squelette de projet en cliquant sur le panel résumant vos choix. Le téléchargent d’un fichier compressé est alors enclenché, il contient votre squelette de projet. Une fois le téléchargement terminé, vous pour décompresser le contenu dans le répertoire que vous avez créer pour votre nouveau projet.

Et ensuite?

Votre projet est en place, il ne vous restera plus qu’à lancer l’instruction gulp adéquate en fonction de votre besoin :

pour lancer un build : gulp build
pour lancer les tests : gulp test
pour lancer le serveur (en mode développement) : gulp serve
pour lancer le serveur (en mode production) : gulp serve:dist
pour lancer le watch : gulp watch

A noter : qu’il est déjà configuré pour être généré sous git(vous êtes par défaut sur master)