Skip to content

Commit

Permalink
chore(react): update deploy.md file to last english version chromaui#3
Browse files Browse the repository at this point in the history
  • Loading branch information
@xaviermarchal
xaviermarchal committed Mar 19, 2023
1 parent 8ba5aa1 commit c1b13d1
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 41 deletions.
2 changes: 1 addition & 1 deletion content/intro-to-storybook/react/en/deploy.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ jobs:
token: ${{ secrets.GITHUB_TOKEN }}
```

<div class="aside"><p>💡 For brevity purposes <a href=" https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository ">GitHub secrets</a> weren't mentioned. Secrets are secure environment variables provided by GitHub so that you don't need to hard code the <code>project-token</code>.</p></div>
<div class="aside"><p>💡 For brevity purposes <a href="https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository">GitHub secrets</a> weren't mentioned. Secrets are secure environment variables provided by GitHub so that you don't need to hard code the <code>project-token</code>.</p></div>

### Commit the action

Expand Down
68 changes: 28 additions & 40 deletions content/intro-to-storybook/react/fr/deploy.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ description: 'Découvrez comment déployer Storybook en ligne'
commit: 'af610d9'
---

Tout au long de ce tutoriel, nous avons construit des composants sur notre machine de développement local. À un moment donné, nous devrons partager notre travail pour obtenir les réactions de l'équipe. Déployons Storybook en ligne pour aider nos coéquipiers à examiner la mise en œuvre de l'UI.
Tout au long de ce tutoriel, nous avons construit des composants sur notre machine de développement en local. À un moment donné, nous devrons partager notre travail pour avoir des retours de l'équipe. Déployons Storybook en ligne pour aider nos coéquipiers à examiner l'implémentation de l'interface utilisateur.

## Exporter sous forme d'application statique
## Exporter en tant qu'application statique

Pour déployer Storybook, nous devons d'abord l'exporter sous la forme d'une application web statique. Cette fonctionnalité est déjà intégrée à Storybook et pré-configurée.

Expand All @@ -17,47 +17,35 @@ L'exécution de `yarn build-storybook` produira un Storybook statique dans le r

Ce tutoriel utilise <a href="https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook">Chromatic</a>, un service de publication gratuit réalisé par les mainteneurs de Storybook. Il nous permet de déployer et d'héberger notre Storybook en toute sécurité dans le cloud.

### Configurer un repo dans GitHub
### Configurer un dépôt dans GitHub

Avant de commencer, notre code local doit se synchroniser avec un service de contrôle de version à distance. Lorsque notre projet a été initialisé dans le chapitre [Débuter](/intro-to-storybook/react/fr/get-started/), Create React App (CRA) a déjà crée un repo local pour nous. À ce stade, il est sans danger d'ajouter nos fichiers au premier commit.
Avant de commencer, notre code local doit se synchroniser avec un service de contrôle de version à distance. Lorsque notre projet a été configuré dans le chapitre [Débuter](/intro-to-storybook/react/fr/get-started/), nous avons initialisé un dépôt en local. À ce stade, nous avons déja quelques commits que nous pouvons pousser sur GitHub.

Utilisez les commandes suivantes pour ajouter et faire un commit sur les modifications que nous avons effectuées jusqu'à présent.
Aller sur GitHub and crééz un nouveau dépôt pour votre projet [ici](https://github.com/new). Nommer le dépôt “taskbox”, comme votre projet en local.

```shell
$ git add .
```

Followed by:

```shell
$ git commit -m "taskbox UI"
```

Allez sur GitHub et créez un nouveau repo pour notre projet [ici](https://github.com/new). Nommez le repo "taskbox", comme notre projet local.

![GitHub setup](/intro-to-storybook/github-create-taskbox.png)
![Configuration de GitHub](/intro-to-storybook/github-create-taskbox.png)

Dans le nouveau repo, saisissez l'URL d'origine du repo et ajoutez-le à votre projet git avec cette commande :
Récupérer l'URL du dépôt et ajouter le dans votre configuration de projet avec la commande suivante:

```shell
$ git remote add origin https://github.com/<your username>/taskbox.git
git remote add origin https://github.com/<your username>/taskbox.git
```

Enfin, transférer notre repo locale vers la repo à distance sur GitHub avec:
Enfin, poussez votre projet en local sur GitHub avec:

```shell
$ git push -u origin main
git push -u origin main
```

### Obtenir Chromatic

Ajoutez le paquet comme une dev dependency.
Ajoutez le paquet comme une dépendance de type développement.

```shell
yarn add -D chromatic
```

Une fois le paquet installé, [connectez-vous à Chromatic](https://www.chromatic.com/start/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook) avec votre compte GitHub (Chromatic ne vous demandera que des permissions légères). Ensuite, nous créerons un nouveau projet appelé "taskbox" et le synchroniserons avec le dépôt GithHub que nous avons mis en place.
Une fois le paquet installé, [connectez-vous à Chromatic](https://www.chromatic.com/start/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook) avec votre compte GitHub (Chromatic ne vous demandera que des permissions légères). Ensuite, crééons un nouveau projet appelé "taskbox" et synchronisons le avec le dépôt GitHub que nous avons mis en place.

Cliquez sur `Choisir le dépôt GitHub` sous collaborateurs et sélectionnez votre dépôt.

Expand All @@ -68,29 +56,29 @@ Cliquez sur `Choisir le dépôt GitHub` sous collaborateurs et sélectionnez vot
/>
</video>

Copiez l'unique `projet-token` qui a été généré pour votre projet. Puis exécutez-le, en émettant ce qui suit dans la ligne de commande, pour construire et déployer notre Storybook. Veillez à remplacer le `project-token` par votre token de votre projet.
Copiez l'unique `projet-token` qui a été généré pour votre projet. Puis exécutez-le en émettant ce qui suit dans la ligne de commande, pour construire et déployer notre Storybook. Veillez à remplacer le `project-token` par votre token de votre projet.

```shell
yarn chromatic --project-token=<project-token>
```

![Chromatique est en marche](/intro-to-storybook/chromatic-manual-storybook-console-log.png)
![Chromatic lancé](/intro-to-storybook/chromatic-manual-storybook-console-log.png)

Lorsque vous aurez terminé, vous recevrez un lien `https://random-uuid.chromatic.com` vers votre Storybook publié. Partagez ce lien avec votre équipe pour obtenir des avis.
Lorsque vous aurez terminé, vous recevrez un lien `https://uuid-aléatoire.chromatic.com` vers votre Storybook publié. Partagez ce lien avec votre équipe pour obtenir des retours.

