Realizza un'applicazione React full-stack

Implementazione

• Creazione di una nuova applicazione React

  Il modo più semplice per creare un'applicazione React consiste nell'utilizzare il comando create-react-app. Installa questo pacchetto con il comando seguente nel prompt dei comandi o nel terminale.

  npx create-react-app amplifyapp
  cd amplifyapp
  npm start

  Code snippet copied

  Copia
• Inizializzazione del repository GitHub

  In questa fase creerai un repository GitHub ed eseguirai il commit del tuo codice al repository. Avrai bisogno di un account GitHub per completare questa fase. Se non disponi di un account, registrati qui.

  a. Crea un nuovo repository GitHub per la tua applicazione.
  

  

  b. Apri un nuovo terminale e torna alla cartella principale dell'app, ad esempio amplifyapp.

  c. L'uso di create-react-app inizializzerà automaticamente il repository git ed effettuerà un commit iniziale. Se stai cercando di distribuire un'applicazione React esistente in cui git non è stato inizializzato, assicurati di inserire i seguenti comandi prima di continuare:

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

  Code snippet copied

  Copia

  d. Se non hai mai usato GitHub sul tuo computer, segui questi passaggi prima di continuare a consentire la connessione al tuo account.
  

  Invia l'applicazione al nuovo repository GitHub eseguendo i comandi seguenti nell'interfaccia a riga di comando:

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

  Code snippet copied

  Copia
• Accedi alla Console di gestione AWS.

  Apri la Console di gestione AWS in una nuova finestra del browser, tenendo aperta questa guida dettagliata. Quando viene caricata la schermata, inserisci nome utente e password per iniziare. Quindi, immetti Amplify nella barra di ricerca e seleziona AWS Amplify per aprire la console di servizio.
  

  

• Distribuzione dell'applicazione con AWS Amplify

  In questa fase, collegherai il repository GitHub appena creato al servizio AWS Amplify. Ciò ti consente di creare, distribuire e ospitare l'app in AWS.

  a. Nella console del servizio AWS Amplify, seleziona Inizia in Amplify Hosting.
  

  

  b. Seleziona GitHub come servizio di repository e seleziona Continua.

  

  c. Esegui l'autenticazione con GitHub e torna alla console Amplify. Scegli il repository e il ramo principale creati precedentemente, quindi seleziona Successivo.
  

  

  d. Accetta le impostazioni predefinite della build e seleziona Successivo.

  

  e. Rivedi i dettagli finali e seleziona Salva e implementa.
  

  

  f. Adesso in AWS Amplify verrà creato il codice sorgente e l'app sarà distribuita a https://...amplifyapp.com.
  

  

  g. Una volta completata la build, seleziona la miniatura visualizzata sull'app attualmente in funzione. 

  

• Implementazione automatica delle modifiche al codice

  In questa fase, apporterai alcune modifiche al codice usando l'editor di testo e le invierai al ramo principale dell'applicazione.

  a. Modifica src/App.js con il codice seguente e salva.
  

  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

  Copia

  b. Apporta le modifiche a GitHub nel prompt dei comandi (Windows) o nel terminale (macOS) per avviare automaticamente una nuova build: 

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

  Code snippet copied

  Copia

  c. Una volta completata la build, seleziona la miniatura sulla console AWS Amplify per visualizzare l'app aggiornata.