Créer une application React complète

Mise en œuvre

• Création d'une application React

  La méthode la plus simple pour créer une application React est d'utiliser la commande create-react-app. Installez ce paquet en utilisant la commande suivante dans votre invite de commande ou votre terminal :

  npx create-react-app amplifyapp
  cd amplifyapp
  npm start

  Code snippet copied

  Copier
• Initialiser le référentiel GitHub

  Dans cette étape, vous allez créer un référentiel GitHub et déposer votre code dans le référentiel. Vous aurez besoin d'un compte GitHub pour terminer cette étape. Si vous n'en avez pas, inscrivez-vous ici.

  a. Créez un référentiel GitHub pour votre application.
  

  

  b. Ouvrez un nouveau terminal et naviguez jusqu'au dossier racine de votre application, par exemple amplifyapp.

  c. L'utilisation de create-react-app initialisera automatiquement le référentiel git et effectuera un premier commit. Si vous essayez de déployer une application React existante dans laquelle git n'a pas été initialisé, assurez-vous de saisir les commandes suivantes avant de continuer :

  git init
  git add .
  git commit -m "initial commit"

  Code snippet copied

  Copier

  d. Si vous n'avez jamais utilisé GitHub sur votre ordinateur, suivez ces étapes avant de continuer à autoriser la connexion à votre compte.
  

  Poussez l'application vers le nouveau référentiel GitHub en exécutant les commandes suivantes dans votre interface de ligne de commande :

  git remote add origin git@github.com:username/reponame.git
  git branch -M main
  git push -u origin main

  Code snippet copied

  Copier
• Connectez-vous à la console de gestion AWS

  Ouvrez la console de gestion AWS dans une nouvelle fenêtre de navigateur afin de garder ce guide détaillé ouvert. Lorsque l'écran s'affiche, saisissez votre nom d'utilisateur et votre mot de passe pour démarrer. Saisissez ensuite Amplify dans la barre de recherche, et sélectionnez AWS Amplify pour ouvrir la console de service.
  

  

• Déployer votre application avec AWS Amplify

  Dans cette étape, vous connecterez le référentiel GitHub que vous venez de créer au service AWS Amplify. Cela vous permettra de construire, de déployer et d’héberger votre application sur AWS.

  a. Dans la console de service AWS Amplify, sélectionnez Mise en route sous Hébergement Amplify.
  

  

  b. Sélectionnez GitHub comme service de référentiel, puis sélectionnez Continuer.

  

  c. Authentifiez-vous sur GitHub et revenez à la console Amplify. Choisissez le référentiel et la branche principale créés précédemment, puis sélectionnez Suivant.
  

  

  d. Acceptez les paramètres de construction par défaut et sélectionnez Suivant.

  

  e. Passez en revue les informations finales, puis sélectionnez Enregistrer et déployer.
  

  

  f. AWS Amplify va maintenant créer votre code source et déployer votre application sur https://...amplifyapp.com.
  

  

  g. Une fois la construction terminée, sélectionnez l’onglet pour afficher votre application en cours de fonctionnement. 

  

• Déploiement automatique des modifications de code

  Dans cette étape, vous allez apporter quelques modifications au code en utilisant votre éditeur de texte et les envoyer à la branche principale de votre application.

  a. Modifiez src/App.js avec le code ci-dessous et enregistrez.
  

  import React from 'react';
  import logo from './logo.svg';
  import './App.css';
  
  function App() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1>Hello from V2</h1>
        </header>
      </div>
    );
  }
  
  export default App;

  Code snippet copied

  Copier

  b. Envoyez les modifications à GitHub dans l'invite de commande (Windows) ou Terminal (macOS) pour lancer automatiquement une nouvelle version : 

  git add .
  git commit -m “changes for v2”
  git push origin main

  Code snippet copied

  Copier

  c. Une fois la construction terminée, sélectionnez l'onglet dans la console AWS Amplify pour afficher votre application mise à jour.