Tutorial: Criando e atualizando um aplicativo React

Como autor de plantas, você pode desenvolver e adicionar plantas personalizadas ao catálogo de plantas do seu espaço. Esses esquemas podem então ser usados pelos membros do espaço para criar novos projetos ou adicioná-los a projetos existentes. Você pode continuar fazendo alterações em seus blueprints, que são então disponibilizadas como atualizações por meio de pull requests.

Este tutorial fornece um passo a passo a partir da perspectiva do autor do projeto e da perspectiva do usuário do projeto. O tutorial mostra como criar um blueprint de aplicativo web de página única do React. O blueprint é então usado para criar um novo projeto. Quando o blueprint é atualizado com alterações, o projeto criado a partir do blueprint incorpora essas alterações por meio de uma pull request.

Pré-requisitos

Para criar e atualizar um blueprint personalizado, você deve ter concluído as tarefas da Configure e faça login em CodeCatalyst seguinte forma:

• Tenha um ID de AWS construtor para fazer login CodeCatalyst.

• Pertença a um espaço e tenha a função de administrador do espaço ou usuário avançado atribuída a você nesse espaço. Para obter mais informações, consulte Criando um espaço, Concedendo permissões de espaço aos usuários e Função de administrador de espaço.

Etapa 1: criar um blueprint personalizado

Quando você cria um blueprint personalizado, é criado um CodeCatalyst projeto que contém o código-fonte e as ferramentas e recursos de desenvolvimento do seu blueprint. Seu projeto é onde você desenvolverá, testará e publicará o plano.

1. Abra o CodeCatalyst console em https://codecatalyst.aws/.

2. No CodeCatalyst console, navegue até o espaço em que você deseja criar um blueprint.

3. Escolha Configurações para navegar até as configurações de espaço.

4. Na guia Configurações de espaço, escolha Blueprints e escolha Criar blueprint.

5. Atualize os campos no assistente de criação de blueprint com os seguintes valores:

   • Em Nome do blueprint, insirareact-app-blueprint.

   • Em Nome de exibição do Blueprint, insirareact-app-blueprint.

6. Opcionalmente, escolha Exibir código para visualizar o código-fonte do blueprint para seu blueprint. Da mesma forma, escolha Exibir fluxo de trabalho para visualizar o fluxo de trabalho que será criado no projeto que cria e publica o blueprint.

7. Escolha Criar blueprint.

8. Depois que seu blueprint é criado, você é levado ao projeto do blueprint. Esse projeto contém o código-fonte do blueprint, junto com as ferramentas e os recursos necessários para desenvolver, testar e publicar o blueprint. Um fluxo de trabalho de lançamento foi gerado e publicou automaticamente seu blueprint no espaço.

9. Agora que seu blueprint e seu projeto de blueprint foram criados, a próxima etapa é configurá-los atualizando o código-fonte. Você pode usar Dev Environments para abrir e editar seu repositório de origem diretamente no seu navegador.

   No painel de navegação, escolha Código e, em seguida, escolha Dev Environments.

10. Escolha Create Dev Environment e, em seguida, escolha AWS Cloud9 (no navegador).

11. Mantenha as configurações padrão e escolha Criar.

12. No AWS Cloud9 terminal, navegue até o diretório do projeto blueprint executando o seguinte comando:

    cd react-app-blueprint

13. Uma static-assets pasta é criada e preenchida automaticamente quando um blueprint é criado. Neste tutorial, você excluirá a pasta padrão e gerará uma nova para um blueprint do aplicativo react.

    Exclua a pasta static-assets executando o seguinte comando:

    rm -r static-assets

    AWS Cloud9 é construído em uma plataforma baseada em Linux. Se você estiver usando um sistema operacional Windows, poderá usar o seguinte comando em vez disso:

    rmdir /s /q static-assets

14. Agora que a pasta padrão foi excluída, crie uma static-assets pasta para um blueprint do react-app executando o seguinte comando:

    npx create-react-app static-assets

    Se solicitado, insira y para continuar.

    Um novo aplicativo react foi criado na static-assets pasta com os pacotes necessários. As alterações precisam ser enviadas para seu repositório CodeCatalyst de origem remoto.

