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.

Prérequis

Pour créer et mettre à jour un plan personnalisé, vous devez avoir effectué les tâches Configurer et se connecter à CodeCatalyst 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, Octroi d'autorisations d'espace aux utilisateurs et Rôle d'administrateur de l'espace.

É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/.

2. Dans la CodeCatalyst console, accédez à l'espace dans lequel vous souhaitez créer un plan.

3. Choisissez Paramètres pour accéder aux paramètres de l'espace.

4. Dans l'onglet Paramètres de l'espace, choisissez Blueprints, puis Create Blueprint.

5. Mettez à jour les champs dans l'assistant de création de plans avec les valeurs suivantes :

   • Dans Nom du plan, entrezreact-app-blueprint.

   • Dans Nom d'affichage du plan, entrezreact-app-blueprint.

6. 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.

7. Choisissez Créer un plan.

8. 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.

9. 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.

10. Choisissez Create Dev Environment, puis choisissez AWS Cloud9 (dans le navigateur).

11. Conservez les paramètres par défaut et choisissez Create.

12. 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

13. 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

14. 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.

15. 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.

2. Choisissez le flux de travail de publication du plan.

3. Vous pouvez voir que le flux de travail comporte des actions permettant de créer et de publier le plan.

4. 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.

5. 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.

2. Choisissez Paramètres, puis Blueprints.

3. Choisissez react-app-blueprint, puis choisissez Ajouter au catalogue.

4. Choisissez 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.

2. 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.

3. Choisissez Suivant.

4. 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 plus d’informations, consultez Élaboration d'un plan personnalisé pour répondre aux exigences du projet.

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-blueprintprojet créé dansTutoriel : Création et mise à jour d'une application React.

2. Ouvrez l'environnement de développement créé dansTutoriel : Création et mise à jour d'une application React.

   1. Dans le volet de navigation, choisissez Code, puis Dev Environments.

   2. Dans le tableau, recherchez l'environnement de développement, puis choisissez Ouvrir dans AWS Cloud9 (dans le navigateur).

3. 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

4. Accédez au static-assets dossier en exécutant la commande suivante :

   cd /projects/react-app-blueprint/static-assets

5. 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

6. 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.

7. 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.

2. Choisissez Paramètres, puis Blueprints.

3. Choisissez react-app-blueprint, puis sélectionnez Gérer la version du catalogue.

4. 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. 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-projectprojet créé dansÉtape 4 : Création d'un projet avec un plan.

2. Dans le panneau de navigation, sélectionnez Blueprints (Modèles).

3. Choisissez Mettre à jour le plan dans la boîte d'informations.

4. 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.

5. 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 pull request et Fusion d'une pull request.

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.

2. Passez en revue la pull request, puis choisissez Merge.

3. 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. 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.

2. Sous Fichiers, vous pouvez afficher le hello-world.txt fichier créé dansÉtape 5 : Mettre à jour le plan.

3. 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 plus d'informations, voir Travailler avec la gestion du cycle de vie en tant qu'auteur de plans.