--- name: azion-implante-o-react-boilerplate description: >- Implante uma single-page application React na Azion pelo Azion Console, com um repositório no GitHub e uma GitHub Action que implanta cada push. --- # Implante o React Boilerplate Você pode implantar uma single-page application (SPA) React na Azion pelo Azion Console com o template React Boilerplate. O template cria um repositório no GitHub para o seu código. Ele implanta o projeto como uma [aplicação](/pt-br/documentacao/plataforma/applications/) que executa uma [função](/pt-br/documentacao/plataforma/functions/) para lógica personalizada. O boilerplate usa React `18.2.0`. ## Pré-requisitos - Uma [conta no GitHub](https://github.com/signup). O template se conecta a essa conta e cria nela o repositório. - Acesso ao Azion Console. Para entrar, consulte [Como acessar o Azion Console](/pt-br/documentacao/guias/plataforma/conta-e-billing/como-acessar-o-azion-console/). --- ## Implante o template O React Boilerplate é implantado a partir de um formulário no Azion Console, e o formulário marca cada campo obrigatório com um asterisco. A aplicação que ele cria usa Functions e [Cache](/pt-br/documentacao/plataforma/applications/como-funciona/#cache), que podem gerar custos de uso. Para conferir os valores, consulte [Preços](/pt-br/documentacao/fundamentos/precos/). Abra o formulário do template no Azion Console: [Implantar](https://console.azion.com/create/react/react-boilerplate) Para implantar o template pelo formulário: 1. **Conecte a sua conta do GitHub** Uma nova janela pede que você confirme a instalação do [Azion GitHub App](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/automacao/azion-github-app/). O app conecta a sua conta do GitHub à plataforma da Azion. 2. **Conceda acesso ao app** Nessa janela, defina as permissões e escolha os repositórios que o Azion GitHub App pode acessar. 3. **Selecione o Git scope** No formulário, selecione o Git scope com o qual o template trabalha. 4. **Nomeie a aplicação** Insira um nome único para a aplicação. A função e o bucket de armazenamento recebem o mesmo nome. Um nome que já está em uso retorna uma mensagem de erro. 5. **Inicie a implantação** Envie o formulário. Uma janela mostra os logs da implantação enquanto ela é executada. Quando a implantação termina, a página mostra as informações da aplicação e as opções para continuar. Ao final da implantação, você tem: - Um repositório no GitHub criado a partir do [exemplo do React Boilerplate](https://github.com/aziontech/azion-samples/tree/dev/templates/react/reactjs-boilerplate), com as dependências instaladas. - Uma GitHub Action nesse repositório que implanta cada push, para que a aplicação acompanhe o seu código. - Um commit no repositório que registra a versão implantada e o timestamp da implantação. - Uma aplicação na Azion Platform, com uma função para lógica personalizada e um domínio que entrega o projeto React. O template faz o build do projeto com o [adaptador de framework do Azion Bundler](/pt-br/documentacao/devtools/runtime/frameworks/compatibilidade-frameworks/). A aplicação responde em um domínio de [workload](/pt-br/documentacao/plataforma/workloads/) no formato `xxxxxxxxxx.map.azionedge.net`. A configuração leva alguns minutos para se propagar pela infraestrutura distribuída da Azion. Até lá, o link pode não mostrar a página, então aguarde alguns minutos e abra o link novamente. --- ## Abra a aplicação no Azion Console Todas as configurações que o React Boilerplate definiu continuam editáveis depois da implantação, na página da aplicação no Azion Console. Para abrir a aplicação: 1. **Abra a página Applications** Acesse [Azion Console](https://console.azion.com/) > **Applications**. A página lista todas as aplicações da conta em ordem alfabética. 2. **Busque a aplicação** Insira o nome que você deu à aplicação. A busca filtra a lista apenas pelo nome da aplicação. 3. **Selecione a aplicação** A página da aplicação abre com as configurações que o template definiu, e você pode alterar qualquer uma delas. Para os campos dessas configurações, consulte [Main Settings](/pt-br/documentacao/plataforma/applications/main-settings/) e [Rules Engine para Applications](/pt-br/documentacao/plataforma/applications/rules-engine/). --- ## Próximos passos - [Domains](/pt-br/documentacao/plataforma/workloads/domains.md): Adicione um domínio personalizado para que os usuários acessem a aplicação em um domínio seu. - [Primeiros passos com Applications](/pt-br/documentacao/plataforma/applications/primeiros-passos.md): Crie uma aplicação manualmente: um connector, uma regra que o usa e um workload que entrega a aplicação. - [Rules Engine para Applications](/pt-br/documentacao/plataforma/applications/rules-engine.md): Todos os critérios e behaviors que uma regra da aplicação aceita. - [Functions](/pt-br/documentacao/plataforma/functions.md): Como Functions executa a função que o template criou para lógica personalizada.