Tutorial: Criar e atualizar uma aplicação React - Amazon CodeCatalyst
Pré-requisitosEtapa 1: criar um esquema personalizadoEtapa 2: visualizar o fluxo de trabalho de lançamentoEtapa 3: adicionar esquema ao catálogoEtapa 4: criar projeto com esquemaEtapa 5: atualizar o esquemaEtapa 6: atualizar a versão publicada do catálogo do esquema para a nova versãoEtapa 7: atualizar projeto com a nova versão do esquemaEtapa 8: visualizar as alterações no projeto

A Amazon não CodeCatalyst está mais aberta a novos clientes. Os clientes atuais podem continuar usando o serviço normalmente. Para obter mais informações, consulte Como migrar do CodeCatalyst.

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

Tutorial: Criar e atualizar uma aplicação React

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

Este tutorial fornece um passo a passo do ponto de vista do autor e do usuário do esquema. O tutorial mostra como criar um esquema de aplicação web de página única do React. O esquema é usado para criar um projeto. Quando o esquema é atualizado com alterações, o projeto criado a partir do esquema incorpora essas alterações por meio de uma solicitação pull.

Pré-requisitos

Para criar e atualizar um esquema personalizado, você deve ter concluído as tarefas descritas em Configuração e login no CodeCatalyst da seguinte forma:

Etapa 1: criar um esquema personalizado

Quando você cria um esquema personalizado, é criado um projeto do CodeCatalyst que contém o código-fonte e as ferramentas e os recursos de desenvolvimento do esquema. Você desenvolverá, testará e publicará o esquema no projeto.

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

  2. No console do CodeCatalyst, acesse o espaço onde você deseja criar um esquema.

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

  4. Na guia Configurações de espaço, escolha Esquemas e Criar esquema.

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

    • Em Nome do esquema, insira react-app-blueprint.

    • Em Nome de exibição do esquema, insira react-app-blueprint.

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

  7. Escolha Criar esquema.

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

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

    No painel de navegação, escolha Código e Ambientes de Desenvolvimento.

  10. Escolha Criar ambiente de desenvolvimento e AWS Cloud9 (no navegador).

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

  12. No terminal do AWS Cloud9, acesse o diretório do projeto do esquema e execute o seguinte comando:

    cd react-app-blueprint

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

    Exclua a pasta static-assets executando o seguinte comando:

    rm -r static-assets

    O AWS Cloud9 é desenvolvido em uma plataforma baseada em Linux. Se estiver usando um sistema operacional Windows, você poderá usar o seguinte comando:

    rmdir /s /q static-assets

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

    npx create-react-app static-assets

    Se solicitado, insira y para continuar.

    Uma nova aplicação react foi criada na pasta static-assets com os pacotes necessários. As alterações precisam ser enviadas ao repositório de origem remoto do CodeCatalyst.

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

    git pull
    git add .
    git commit -m "Add React app to static-assets"
    git push

Quando uma alteração é enviada ao repositório de origem do esquema, o fluxo de trabalho de lançamento é iniciado automaticamente. Esse fluxo de trabalho aumenta a versão do esquema, cria o esquema e o publica no espaço. Na próxima etapa, você acessará a execução do fluxo de trabalho da versão para ver como está.

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

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

  2. Escolha o fluxo de trabalho blueprint-release.

  3. O fluxo de trabalho tem ações para criar e publicar o esquema.

  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, a nova versão do esquema será publicada. As versões publicadas do esquema podem ser vistas nas Configurações do espaço, mas não podem ser usadas em projetos até serem adicionadas ao catálogo de esquemas do espaço. Na próxima etapa, você adicionará o esquema ao catálogo.

Etapa 3: adicionar esquema ao catálogo

Adicionar um esquema ao catálogo do espaço o torna disponível para uso em todos os projetos em um espaço. Os membros do espaço podem usar o esquema para criar novos projetos ou adicioná-lo aos projetos existentes.

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

  2. Escolha Configurações e Esquemas.

  3. Escolha react-app-blueprint e Adicionar ao catálogo.

  4. Escolha Salvar.

Etapa 4: criar projeto com esquema

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

  1. Escolha a guia Projetos e Criar projeto.

  2. Escolha Esquemas do espaço e react-app-blueprint.

    nota

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

  3. Escolha Próximo.

  4. nota

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

    Insira o nome do projeto como usuário do esquema. Para este tutorial, insira react-app-project. Para obter mais informações, consulte Desenvolvimento de um esquema personalizado para satisfazer os requisitos do projeto.

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

Etapa 5: atualizar o esquema

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

  1. Navegue até o projeto react-app-blueprint criado em Tutorial: Criar e atualizar uma aplicação React.

  2. Abra o Ambiente de Desenvolvimento criado em Tutorial: Criar e atualizar uma aplicação React.

    1. No painel de navegação, escolha Código e Ambientes de desenvolvimento.

    2. Na tabela, localize o Ambiente de Desenvolvimento e escolha Abrir n AWS Cloud9 (no navegador).

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

    git pull

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

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

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

    touch hello-world.txt

    O AWS Cloud9 é desenvolvido em uma plataforma baseada em Linux. Se estiver usando um sistema operacional Windows, você poderá usar o seguinte comando:

    echo > hello-world.text

  6. No painel de navegação à esquerda, clique duas vezes no arquivo hello-world.txt 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, depois, confirme e envie as alterações para o repositório de origem do CodeCatalyst do esquema 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 esquema no espaço.

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

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

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

  2. Escolha Configurações e Esquemas.

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

  4. Escolha a nova versão e Salvar.

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

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

  1. No console do CodeCatalyst, navegue até o projeto react-app-project criado em Etapa 4: criar projeto com esquema.

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

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

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

  5. Escolha Aplicar atualização.

Escolher Aplicar atualização cria uma solicitação pull no projeto com as alterações da versão atualizada do esquema. Para fazer as atualizações no projeto, você deve mesclar a solicitação pull. Para obter mais informações, consulte Revisão de uma solicitação pull e Mesclar uma solicitação pull.

  1. Na tabela Esquemas, encontre o esquema. Na coluna Status, escolha Solicitação pull pendente e, depois, escolha o link para a solicitação pull aberta.

  2. Revise a solicitação pull e escolha Mesclar.

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

Etapa 8: visualizar as alterações no projeto

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

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

  2. Em Arquivos, você pode visualizar o arquivo hello-world.txt que foi criado em Etapa 5: atualizar o esquema.

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

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