Intégration d’Angular, Vite et Storybook

Prérequis

  • Node.js 22.17.x ou supérieur

Introduction

Angular

Angular est un framework front-end open source, largement adopté dans les écosystèmes des moyennes et grandes entreprises. Contrairement à React, bibliothèque légère souvent privilégiée par les startups et PME, Angular se distingue par plusieurs atouts majeurs :

  • Complet et intégré : Il offre nativement des fonctionnalités clés comme le routing, la gestion des formulaires, la gestion d’état, etc.
  • Structure et architecture : Il impose une architecture claire, ce qui facilite la maintenance et la scalabilité des projets.
  • Documentation et communauté : Très bien documenté et soutenu par une communauté active.
  • Maintenance par Google : Garantie de pérennité et d’évolutions régulières.
  • Compatibilité entre versions : Depuis la transition d’AngularJS vers Angular 2+, les mainteneurs ont veillé à assurer une compatibilité ascendante.

Vite

Vite est un outil de développement moderne (bootstrap, build, bundling) compatible avec de nombreux frameworks (React, Vue, Svelte, etc.). Depuis Angular 16, il est intégré nativement dans l’écosystème Angular, offrant des performances optimisées pour le développement et la production.

Storybook

Storybook est un outil open source qui permet de développer, documenter et tester des composants UI de manière isolée, en dehors de l’application principale. Il est particulièrement utile en entreprise pour :

  • Centraliser un Design System et le rendre accessible à toute l’équipe (développeurs, designers, testeurs).
  • Visualiser les composants dans différents états (variantes, thèmes, données dynamiques).

Problématique

Bien que Vite soit désormais intégré à Angular, Storybook utilise par défaut Webpack pour les projets Angular. Cette divergence peut poser des problèmes de cohérence et de performance.

Solution

Depuis 2022, AnalogJS, un framework inspiré de NestJS pour Angular, propose une solution : un plugin dédié pour utiliser Vite avec Storybook. Brandon Roberts, l’un de ses créateurs, a détaillé cette approche dans cet article.
Nous allons suivre ce guide pour configurer Vite avec Storybook dans un projet Angular.

Tutoriel

1. Création du projet Angular

Commencez par créer un nouveau projet Angular :

ng new angular-storybook-vite

Exemple de sortie :

✔ Which stylesheet format would you like to use? CSS
✔ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No
✔ Do you want to create a 'zoneless' application without zone.js? No
✔ Which AI tools do you want to configure with Angular best practices? None

Lancez le projet pour vérifier son bon fonctionnement :

cd angular-storybook-vite && npm start

Résultat attendu :

> ng serve
Initial chunk files | Names         | Raw size
main.js             | main          | 47.78 kB
polyfills.js        | polyfills     | 95 bytes
styles.css          | styles        | 95 bytes
                    | Initial total | 47.97 kB
  ➜  Local:   http://localhost:4200/

2. Ajout de Storybook

Installez Storybook avec la commande :

npx storybook@latest init --type angular

Note : Storybook utilise Webpack par défaut, comme indiqué dans la sortie :

info => Using default Webpack5 setup

3. Configuration de Vite avec Storybook

Pour remplacer Webpack par Vite, installez le plugin AnalogJS :

npm install @analogjs/storybook-angular --save-dev

Remplacez l’import et la configuration du framework dans le fichier .storybook/main.ts:

// Avant
import type { StorybookConfig } from '@storybook/angular';
"framework": {
  "name": "@storybook/angular",
  "options": {}
}
// Après
import type { StorybookConfig } from '@analogjs/storybook-angular';
"framework": {
  "name": "@analogjs/storybook-angular",
  "options": {}
}

Mettez à jour les builders pour Storybook principalement en remplaçant @storybook/angular par @analogjs/storybook-angular dans le fichier angular.json:

// Avant
"storybook": {
  "builder": "@storybook/angular:start-storybook",
  "options": {
    "configDir": ".storybook",
    "browserTarget": "angular-storybook-vite:build",
    "compodoc": true,
    "compodocArgs": [
      "-e",
      "json",
      "-d",
      "."
    ],
    "port": 6006
  }
},
"build-storybook": {
  "builder": "@storybook/angular:build-storybook",
  "options": {
    "configDir": ".storybook",
    "browserTarget": "angular-storybook-vite:build",
    "compodoc": true,
    "compodocArgs": [
      "-e",
      "json",
      "-d",
      "."
    ],
    "outputDir": "storybook-static"
  }
}
// Après
"storybook": {
  "builder": "@analogjs/storybook-angular:start-storybook",
  "options": {
    "configDir": ".storybook",
    "compodoc": true,
    "compodocArgs": [
      "-e",
      "json",
      "-d",
      "."
    ],
    "port": 6006
  }
},
"build-storybook": {
  "builder": "@analogjs/storybook-angular:build-storybook",
  "options": {
    "configDir": ".storybook",
    "compodoc": true,
    "compodocArgs": [
      "-e",
      "json",
      "-d",
      "."
    ],
    "outputDir": "storybook-static"
  }
}

⚠️ Important : Supprimez l’option "browserTarget" si elle est présente.

4. Lancement de Storybook

Démarrez Storybook avec Vite :

npm run storybook

Pourquoi choisir Vite plutôt que Webpack ?

L’intégration de Vite dans un projet Angular + Storybook apporte plusieurs avantages significatifs par rapport à Webpack :

  • Démarrage instantané du serveur de développement : Vite utilise le navigateur pour traiter les modules ES natifs, ce qui élimine le besoin de reconstruire l’intégralité du bundle à chaque modification. Résultat : un Hot Module Replacement (HMR) quasi instantané, même pour les gros projets.
  • Build optimisé : Vite utilise esbuild pour la phase de pré-bundling, ce qui réduit considérablement le temps de build, surtout en développement.

Exemple concret : Avec Webpack, le rechargement d’une story après une modification peut prendre plusieurs secondes. Avec Vite, ce délai est souvent réduit à quelques millisecondes, ce qui rend le workflow de développement bien plus fluide.

Conclusion

Grâce au plugin @analogjs/storybook-angular, il est désormais simple d’utiliser Vite avec Storybook dans un projet Angular. Cette configuration améliore les performances et l’expérience de développement, tout en restant cohérente avec l’écosystème moderne d’Angular.

Crédits & Ressources