Criar uma aplicação React de pilha completa

Implementação

• Criar uma nova aplicação React

  A maneira mais fácil de criar uma aplicação React é usando o comando create-react-app. Instale este pacote usando o comando a seguir no prompt de comando ou terminal:

  npx create-react-app amplifyapp
  cd amplifyapp
  npm start

  Code snippet copied

  Copiar
• Inicialize o repositório do GitHub

  Nesta etapa, você criará um repositório do GitHub e confirmará o seu código no repositório. Você precisará de uma conta no GitHub para concluir esta etapa. Se você não tiver uma conta, inscreva-se aqui.

  a. Crie um novo repositório GitHub para sua aplicação.
  

  

  b. Abra um novo terminal e volte para a pasta raiz da aplicação, por exemplo, amplifyapp.

  c. O uso do create-react-app inicializará automaticamente o repositório git e fará uma confirmação inicial. Se você estiver tentando implantar uma aplicação React existente em que o git não tenha sido inicializado, insira os seguintes comandos antes de continuar:

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

  Code snippet copied

  Copiar

  d. Se você nunca usou o GitHub em seu computador, siga estas etapas antes de continuar a permitir a conexão com sua conta.
  

  Envie a aplicação ao novo repositório do GitHub executando os seguintes comandos na interface da linha de comandos:

  git remote add origin [email protected]:username/reponame.git
  git branch -M main
  git push -u origin main

  Code snippet copied

  Copiar
• Faça login no Console de Gerenciamento da AWS

  Abra o Console de Gerenciamento da AWS em uma nova janela do navegador para manter aberto este guia detalhado. Quando a tela carregar, insira seu nome de usuário e senha para começar. Em seguida, digite Amplify na barra de pesquisa e selecione AWS Amplify para abrir o console de serviço.
  

  

• Implantar aplicativo com o AWS Amplify

  Nesta etapa, você conectará o repositório do GitHub que acabou de criar ao serviço do AWS Amplify. Isso permitirá que você crie, implante e hospede seu aplicativo na AWS.

  a. No console de serviço do AWS Amplify, selecione Comece a usar em Amplify Hosting
  

  

  b. Selecione o GitHub como o repositório de serviço e Continue (Continuar).

  

  c. Autentique no GitHub e retorne ao console do Amplify. Escolha o repositório e a ramificação principal que você criou anteriormente e selecione Avançar.
  

  

  d. Aceite as configurações de compilação padrão e selecione Next (Avançar).

  

  e. Revise os detalhes finais e selecione Salvar e implantar.
  

  

  f. O AWS Amplify agora criará seu código-fonte e implantará seu aplicativo em https://...amplifyapp.com.
  

  

  g. Depois que a compilação for concluída, selecione a miniatura para ver seu aplicativo Web em funcionamento. 

  

• Implantar automaticamente as alterações de código

  Nesta etapa, você fará algumas alterações no código usando o editor de texto e enviará as alterações para a ramificação principal da sua aplicação.

  a. Edite src/App.js com o código abaixo e salve.
  

  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

  Copiar

  b. Envie as alterações para GitHub no prompt de comando (Windows) ou terminal (macOS) para iniciar automaticamente uma nova compilação: 

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

  Code snippet copied

  Copiar

  c. Depois que a compilação for concluída, selecione a miniatura no console do AWS Amplify para visualizar a aplicação atualizada.