Tutorial: creazione e aggiornamento di un'applicazione React

In qualità di autore di progetti, puoi sviluppare e aggiungere progetti personalizzati al catalogo dei blueprint del tuo spazio. Questi blueprint possono quindi essere utilizzati dai membri dello spazio per creare nuovi progetti o aggiungerli a progetti esistenti. Puoi continuare ad apportare modifiche ai tuoi blueprint che vengono poi resi disponibili come aggiornamenti tramite pull request.

Questo tutorial fornisce una guida dettagliata dal punto di vista dell'autore del blueprint e dal punto di vista dell'utente del blueprint. Il tutorial mostra come creare un progetto di applicazione web React a pagina singola. Il blueprint viene quindi utilizzato per creare un nuovo progetto. Quando il blueprint viene aggiornato con le modifiche, il progetto creato dal blueprint incorpora tali modifiche tramite una pull request.

Prerequisiti

Per creare e aggiornare un blueprint personalizzato, è necessario aver completato le attività seguenti: Configura e accedi a CodeCatalyst

• Disponi di un ID AWS Builder a cui accedere. CodeCatalyst

• Appartenete a uno spazio e fatevi assegnare il ruolo di amministratore dello spazio o Power user in quello spazio. Per ulteriori informazioni, consulta Creare uno spazio, Concessione delle autorizzazioni di spazio agli utenti e Ruolo di amministratore dello spazio.

Fase 1: Creare un blueprint personalizzato

Quando si crea un blueprint personalizzato, viene creato un CodeCatalyst progetto che contiene il codice sorgente del blueprint e gli strumenti e le risorse di sviluppo. Il progetto è il luogo in cui svilupperai, testerai e pubblicherai il blueprint.

1. Apri la CodeCatalyst console all'indirizzo https://codecatalyst.aws/.

2. Nella CodeCatalyst console, accedi allo spazio in cui desideri creare un blueprint.

3. Scegli Impostazioni per accedere alle impostazioni dello spazio.

4. Nella scheda Impostazioni dello spazio, scegli Blueprint e scegli Crea blueprint.

5. Aggiorna i campi nella procedura guidata di creazione del blueprint con i seguenti valori:

   • Nel nome del progetto, immettere. react-app-blueprint

   • In Blueprint Display Name, immettere. react-app-blueprint

6. Facoltativamente, scegli Visualizza codice per visualizzare in anteprima il codice sorgente del blueprint per il tuo blueprint. Allo stesso modo, scegli Visualizza flusso di lavoro per visualizzare in anteprima il flusso di lavoro che verrà creato nel progetto che crea e pubblica il blueprint.

7. Scegli Crea progetto.

8. Una volta creato il blueprint, verrai indirizzato al progetto del blueprint. Questo progetto contiene il codice sorgente del blueprint, insieme agli strumenti e alle risorse necessari per sviluppare, testare e pubblicare il blueprint. È stato generato un flusso di lavoro di rilascio che ha pubblicato automaticamente il blueprint nello spazio.

9. Ora che il blueprint e il progetto blueprint sono stati creati, il passaggio successivo consiste nel configurarli aggiornando il codice sorgente. È possibile utilizzare Dev Environments per aprire e modificare il repository dei sorgenti direttamente nel browser.

   Nel pannello di navigazione, scegli Codice, quindi scegli Dev Environments.

10. Scegli Crea ambiente di sviluppo, quindi scegli AWS Cloud9 (nel browser).

11. Mantieni le impostazioni predefinite e scegli Crea.

12. Nel AWS Cloud9 terminale, accedi alla directory del tuo progetto blueprint eseguendo il seguente comando:

    cd react-app-blueprint

13. Una static-assets cartella viene creata e riempita automaticamente quando viene creato un blueprint. In questo tutorial, eliminerai la cartella predefinita e ne genererai una nuova per un blueprint di app React.

    Elimina la cartella static-assets eseguendo il seguente comando:

    rm -r static-assets

    AWS Cloud9 è costruito su una piattaforma basata su Linux. Se utilizzi un sistema operativo Windows, puoi invece utilizzare il seguente comando:

    rmdir /s /q static-assets

14. Ora che la cartella predefinita è stata eliminata, crea una static-assets cartella per un blueprint di react-app eseguendo il comando seguente:

    npx create-react-app static-assets

    Se richiesto, inserisci per procedere. y

    Una nuova applicazione React è stata creata nella static-assets cartella con i pacchetti necessari. Le modifiche devono essere trasferite nel repository dei CodeCatalyst sorgenti remoti.