15. Verifique se você tem as alterações mais recentes e, em seguida, confirme e envie as alterações para o repositório de CodeCatalyst origem do blueprint executando os seguintes comandos:

    git pull

    git add .

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

    git push

Quando uma alteração é enviada para o repositório de origem do blueprint, o fluxo de trabalho de lançamento é iniciado automaticamente. Esse fluxo de trabalho incrementa a versão do blueprint, cria o blueprint e o publica em seu espaço. Na próxima etapa, você navegará até a execução do fluxo de trabalho de lançamento para ver como está o desempenho.

Etapa 2: Visualizar o fluxo de trabalho de lançamento

1. No CodeCatalyst console, no painel de navegação, escolha CI/CD e, em seguida, escolha Fluxos de trabalho.

2. Escolha o fluxo de trabalho de lançamento do blueprint-release.

3. Você pode ver que o fluxo de trabalho tem ações para criar e publicar o blueprint.

4. Em Última execução, escolha o link de execução do fluxo de trabalho para visualizar a execução a partir da alteração de código que você fez.

5. Depois que a execução for concluída, sua nova versão do blueprint será publicada. As versões publicadas do blueprint podem ser vistas nas Configurações do seu espaço, mas não podem ser usadas em projetos até serem adicionadas ao catálogo de blueprints do espaço. Na próxima etapa, você adicionará o blueprint ao catálogo.

Etapa 3: Adicionar um blueprint ao catálogo

Adicionar uma planta ao catálogo de plantas do espaço torna a planta disponível para uso em todos os projetos em um espaço. Os membros do espaço podem usar o blueprint para criar novos projetos ou adicioná-los aos projetos existentes.

1. No CodeCatalyst console, navegue de volta para o espaço.

2. Escolha Configurações e, em seguida, escolha Blueprints.

3. Escolha e react-app-blueprint, em seguida, escolha Adicionar ao catálogo.

4. Escolha Salvar.

Etapa 4: criar um projeto com o blueprint

Agora que o blueprint foi adicionado ao catálogo, ele pode ser usado em projetos. Nesta etapa, você criará um projeto com o blueprint que acabou de criar. Em uma etapa posterior, você atualizará esse projeto atualizando e publicando uma nova versão do blueprint.

1. Escolha a guia Projetos e, em seguida, escolha Criar projeto.

2. Escolha Space blueprints e, em seguida, escolha react-app-blueprint.

   nota

   Depois que o blueprint for escolhido, você poderá ver o conteúdo do arquivo do blueprint. README.md

3. Escolha Próximo.

4. nota

   O conteúdo desse assistente de criação de projeto pode ser configurado no blueprint.

   Insira o nome do projeto como usuário do blueprint. Para este tutorial, insira react-app-project. Para ter mais informações, consulte Desenvolvendo um plano personalizado para atender aos requisitos do projeto.

Em seguida, você atualizará o blueprint e adicionará a nova versão ao catálogo, que será usada para atualizar esse projeto.

Etapa 5: Atualizar o blueprint

Depois que um blueprint é usado para criar um novo projeto ou aplicado a projetos existentes, você pode continuar fazendo atualizações como autor do blueprint. Nesta etapa, você fará alterações no blueprint e publicará automaticamente uma nova versão no espaço. A nova versão pode então ser adicionada como a versão do catálogo.

1. Navegue até o react-app-blueprintprojeto criado emTutorial: Criando e atualizando um aplicativo React.

2. Abra o ambiente de desenvolvimento criado emTutorial: Criando e atualizando um aplicativo React.

   1. No painel de navegação, escolha Código e, em seguida, escolha Dev Environments.

   2. Na tabela, localize o Dev Environment e escolha Abrir em AWS Cloud9 (no navegador).

3. Quando o fluxo de trabalho de lançamento do blueprint foi executado, ele incrementou a versão do blueprint atualizando o arquivo. package.json Faça essa alteração executando o seguinte comando no AWS Cloud9 terminal:

   git pull

