Avec ce titre clairement putaclic je voudrais juste vous montrer comment je fais pour créer une application web pour mon usage personnel sans trop me prendre la tête avec la compilation, le déploiement et même l'installation sur mobile. Ceux qui me connaissent s'en douteront : je vais utiliser au maximum le CLI Angular 😇

Bootstrap de l'application

Là c'est très simple, allez dans le dossier où vous rangez vos projets. Chez moi : ~/Projets. Ensuite une simple commande :

# si vous n'avez pas le CLI d'installé : npm install --global @angular/cli
ng new NomDuProjet

Là vous allez avoir deux questions :

  • Would you like to add Angular routing?

Par défaut c'est non donc si vous n'avez pas besoin de routeur vous pouvez directement faire entrer. Si vous entrez "y" puis entrer tout le routeur sera mis en place. Vous aurez juste à définir vos routes et ajouter le composant <router-outlet></router-outlet> où vous voulez.

  • Which stylesheet format would you like to use?

À vous de voir quel type de feuille de style vous voulez par défaut. Personnellement je prends toujours SCSS.

La création du projet est terminée. Le CLI vous a créé un nouveau dossier au nom de votre projet. Ce dossier contient un projet complet qui peut être démarré avec au choix ng serve ou npm start. Le dossier est aussi un projet Git, et l'ensemble des fichiers créés par le CLI est contenu dans le commit initial de ce dépôt. Au besoin on peut directement lancer les tests unitaires via ng test ou npm test.

Un peu de style ?

Avant d'aller plus loin j'ai tendance à toujours ajouter Angular Material. Même sur des projets qui seront stylés via Bootstrap ou autre. Angular Material apporte beaucoup d'outils pour facilité de développement de composant graphique et des composants très générique comme un datepicker.

Pour l'ajouter au projet c'est très simple :

ng add @angular/material

Comme pour la création de projet, on aura droit à des questions :

  • Choose a prebuilt theme name, or "custom" for a custom theme:

Ici on peut choisir un thème tout prêt ou un thème personnalisé. En général je choisis le thème Deep Purple/Amber qui me plait bien ces derniers temps 😇

  • Set up global Angular Material typography styles?

Par défaut à non. Si vous acceptez la classe "mat-typography" sera ajouté à la balise body de votre index.html. Faire ça vous donne accès à quelques classes d'aide pour la typographie. Plus de détails ici : https://material.angular.io/guide/typography

  • Set up browser animations for Angular Material?

Par défaut à oui. Cette option va activer les animations sur les composants.

Ensuite on laisse le CLI faire le travail et on aura accès à tous les outils et composants fournis par Angular Material.

Si vous démarrez l'application en l'état vous verrez que tout fonctionne.

Il ne vous reste plus qu'à faire un commit pour l'ajout de Angular Material. Ici ce n'est pas fait automatiquement.

Et le déploiement ?

Pour le déploiement j'ai trouvé un schematics qui ajoute un outil pour déploiement en Github Page. Pour l'ajouter c'est très simple :

ng add angular-cli-ghpages

L'outil s'ajoute automatiquement à votre package.json. Puis on va pouvoir mettre en place des Github Action pour faire fonctionner tout ça.

Pour ça c'est très simple : créer le fichier .github/workflows/main.yml à partir de la racine du projet. Dans ce fichier il suffit de copier/coller ce pipeline : https://github.com/kuroidoruido/konverty/blob/master/.github/workflows/main.yml (c'est celui que j'ai utilisé aujourd'hui pour une application créée pour m'amuser). Il faudra juste remplacer à la fin du fichier le nom du projet (ici konverty), le nom et l'adresse mail du commiter.

Des tests à chaque commit

Pour que les tests fonctionnent sur Github Action sans changer de framework de test, j'ai opté pour une exécution via Puppeteer. Ceci nous permet d'avoir un navigateur headless très facilement.

Pour ça il y a 3 étapes :

  • Ajouter le package en devDependencies :
npm install --save-dev puppeteer
  • Ajouter un script pour l'éxécution des tests en Github Action
...
  "scripts": {
...
     "test": "ng test",
+    "test:ci": "ng test --watch=false --browsers=Puppeteer --reporters=dots",
...
  }
package.json
  • Ajouter un lanceur personnalisé pour Puppeteer
...
    singleRun: false,
-   restartOnFileChange: true
+   restartOnFileChange: true,
+    customLaunchers: {
+        Puppeteer: {
+            base: 'ChromeHeadless',
+            flags: ['--no-sandbox', '--disable-gpu'],
+        },
+    },
...
karma.conf.js

On commit, on push et c'est fini !

Pour terminer la configuration il suffit de commit les dernières configurations puis push sur un dépôt du même nom que le projet.

Vous avez maintenant une CI/CD qui compile et test votre application web puis la déploie en tant que Github Page dans une branche dédiée (gh-pages). Vous n'avez aucune autre configuration à effectuer pour que tout fonctionne 😇

Et l'installation sur mobile ?

En effet notre application n'est pas une Progressive Web App pour l'instant. Pour la convertir, encore une commande via la CLI :

ng add @angular/pwa --project NomDuProjet

Ensuite un commit, un push et votre application est une PWA basique, permettant l'installation sur smartphone 😎

Conclusion

Cet article est presque une publicité pour Angular, et autant j'aime travailler avec d'autres frameworks, j'avoue que la vitesse de mise en place de l'ensemble des éléments comme je viens de le faire me bluffe toujours. 😀

Maintenant je vous laisse créer votre application avec ce squelette, ça ça dépend de vous 😎

Crédit photo : https://pixabay.com/illustrations/superhero-girl-speed-runner-534120/