![Storybook deployed with chromatic package](/intro-to-storybook/chromatic-manual-storybook-deploy-6-0.png)
![Storybook deployé avec chromatic](/intro-to-storybook/chromatic-manual-storybook-deploy-6-4.png)

Hourra! Nous avons publié Storybook avec une seule commande, mais l'exécution manuelle d'une commande chaque fois que nous voulons avoir un retour sur la mise en œuvre de l'UI est répétitive. L'idéal serait de publier la dernière version des composants chaque fois que nous envoyons le code sur le repo Github. Nous devrons déployer Storybook en continu.
Magnifique! Nous avons publié Storybook avec une seule commande, mais l'exécution manuelle d'une commande chaque fois que nous voulons avoir un retour sur la mise en œuvre de l'UI est répétitive. L'idéal serait de publier la dernière version des composants chaque fois que nous ajoutons du code sur le dépôt GitHub. Nous devons déployer Storybook en continu.

## Déploiement continu avec Chromatic

Maintenant que notre projet est hébergé dans un dépôt GitHub, nous pouvons utiliser un service d'intégration continue (CI) pour déployer notre Storybook automatiquement. [GitHub Actions](https://github.com/features/actions) est un service d'intégration continue gratuit intégré à GitHub qui facilite la publication automatique.
Maintenant que notre projet est hébergé sur un dépôt GitHub, nous pouvons utiliser un service d'intégration continue (CI) pour déployer notre Storybook automatiquement. [GitHub Actions](https://github.com/features/actions) est un service d'intégration continue gratuit intégré à GitHub qui facilite la publication automatique.