15. Assicurati di avere le modifiche più recenti, quindi esegui il commit e invia le modifiche all'archivio dei CodeCatalyst sorgenti del blueprint eseguendo i seguenti comandi:

    git pull

    git add .

    git commit -m "Add React app to static-assets"

    git push

Quando una modifica viene inserita nell'archivio dei sorgenti del blueprint, il flusso di lavoro di rilascio viene avviato automaticamente. Questo flusso di lavoro incrementa la versione del blueprint, crea il blueprint e lo pubblica nel tuo spazio. Nel passaggio successivo, passerai al flusso di lavoro di rilascio eseguito per vedere come sta andando.

Passaggio 2: Visualizza il flusso di lavoro di rilascio

1. Nella CodeCatalyst console, nel riquadro di navigazione, scegli CI/CD, quindi scegli Flussi di lavoro.

2. Scegli il flusso di lavoro Blueprint-Release.

3. Puoi vedere che il flusso di lavoro include azioni per creare e pubblicare il blueprint.

4. In Ultima esecuzione, scegli il link di esecuzione del flusso di lavoro per visualizzare l'esecuzione in base alla modifica del codice che hai apportato.

5. Una volta completata l'esecuzione, viene pubblicata la nuova versione del blueprint. Le versioni pubblicate dei blueprint possono essere visualizzate nelle Impostazioni dello spazio, ma non possono essere utilizzate nei progetti finché non vengono aggiunte al catalogo dei blueprint dello spazio. Nel passaggio successivo, aggiungerai il blueprint al catalogo.

Fase 3: Aggiungere il blueprint al catalogo

L'aggiunta di un blueprint al catalogo dei blueprint dello spazio rende il blueprint disponibile per l'uso in tutti i progetti in uno spazio. I membri dello spazio possono utilizzare il blueprint per creare nuovi progetti o aggiungerli a progetti esistenti.

1. Nella CodeCatalyst console, torna allo spazio.

2. Scegli Impostazioni, quindi scegli Blueprints.

3. Scegli react-app-blueprint, quindi scegli Aggiungi al catalogo.

4. Selezionare Salva.

Passaggio 4: Crea un progetto con blueprint

Ora che il blueprint è stato aggiunto al catalogo, può essere utilizzato nei progetti. In questo passaggio, creerai un progetto con il blueprint appena creato. In una fase successiva, aggiornerai questo progetto aggiornando e pubblicando una nuova versione del blueprint.

1. Scegli la scheda Progetti, quindi scegli Crea progetto.

2. Scegli Space blueprint, quindi scegli react-app-blueprint.

   Nota

   Una volta scelto il blueprint, puoi vedere il contenuto del file del blueprint. README.md

3. Seleziona Successivo.

4. Nota

   Il contenuto di questa procedura guidata per la creazione del progetto può essere configurato nel blueprint.

   Immettete il nome del progetto come utente del blueprint. Per questo tutorial, digita react-app-project. Per ulteriori informazioni, consulta Sviluppo di un modello personalizzato per soddisfare i requisiti del progetto.

Successivamente, effettuerai un aggiornamento del blueprint e aggiungerai la nuova versione al catalogo, che utilizzerai per aggiornare questo progetto.

Fase 5: Aggiornare il blueprint

Dopo aver utilizzato un blueprint per creare un nuovo progetto o averlo applicato a progetti esistenti, puoi continuare ad apportare aggiornamenti come autore del blueprint. In questo passaggio, apporterai modifiche al blueprint e pubblicherai automaticamente una nuova versione nello spazio. La nuova versione può quindi essere aggiunta come versione del catalogo.

1. Vai al react-app-blueprintprogetto creato inTutorial: creazione e aggiornamento di un'applicazione React.

2. Apri l'ambiente di sviluppo creato inTutorial: creazione e aggiornamento di un'applicazione React.

   1. Nel riquadro di navigazione, scegli Codice, quindi scegli Dev Environments.

   2. Nella tabella, individua l'ambiente di sviluppo, quindi scegli Apri in AWS Cloud9 (nel browser).

