Amazon n' CodeCatalyst est plus ouvert aux nouveaux clients. Les clients existants peuvent continuer à utiliser le service normalement. Pour de plus amples informations, veuillez consulter [Comment effectuer une migration depuis CodeCatalyst](migration.md).
Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.
# Tutoriel : Création et mise à jour d'une application React
En tant qu'auteur de plans, vous pouvez développer et ajouter des plans personnalisés au catalogue de plans de votre espace. Ces plans peuvent ensuite être utilisés par les membres de l'espace pour créer de nouveaux projets ou les ajouter à des projets existants. Vous pouvez continuer à apporter des modifications à vos plans, qui sont ensuite mis à disposition sous forme de mises à jour par le biais de pull requests.
Ce didacticiel fournit une présentation détaillée du point de vue de l'auteur du plan et du point de vue de l'utilisateur du plan. Le didacticiel montre comment créer un plan d'application Web d'une seule page React. Le plan est ensuite utilisé pour créer un nouveau projet. Lorsque le plan est mis à jour avec des modifications, le projet créé à partir du plan intègre ces modifications par le biais d'une pull request.
**Topics**
+ [Prérequis](#blueprint-getting-started-prerequisites)
+ [Étape 1 : créer un plan personnalisé](#react-bluprint-tutorial-create-bp)
+ [Étape 2 : Afficher le flux de production](#blueprint-getting-started-view-workflow)
+ [Étape 3 : ajouter un plan au catalogue](#blueprint-getting-started-add-to-catalog)
+ [Étape 4 : Création d'un projet avec un plan](#blueprint-getting-started-create-project)
+ [Étape 5 : Mettre à jour le plan](#blueprint-getting-started-update-blueprint)
+ [Étape 6 : mise à jour de la version du catalogue publiée du plan vers la nouvelle version](#blueprint-getting-started-update-catalog-version)
+ [Étape 7 : Mettre à jour le projet avec la nouvelle version du plan](#blueprint-getting-started-update-project)
+ [Étape 8 : Afficher les modifications apportées au projet](#blueprint-getting-started-view-changes)
## Prérequis
Pour créer et mettre à jour un plan personnalisé, vous devez avoir effectué les tâches [Configurer et se connecter à CodeCatalystConfigurer et se connecter à CodeCatalyst](setting-up-topnode.md) suivantes :
+ Disposez d'un identifiant AWS Builder pour vous connecter à CodeCatalyst.
+ Appartenez à un espace et le rôle **d'**administrateur** de l'espace ou d'utilisateur** avancé vous est attribué dans cet espace. Pour plus d’informations, consultez [Création d’un espace](spaces-create.md), [Octroi d'autorisations d'espace aux utilisateurs](spaces-members.md) et [Rôle d’administrateur de l’espace](ipa-role-types.md#ipa-role-space-admin).
## Étape 1 : créer un plan personnalisé
Lorsque vous créez un plan personnalisé, un CodeCatalyst projet contenant le code source de votre plan ainsi que des outils et ressources de développement est créé. C'est dans votre projet que vous allez développer, tester et publier le plan.
1. Ouvrez la CodeCatalyst console à l'[adresse https://codecatalyst.aws/](https://codecatalyst.aws/).
1. Dans la CodeCatalyst console, accédez à l'espace dans lequel vous souhaitez créer un plan.
1. Choisissez **Paramètres** pour accéder aux paramètres de l'espace.
1. Dans l'onglet **Paramètres de l'espace**, choisissez **Blueprints**, puis **Create Blueprint**.
1. Mettez à jour les champs dans l'assistant de création de plans avec les valeurs suivantes :
+ Dans **Nom du plan**, entrez`react-app-blueprint`.
+ Dans **Nom d'affichage du plan**, entrez`react-app-blueprint`.
1. Vous pouvez éventuellement choisir **Afficher le code** pour prévisualiser le code source du plan de votre plan. De même, choisissez **Afficher le flux** de travail pour prévisualiser le flux de travail qui sera créé dans le projet qui crée et publie le plan.
1. Choisissez **Créer un plan**.
1. Une fois votre plan créé, vous êtes redirigé vers le projet du plan. Ce projet contient le code source du plan, ainsi que les outils et les ressources dont vous avez besoin pour développer, tester et publier le plan. Un flux de travail de publication a été généré et votre plan a été automatiquement publié dans l'espace.
1. Maintenant que votre plan et votre projet de plan sont créés, l'étape suivante consiste à le configurer en mettant à jour le code source. Vous pouvez utiliser les environnements de développement pour ouvrir et modifier votre référentiel source directement dans votre navigateur.
Dans le volet de navigation, choisissez **Code**, puis **Dev Environments**.
1. Choisissez **Create Dev Environment**, puis choisissez **AWS Cloud9 (dans le navigateur)**.
1. Conservez les paramètres par défaut et choisissez **Create**.
1. Dans le AWS Cloud9 terminal, accédez au répertoire de votre projet de plan en exécutant la commande suivante :
```
cd react-app-blueprint
```
1. Un `static-assets` dossier est créé et rempli automatiquement lorsqu'un plan est créé. Dans ce didacticiel, vous allez supprimer le dossier par défaut et en générer un nouveau pour le plan d'une application React.
Supprimez le dossier static-assets en exécutant la commande suivante :
```
rm -r static-assets
```
AWS Cloud9 est construit sur une plate-forme basée sur Linux. Si vous utilisez un système d'exploitation Windows, vous pouvez utiliser la commande suivante à la place :
```
rmdir /s /q static-assets
```
1. Maintenant que le dossier par défaut est supprimé, créez un `static-assets` dossier pour un plan React-App en exécutant la commande suivante :
```
npx create-react-app static-assets
```
Si vous y êtes invité, entrez `y` pour continuer.
Une nouvelle application React a été créée dans le `static-assets` dossier contenant les packages nécessaires. Les modifications doivent être transmises à votre référentiel CodeCatalyst source distant.
1. Vérifiez que vous disposez des dernières modifications, puis validez et transférez les modifications dans le référentiel CodeCatalyst source du plan en exécutant les commandes suivantes :
```
git pull
```
```
git add .
```
```
git commit -m "Add React app to static-assets"
```
```
git push
```
Lorsqu'une modification est apportée au référentiel source du plan, le flux de production démarre automatiquement. Ce flux de travail augmente la version du plan, crée le plan et le publie dans votre espace. À l'étape suivante, vous allez accéder au flux de travail de publication exécuté pour voir comment il fonctionne.
## Étape 2 : Afficher le flux de production
1. **Dans le volet de navigation de la CodeCatalyst console, choisissez **CI/CD**, puis Workflows.**
1. Choisissez le flux de travail de **publication du plan**.
1. Vous pouvez voir que le flux de travail comporte des actions permettant de créer et de publier le plan.
1. Sous **Dernière exécution, cliquez** sur le lien d'exécution du flux de travail pour afficher l'exécution à partir de la modification de code que vous avez apportée.
1. Une fois l'exécution terminée, la nouvelle version de votre plan est publiée. Les versions de plans publiées sont visibles dans les **paramètres** de votre espace, mais ne peuvent pas être utilisées dans des projets tant qu'elles ne sont pas ajoutées au catalogue de plans de l'espace. À l'étape suivante, vous allez ajouter le plan au catalogue.
## Étape 3 : ajouter un plan au catalogue
L'ajout d'un plan au catalogue de plans de l'espace permet de l'utiliser dans tous les projets d'un espace. Les membres de l'espace peuvent utiliser le plan pour créer de nouveaux projets ou les ajouter à des projets existants.
1. Dans la CodeCatalyst console, revenez dans l'espace.
1. Choisissez **Paramètres**, puis **Blueprints**.
1. Choisissez **react-app-blueprint**, puis choisissez **Ajouter au catalogue**.
1. Choisissez **Save** (Enregistrer).
## Étape 4 : Création d'un projet avec un plan
Maintenant que le plan est ajouté au catalogue, il peut être utilisé dans des projets. Au cours de cette étape, vous allez créer un projet avec le plan que vous venez de créer. Dans une étape ultérieure, vous mettrez à jour ce projet en mettant à jour et en publiant une nouvelle version du plan.
1. Choisissez l'onglet **Projets**, puis sélectionnez **Créer un projet**.
1. Choisissez **Space Blueprints**, puis choisissez **react-app-blueprint**.
**Note**
Une fois le plan choisi, vous pouvez voir le contenu du fichier du `README.md` plan.
1. Choisissez **Suivant**.
1.
**Note**
Le contenu de cet assistant de création de projet peut être configuré dans le plan.
Entrez le nom du projet en tant qu'utilisateur du plan. Dans le cadre de ce didacticiel, entrez `react-app-project`. Pour de plus amples informations, veuillez consulter [Élaboration d'un plan personnalisé pour répondre aux exigences du projet](develop-bp.md).
Vous allez ensuite mettre à jour le plan et ajouter la nouvelle version au catalogue, que vous utiliserez pour mettre à jour ce projet.
## Étape 5 : Mettre à jour le plan
Une fois qu'un plan est utilisé pour créer un nouveau projet ou qu'il est appliqué à des projets existants, vous pouvez continuer à le mettre à jour en tant qu'auteur du plan. Au cours de cette étape, vous allez apporter des modifications au plan et publier automatiquement une nouvelle version dans l'espace. La nouvelle version peut ensuite être ajoutée en tant que version du catalogue.
1. Accédez au **react-app-blueprint**projet créé dans[Tutoriel : Création et mise à jour d'une application React](#blueprint-getting-started-tutorial).
1. Ouvrez l'environnement de développement créé dans[Tutoriel : Création et mise à jour d'une application React](#blueprint-getting-started-tutorial).
1. Dans le volet de navigation, choisissez **Code**, puis **Dev Environments**.
1. Dans le tableau, recherchez l'environnement de développement, puis choisissez **Ouvrir dans AWS Cloud9 (dans le navigateur)**.
1. Lorsque le flux de travail de publication du plan a été exécuté, il a incrémenté la version du plan en mettant à jour le fichier. `package.json` Intégrez cette modification en exécutant la commande suivante dans le AWS Cloud9 terminal :
```
git pull
```
1. Accédez au `static-assets` dossier en exécutant la commande suivante :
```
cd /projects/react-app-blueprint/static-assets
```
1. Créez un `hello-world.txt` fichier dans un `static-assets` dossier en exécutant la commande suivante :
```
touch hello-world.txt
```
AWS Cloud9 est construit sur une plate-forme basée sur Linux. Si vous utilisez un système d'exploitation Windows, vous pouvez utiliser la commande suivante à la place :
```
echo > hello-world.text
```
1. Dans le menu de navigation de gauche, double-cliquez sur le `hello-world.txt` fichier pour l'ouvrir dans l'éditeur, puis ajoutez le contenu suivant :
```
Hello, world!
```
Enregistrez le fichier.
1. Vérifiez que vous disposez des dernières modifications, puis validez et transférez les modifications dans le référentiel CodeCatalyst source du plan en exécutant les commandes suivantes :
```
git pull
```
```
git add .
```
```
git commit -m "prettier setup"
```
```
git push
```
L'application des modifications a lancé le flux de travail de publication, qui publiera automatiquement la nouvelle version du plan dans l'espace.
## Étape 6 : mise à jour de la version du catalogue publiée du plan vers la nouvelle version
Une fois qu'un plan est utilisé pour créer un nouveau projet ou qu'il est appliqué à des projets existants, vous pouvez toujours le mettre à jour en tant qu'auteur du plan. Au cours de cette étape, vous allez apporter des modifications au plan et modifier la version du catalogue du plan.
1. Dans la CodeCatalyst console, revenez dans l'espace.
1. Choisissez **Paramètres**, puis **Blueprints**.
1. Choisissez **react-app-blueprint**, puis sélectionnez **Gérer la version du catalogue**.
1. Choisissez la nouvelle version, puis cliquez **sur Enregistrer**.
## Étape 7 : Mettre à jour le projet avec la nouvelle version du plan
Une nouvelle version est désormais disponible dans le catalogue des plans de l'espace. En tant qu'utilisateur du plan, vous pouvez mettre à jour la version du projet créé dans[Étape 4 : Création d'un projet avec un plan](#blueprint-getting-started-create-project). Cela garantit que vous disposez des dernières modifications et corrections nécessaires pour respecter les meilleures pratiques.
1. Dans la CodeCatalyst console, accédez au **react-app-project**projet créé dans[Étape 4 : Création d'un projet avec un plan](#blueprint-getting-started-create-project).
1. Dans le panneau de navigation, sélectionnez **Blueprints (Modèles)**.
1. Choisissez **Mettre à jour le plan** dans la boîte d'informations.
1. Dans le panneau de **modification du code situé** sur le côté droit, vous pouvez voir les `package.json` mises à jour `hello-world.txt` et.
1. Choisissez **Appliquer la mise à jour**.
Choisir **Appliquer la mise à jour** crée une pull request dans le projet avec les modifications apportées par rapport à la version mise à jour du plan. Pour mettre à jour le projet, vous devez fusionner la pull request. Pour plus d’informations, consultez [Révision d’une demande pull](pull-requests-review.md) et [Fusion d’une demande pull](pull-requests-merge.md).
1. Dans le tableau **des plans**, recherchez le plan. Dans la colonne **État**, choisissez **Pending pull request**, puis cliquez sur le lien vers la pull request ouverte.
1. Passez en revue la pull request, puis choisissez **Merge**.
1. Choisissez **Fusion rapide** pour conserver les valeurs par défaut, puis choisissez **Fusionner**.
## Étape 8 : Afficher les modifications apportées au projet
Les modifications apportées au plan sont désormais disponibles dans votre projet par la suite[Étape 7 : Mettre à jour le projet avec la nouvelle version du plan](#blueprint-getting-started-update-project). En tant qu'utilisateur du Blueprint, vous pouvez consulter les modifications dans le référentiel source.
1. Dans le volet de navigation, choisissez **Référentiels sources**, puis choisissez le nom du référentiel source créé lors de la création du projet.
1. Sous **Fichiers**, vous pouvez afficher le `hello-world.txt` fichier créé dans[Étape 5 : Mettre à jour le plan](#blueprint-getting-started-update-blueprint).
1. Choisissez le `hello-world.txt` pour afficher le contenu du fichier.
La gestion du cycle de vie permet aux auteurs de plans de gérer de manière centralisée le cycle de développement logiciel de chaque projet contenant un plan spécifique. Comme indiqué dans ce didacticiel, vous pouvez envoyer des mises à jour du plan qui peuvent ensuite être incorporées par les projets qui ont utilisé le plan pour créer un nouveau projet ou l'ont appliqué à un projet existant. Pour de plus amples informations, veuillez consulter [Travailler avec la gestion du cycle de vie en tant qu'auteur de plans](lifecycle-management-dev.md).