Implementación

• Cree una nueva aplicación de React

  La manera más simple de crear una aplicación de React es con el comando create-react-app. Instale este paquete utilizando el siguiente comando en el símbolo del sistema o el terminal:

  npx create-react-app amplifyapp
  cd amplifyapp
  npm start

• Inicie el repositorio de GitHub

  En este paso, creará un repositorio de GitHub, a donde luego enviará el código. Para completar este paso necesitará una cuenta de GitHub; si no tiene una, regístrese aquí.

  a. Cree un nuevo repositorio de GitHub para su aplicación (enlace)

  

  b. Inicie Git y, para enviar la aplicación al nuevo repositorio de GitHub, ejecute los siguientes comandos en la interfaz de línea de comandos:

  git init
  git remote add origin git@github.com:username/reponame.git
  git add .
  git commit -m “initial commit”
  git push origin master

• Inicie sesión en la consola de administración de AWS

  Abra la consola de administración de AWS en una nueva ventana del navegador para poder tener abierta esta guía paso a paso. Cuando la pantalla se cargue, escriba su nombre de usuario y contraseña para comenzar. A continuación, escriba “Amplify” en la barra de búsqueda y seleccione AWS Amplify para abrir la consola del servicio.
  

  

• Implemente su aplicación con AWS Amplify

  En este paso, conectará el repositorio de GitHub que acaba de crear al servicio AWS Amplify. Esto le permitirá crear, implementar y alojar la aplicación en AWS.

  a. En la consola de servicio AWS Amplify, seleccione "Get Started" (Comenzar) en Deploy (Implementar).
  

  

  b. Seleccione GitHub como el servicio de repositorio y, luego, Continue (Continuar).

  

  c. Autentique con GitHub y regrese a la consola de Amplify. Elija el repositorio y la ramificación principal que creó antes y seleccione Next (Siguiente).
  

  

  d. Acepte la configuración de recopilación predeterminada y seleccione Next (Siguiente).

  

  e. Revise los detalles finales y seleccione Save and Deploy (Guardar e implementar).
  

  

  f. Ahora AWS Amplify creará el código fuente e implementará la aplicación en https://...amplifyapp.com.
  

  

  g. Una vez que la compilación finalice, seleccione la imagen en miniatura para ver la aplicación web en funcionamiento. 

  

• Implemente automáticamente los cambios en el código

  En este paso, hará algunos cambios en el código utilizando el editor de texto y enviará los cambios a la ramificación principal de su aplicación.

  a. Edite src/App.js con el siguiente código y guarde.
  

  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;

  b. Envíe los cambios a GitHub en el símbolo del sistema (Windows) o en el terminal (macOS) para iniciar automáticamente una nueva creación: 

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

  c. Cuando la compilación finalice, seleccione la imagen en miniatura en la consola de AWS Amplify para ver la aplicación actualizada.