4. Navegue até a static-assets pasta executando o seguinte comando:

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

5. Crie um hello-world.txt arquivo na static-assets pasta executando o seguinte comando:

   touch hello-world.txt

   AWS Cloud9 é construído em uma plataforma baseada em Linux. Se você estiver usando um sistema operacional Windows, poderá usar o seguinte comando em vez disso:

   echo > hello-world.text

6. Na navegação à esquerda, clique duas vezes no hello-world.txt arquivo para abri-lo no editor e adicione o seguinte conteúdo:

   Hello, world!

   Salve o arquivo.

7. Verifique se você tem as alterações mais recentes e, em seguida, confirme e envie as alterações para o repositório de CodeCatalyst origem do blueprint executando os seguintes comandos:

   git pull

   git add .

   git commit -m "prettier setup"

   git push

O envio das alterações iniciou o fluxo de trabalho de lançamento, que publicará automaticamente a nova versão do blueprint no espaço.

Etapa 6: atualizar a versão publicada do catálogo do blueprint para a nova versão

Depois que um blueprint é usado para criar um novo projeto ou aplicado a projetos existentes, você ainda pode atualizar o blueprint como autor do blueprint. Nesta etapa, você fará alterações no blueprint e alterará a versão do catálogo do blueprint.

1. No CodeCatalyst console, navegue de volta para o espaço.

2. Escolha Configurações e, em seguida, escolha Blueprints.

3. Escolha e react-app-blueprint, em seguida, escolha Gerenciar versão do catálogo.

4. Escolha a nova versão e, em seguida, escolha Salvar.

Etapa 7: atualizar o projeto com a nova versão do blueprint

Uma nova versão já está disponível no catálogo de plantas do espaço. Como usuário do blueprint, você pode atualizar a versão do projeto criado emEtapa 4: criar um projeto com o blueprint. Isso garante que você tenha as alterações e correções mais recentes necessárias para atender às melhores práticas.

1. No CodeCatalyst console, navegue até o react-app-projectprojeto criado emEtapa 4: criar um projeto com o blueprint.

2. No painel de navegação, escolha Esquemas.

3. Escolha Atualizar blueprint na caixa de informações.

4. No painel Alterações de código do lado direito, você pode ver as package.json atualizações hello-world.txt e.

5. Escolha Aplicar atualização.

Escolher Aplicar atualização cria uma pull request no projeto com as alterações da versão atualizada do blueprint. Para fazer as atualizações no projeto, você deve mesclar a pull request. Para obter mais informações, consulte Analisando uma pull request e Mesclando uma pull request.

1. Na tabela Blueprints, encontre o blueprint. Na coluna Status, escolha pull request pendente e, em seguida, escolha o link para o pull request aberto.

2. Revise a pull request e escolha Mesclar.

3. Escolha Mesclagem rápida para manter os valores padrão e, em seguida, escolha Mesclar.

Etapa 8: Visualize as alterações no projeto

As alterações no blueprint agora estão disponíveis em seu projeto posteriormenteEtapa 7: atualizar o projeto com a nova versão do blueprint. Como usuário do blueprint, você pode visualizar as alterações no repositório de origem.

1. No painel de navegação, escolha Repositórios de origem e, em seguida, escolha o nome do repositório de origem criado quando o projeto foi criado.

2. Em Arquivos, você pode visualizar o hello-world.txt arquivo que foi criado emEtapa 5: Atualizar o blueprint.

3. Escolha a hello-world.txt para ver o conteúdo do arquivo.

O gerenciamento do ciclo de vida fornece aos autores do blueprint a capacidade de gerenciar centralmente o ciclo de vida de desenvolvimento de software de cada projeto que contém um plano específico. Conforme visto neste tutorial, você pode enviar atualizações para o blueprint que podem ser incorporadas por projetos que usaram o blueprint para criar um novo projeto ou aplicá-lo a um projeto existente. Para ter mais informações, consulte Trabalhando com o gerenciamento do ciclo de vida como autor do plano.