3. Quando è stato eseguito il workflow di rilascio del blueprint, la versione del blueprint è stata incrementata aggiornando il file. package.json Effettua la modifica eseguendo il seguente comando nel terminale: AWS Cloud9

   git pull

4. Passa alla static-assets cartella eseguendo il seguente comando:

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

5. Crea un hello-world.txt file nella static-assets cartella eseguendo il seguente comando:

   touch hello-world.txt

   AWS Cloud9 è costruito su una piattaforma basata su Linux. Se utilizzi un sistema operativo Windows, puoi invece utilizzare il seguente comando:

   echo > hello-world.text

6. Nella barra di navigazione a sinistra, fai doppio clic sul hello-world.txt file per aprirlo nell'editor e aggiungi i seguenti contenuti:

   Hello, world!

   Salvare il file.

7. Assicurati di avere le modifiche più recenti, quindi esegui il commit e invia le modifiche all'archivio dei CodeCatalyst sorgenti del blueprint eseguendo i seguenti comandi:

   git pull

   git add .

   git commit -m "prettier setup"

   git push

L'invio delle modifiche ha avviato il flusso di lavoro di rilascio, che pubblicherà automaticamente la nuova versione del blueprint nello spazio.

Passaggio 6: Aggiornare la versione del catalogo pubblicata del progetto alla nuova versione

Dopo aver utilizzato un blueprint per creare un nuovo progetto o averlo applicato a progetti esistenti, è comunque possibile aggiornare il blueprint come autore del blueprint. In questo passaggio, apporterai modifiche al blueprint e cambierai la versione del catalogo del blueprint.

1. Nella CodeCatalyst console, torna allo spazio.

2. Scegli Impostazioni, quindi scegli Blueprints.

3. Scegli react-app-blueprint, quindi scegli Gestisci la versione del catalogo.

4. Scegli la nuova versione, quindi scegli Salva.

Passaggio 7: Aggiorna il progetto con la nuova versione del blueprint

Una nuova versione è ora disponibile nel catalogo dei progetti dello spazio. Come utente del blueprint, puoi aggiornare la versione del progetto creato in. Passaggio 4: Crea un progetto con blueprint In questo modo avrai la certezza di disporre delle ultime modifiche e correzioni necessarie per soddisfare le best practice.

1. Nella CodeCatalyst console, vai al react-app-projectprogetto creato inPassaggio 4: Crea un progetto con blueprint.

2. Nel pannello di navigazione scegli Blueprints (Progetti).

3. Scegli Aggiorna blueprint nella casella delle informazioni.

4. Nel pannello a destra delle modifiche al codice, puoi vedere hello-world.txt gli package.json aggiornamenti.

5. Scegli Applica aggiornamento.

La scelta di Applica aggiornamento crea una pull request nel progetto con le modifiche rispetto alla versione aggiornata del blueprint. Per apportare gli aggiornamenti al progetto, è necessario unire la pull request. Per ulteriori informazioni, consulta Revisione di una pull request e Unire una pull request.

1. Nella tabella Blueprints, trova il blueprint. Nella colonna Stato, scegli Pending pull request, quindi scegli il link alla pull request aperta.

2. Controlla la pull request, quindi scegli Merge.

3. Scegliete Fast forward merge per mantenere i valori predefiniti, quindi scegliete Merge.

Passaggio 8: Visualizza le modifiche nel progetto

Le modifiche al blueprint sono ora disponibili nel progetto in seguitoPassaggio 7: Aggiorna il progetto con la nuova versione del blueprint. In qualità di utente del blueprint, è possibile visualizzare le modifiche nell'archivio di origine.

1. Nel riquadro di navigazione, scegli Archivi di origine, quindi scegli il nome del repository di origine creato al momento della creazione del progetto.

2. In File, puoi visualizzare il hello-world.txt file creato in. Fase 5: Aggiornare il blueprint

3. Scegli hello-world.txt per visualizzare il contenuto del file.

La gestione del ciclo di vita offre agli autori di blueprint la possibilità di gestire centralmente il ciclo di vita di sviluppo del software di ogni progetto che contiene un particolare blueprint. Come illustrato in questo tutorial, è possibile inviare aggiornamenti al blueprint che possono quindi essere incorporati da progetti che hanno utilizzato il blueprint per creare un nuovo progetto o lo hanno applicato a un progetto esistente. Per ulteriori informazioni, consulta Lavorare con la gestione del ciclo di vita come autore di progetti.