Back to Intro to Storybook
Chapters
  • Commencer
  • Un simple composant
  • Composant composite
  • Les données
  • Ecrans
  • Déployer
  • Les tests
  • Modules complémentaires
  • Conclusion
  • Contribuer

Déployer Storybook

Déployer Storybook en ligne avvec GitHub et Netlify
Cette traduction de la communauté n'a pas encore été mise à jour avec la dernière version de Storybook. Aidez-nous à la mettre à jour en appliquant les modifications du guide français pour cette traduction. Les pull requests sont les bienvenues.

Dans ce tutoriel, nous avons exécuté Storybook sur notre machine de développement. Vous pouvez également partager ce Storybook avec l'équipe, en particulier avec les membres non techniques. Heureusement, il est facile de déployer Storybook en ligne.

Avez-vous configuré les tests Chromatic plus tôt ?
🎉 Vos histoires sont déjà déployées ! Chromatic indexe en tout sécurité vos histoires en lignes et les suit à travers les branches et les commits. Sautez ce chapitre et allez à la conclusion.

Exportation en tant qu'application statique

Pour déployer Storybook, nous commençons premièrement par l'exporter comme une application web statique. Cette fonctionnalité est déjà intégrée dans Storybook, nous devons juste la changer comme nous l'avons fait auparavant lorsque le projet a été initialisé dans la section de démarrage.

Copy
{
  "scripts": {
   "build-storybook": "build-storybook -s public"
  }
}

Maintenant, lorsque vous exécutez Storybook via yarn build-storybook, cela vous créera votre application web statique dans le répertoire storybook-static.

Déploiement continu

Nous voulons partager la dernière version des composants dès lors que nous poussons des développements. Pour faire cela, nous devons déployer en continu Storybook. Nous comptons sur GitHub and Netlify pour déployer notre site statique. Nous utiliserons le plan gratuit de Netlify.

GitHub

Si vous suivez le chapitre de test précédent, passez à la fconfiguration d'un référentiel sur GitHub.

Lorsque le projet a été initialisée avec le Vue CLI, un référentiel local était déjà configuré pour vous. A ce stade, il est sûr d'ajouter les fichiers au premier commit.

Copy
git add .

Maintenant, commitez les fichiers.

Copy
git commit -m "taskbox UI"

Configurez un référentiel GitHub

Allez sur GitHub et configurez un référentiel ici. Nommez votre repo “taskbox”.

GitHub setup

Dans la nouvelle configuration du repo, copiez l'URL d'origin du repo et ajoutez-la à votre projet git avec cette commande :

Copy
git remote add origin https://github.com/<your username>/taskbox.git

Et pour finir pousser vos modifications sur le repo GitHub

Copy
git push -u origin master

Netlify

Netlify possède un service de déploiement continu intégré qui nous permettra de déployer storybook sans avoir à configurer notre propre CI.

Si vous utilisez CI dans votre entreprise, ajoutez un script de déploiement à votre configuration qui télécharge storybook-static vers un service d'hébergement statique comme S3.

Créer un compte sur Netlify et cloquez sur "créer un site".

Créer un site netlify

Ensuite, cliquez sur le bouton GitHub pour connecter Netlify sur GitHub. Cela lui permet d'accéder à notre repo taskbox.

Maintenant, sélectionnez le repo GitHub taskbox à partir de la liste des options.

Connectez Netlify à votre repo

Configurez Netlify en surlignant la commande de build à construire dans son CI et le répertoire dans lequel le site statique est généré. Pour la branche, choisissez master. Le répertoire est storybook-static. La commande de build utilise yarn build-storybook.

Paramètres Netlify

Si votre déploiement échoue avec Netlify, ajoutez l'option --quiet à votre script build-storybook.

Soumettez le formulaire pour construire et déployer le code de la branche master du repo taskbox.

Une fois terminé, nous verrons un message de confirmation sur Netlify avec un lien vers le Storybook taskbox en ligne. Si vous suivez le tutoriel, votre Storybook déployé devrait être en ligne comme cela.

Déploiement du Storybook sur Netlify

Nous avons terminé la configuration du déploiement continu de votre Storybook ! Maintenant, nous pouvons partager nos stories avec nos coéquipiers avec un lien.

Cela est utile pour un revue visuelle d'une partie du développement de l'application ou simplement pour montrer le travail 💅.

Keep your code in sync with this chapter. View 4b1cd77 on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
Les tests
Apprenez à tester les composants UI
✍️ Edit on GitHub – PRs welcome!
Join the community
6,614 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI