Blog

Initier son projet front-end avec fountainjs

fountainjs-logo6-machine

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)
Julien Poyard

Written by

The author didnt add any Information to his profile yet

  • Alex Mustiere

    Merci Julien !