### Ajouter une action GitHub pour déployer Storybook

Dans le dossier racine de notre projet, créez un nouveau répertoire appelé `.github` puis créez un autre répertoire `workflows` à l'intérieur de celui-ci.

Créez un nouveau fichier appelé `chromatic.yml` comme celui ci-dessous. Remplacez ce fichier par votre token de projet pour changer `project-token`.
Créez un nouveau fichier appelé `chromatic.yml` comme celui ci-dessous.

```yaml:title=.github/workflows/chromatic.yml
# Workflow name
Expand All @@ -112,41 +100,41 @@ jobs:
- uses: chromaui/action@v1
# Options required for Chromatic's GitHub Action
with:
#👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/fr/deploy/ to obtain it
#👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/en/deploy/ to obtain it
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
token: ${{ secrets.GITHUB_TOKEN }}
```

<div class="aside"><p>Pour des raisons de brièveté <a href="https://help.github.com/en/actions/configuring-and-managing-workflows/creating-and-storing-encrypted-secrets">les secrets de GitHub</a> n'ont pas été mentionnés. Les secrets sont des variables d'environnement sécurisées fournies par GitHub afin que vous n'ayez pas besoin de coder en dur le <code>projet-token</code>.</p></div>
<div class="aside"><p>💡 Pour des raisons de sécurité <a href="https://docs.github.com/fr/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository">les secrets de GitHub</a> n'ont pas été mentionnés. Les secrets sont des variables d'environnement sécurisées fournies par GitHub afin que vous n'ayez pas besoin de coder directement le <code>projet-token</code>.</p></div>

### Commit l'action
### Commiter l'action

Dans la ligne de commande, lancez la commande suivante pour ajouter les modifications qui ont été effectuées :
Sur un terminal en ligne de commande, lancez la commande suivante pour ajouter les modifications qui ont été effectuées:

```shell
git add .
```

Faite un commit:
Faites un commit:

```shell
git commit -m "GitHub action setup"
```

Enfin, les envoyer vers le repo à distance avec :
Enfin, envoyer les vers Github:

```shell
git push origin main
```

Une fois que vous avez mis en place l'action GitHub. Votre Storybook sera déployé sur Chromatic chaque fois que vous enverrez du code. Vous pouvez trouver tous les Storybook publiés sur l'écran de compilation de votre projet dans Chromatic.
Une fois que vous avez mis en place l'action GitHub, votre Storybook sera déployé sur Chromatic chaque fois que vous enverrez du code. Vous pouvez trouver tous les Storybook publiés sur l'écran de compilation de votre projet dans Chromatic.

![Tableau de bord chromatique de l'utilisateur](/intro-to-storybook/chromatic-user-dashboard.png)

Cliquez sur la dernière compilation, elle doit être celle du haut.
Cliquez sur le dernier build, cela doit être celui du haut.

Ensuite, cliquez sur le bouton `View Storybook` pour voir la dernière version de votre Storybook.

![Lien Storybook sur Chromatic](/intro-to-storybook/chromatic-build-storybook-link.png)
![Lien Storybook sur Chromatic](/intro-to-storybook/chromatic-build-storybook-link-6-4-optimized.png)

Utilisez le lien et partagez-le avec les membres de votre équipe. Ceci est utile dans le cadre du processus de développement standard d'une application ou simplement pour montrer son travail 💅.

0 comments on commit c1b13d1

Please sign in to comment.