--- name: azion-desenvolva-com-react description: >- Faça o deploy de um app React em um domínio da Azion a partir de um template da Azion, do seu repositório do GitHub ou com a Azion CLI. --- # Desenvolva com React Você pode fazer o deploy de um app React na Azion a partir de um template no Azion Console, de um repositório do GitHub que é seu ou com a [Azion CLI](/pt-br/documentacao/devtools/cli/). As três rotas deixam o app em execução na Azion, atrás de um domínio da Azion. A Azion serve um app React como uma aplicação estática. O build grava o app compilado em `./.edge/assets`, o deploy envia essa pasta para um bucket de storage e uma [application](/pt-br/documentacao/plataforma/applications/) o serve. Para os outros frameworks dos quais a Azion faz o build, consulte [Compatibilidade com web frameworks](/pt-br/documentacao/devtools/runtime/frameworks/compatibilidade-frameworks/). --- Escolha a rota que você vai seguir. Os pré-requisitos e o procedimento de deploy abaixo mudam com a sua escolha. ## Pré-requisitos - Uma conta da Azion. Para criar uma, consulte [Criar uma conta](/pt-br/documentacao/fundamentos/criar-uma-conta/). **Console** - 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/). - Uma conta do GitHub. O formulário do template a conecta quando pede uma. **GitHub** - 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/). - Uma conta do GitHub. - Um repositório do GitHub que contém um projeto React. **CLI** - A Azion CLI, instalada e com login feito. Para configurá-la, consulte [Primeiros passos com a Azion CLI](/pt-br/documentacao/devtools/cli/primeiros-passos/). - Node.js 18 ou posterior, e npm. - Um terminal e um editor de código. --- ## Templates do React Um template React é um projeto inicial do qual a Azion faz o build e o deploy para você. A rota do Console faz o deploy de um destes templates: | Template | Uso | | ---------------------------------------------------------------------------------------------------------- | --------------- | | [React Boilerplate](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/frameworks/react-boilerplate/) | Projeto inicial | | React with ButterCMS Starter Project | Inicial | O React Boilerplate tem um guia próprio, com link na tabela. Para mais informações sobre o outro template, consulte [Marketplace da Azion](/pt-br/documentacao/plataforma/marketplace/). Na rota da CLI, o seletor de templates do `azion init` lista todos os templates do preset React. --- ## Fazer o deploy do app Todas as rotas fazem o build do projeto React e criam os recursos da Azion que o servem. Siga o painel da sua rota: **Console** Para fazer o deploy de um template React pelo Azion Console: 1. **Abra os templates** Acesse [Azion Console](https://console.azion.com/) > **Create** > **Templates**. 2. **Encontre os templates React** Em **Search by name, framework, or keyword**, digite `React`. 3. **Selecione o template para o deploy** 4. **Conecte sua conta do GitHub** Se o formulário mostrar **GitHub Connection**, selecione **Connect with GitHub** e instale o [Azion GitHub App](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/automacao/azion-github-app/). 5. **Selecione um Git Scope** Em **Git Scope**, selecione o escopo do template. 6. **Preencha as configurações que o template pede** 7. **Selecione Deploy** A página de deploy abre, e o **Deploy Log** dela acompanha o build. Quando o deploy termina com sucesso, a página mostra **Successfully created!**, a URL do domínio e um botão **Manage** que abre a application. **GitHub** Para fazer o deploy de um projeto React a partir do seu repositório do GitHub: 1. **Abra o Import from GitHub** Acesse [Azion Console](https://console.azion.com/) > **Create** > **Import from GitHub**. 2. **Selecione o card de importação** Na aba **Import from GitHub**, selecione o card. A página **Import from GitHub** abre. 3. **Conecte sua conta do GitHub** Se nenhuma conta do GitHub estiver conectada, selecione **Connect with GitHub** em **GitHub Connection**. 4. **Selecione o repositório** Selecione um **Git Scope** e depois selecione o **Repository** que contém o projeto React. 5. **Dê um nome à application** Em **General**, digite um **Application Name**. O nome do repositório preenche o campo, e o bucket de storage e a [function](/pt-br/documentacao/plataforma/functions/) recebem o nome que você mantiver. 6. **Selecione o preset React** Defina **Preset** como *React*. 7. **Defina o diretório raiz** Em **Root Directory**, mantenha `/` quando o projeto React estiver na raiz do repositório. 8. **Digite o comando de instalação** Em **Install Command**, digite `npm install`. 9. **Selecione Deploy** A página de deploy abre com o título `Deploy:` e o nome da application, e o **Deploy Log** dela acompanha o build. Quando o deploy termina com sucesso, a página mostra **Successfully created!** e a URL do domínio. Para definir **Variables** ou outro campo do formulário de importação, consulte [Importe um projeto do GitHub](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/automacao/importar-um-projeto-existente-do-github/). **CLI** Para criar o projeto, execute `azion init` com um nome de projeto. Selecione *React* no seletor de presets e um template no seletor de templates: ```bash azion init --name my-site --auto -y ``` A opção `-y` instala as dependências. A opção `--auto` pula as perguntas sobre um servidor de desenvolvimento local e sobre um deploy. Para as perguntas que o comando faz sem essas opções, consulte [Azion CLI init](/pt-br/documentacao/devtools/cli/init/). Com o template *React Boilerplate*, o comando imprime: ```text ? Choose a preset: [Use arrows to move, type to filter] > AI Studio Angular Astro Docusaurus Eleventy Emscripten Gatsby Hexo Hono Hugo Javascript Jekyll Next Nuxt OpenNextJS Preact Qwik React Rustwasm Stencil Svelte Typescript Vitepress Vue Vuepress ? Choose a preset: React ? Choose a template: [Use arrows to move, type to filter] > React with ButterCMS Starter Project React Boilerplate Vite + React Boilerplate ? Choose a template: React Boilerplate Fetching selected template... Template successfully fetched Template successfully configured Installing application dependencies … added 1307 packages, and audited 1308 packages in 1m 273 packages are looking for funding run `npm fund` for details 70 vulnerabilities (3 low, 4 moderate, 63 high) To address issues that do not require attention, run: npm audit fix To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. … [Azion] [Build] › ℹ info Using preset: react [Azion] [Build] › ✔ success Build completed successfully with only azion.config [Azion] [IaC] › ✔ success Manifest generated successfully at /my-site/.edge/manifest.json If you want to start a local development server later, run 'azion dev' Make sure to change to the new working directory before running building or deploying your project If you want to deploy your application later, run 'azion deploy' Make sure to change to the new working directory before running building or deploying your project Your application my-site was initialized successfully ``` O comando cria o projeto em uma pasta `my-site`. O `azion.config.cjs` dele define o preset `react` e envia `./.edge/assets` para um bucket de storage que os workloads só podem ler. O mesmo arquivo adiciona uma regra chamada `Redirect to index.html`, que reescreve as rotas para `/index.html` para que o React cuide do roteamento no navegador. Para todas as configurações desse arquivo, consulte [azion.config.js](/pt-br/documentacao/devtools/cli/azion-config-js/). Para fazer o build do app, entre na pasta do projeto e execute `azion build`: ```bash cd my-site azion build ``` O Azion Bundler executa o script `react-scripts build` do template com o preset `react`, e o app compilado vai para `.edge/assets`: ```text Building your Application. This process may take a few minutes Running build step command: $ npx --yes @aziontech/bundler@1.1.4 build --preset react … [Azion] [Build] › ℹ info Using preset: react [Azion] [Pre-Build] › ℹ info Starting pre-build... … [React] › ℹ info > reactjs-boilerplate@0.1.1 build > CI=false react-scripts build [React] › ℹ info (node:33966) [DEP0176] DeprecationWarning: fs.F_OK is deprecated, use fs.constants.F_OK instead … [React] › ℹ info Creating an optimized production build... [React] › ℹ info Compiled successfully. [React] › ℹ info File sizes after gzip: [React] › ℹ info 70.01 kB assets/static/js/main.1e230516.js 1.77 kB assets/static/js/453.6fadd187.chunk.js 513 B assets/static/css/main.f855e6bc.css [React] › ℹ info The project was built assuming it is hosted at /. You can control this with the homepage field in your package.json. The .edge/assets folder is ready to be deployed. … [Azion] [Pre-Build] › ℹ info Pre-build completed successfully [Azion] [Build] › ℹ info Using built-in handler from "react" preset. [Azion] [Build] › ℹ info Starting build... [Azion] [Build] › ✔ success Build completed successfully [Azion] [Post-Build] › ℹ info Starting post-build... [Azion] [Post-Build] › ✔ success Post-build completed successfully [Azion] [Storage] › ℹ info Using provided prefix for storage '$BUCKET_NAME': $BUCKET_PREFIX [Azion] [IaC] › ✔ success Manifest generated successfully at /my-site/.edge/manifest.json Your Application was built successfully ``` Para fazer o deploy do app, execute `azion deploy` na pasta do projeto: ```bash azion deploy ``` O comando envia o projeto e abre a página do Console que acompanha o deploy. Ele também imprime a URL dessa página caso nenhum navegador abra. Quando o deploy termina, ele imprime a URL do domínio do app. Para a saída completa e todas as flags, consulte [Azion CLI deploy](/pt-br/documentacao/devtools/cli/deploy/). Para executar o app na sua máquina antes do deploy, consulte [Azion CLI dev](/pt-br/documentacao/devtools/cli/dev-comando/). Para fazer o deploy de um projeto React que você já tem, execute `azion link` na pasta dele e selecione o preset React. Para mais informações, consulte [Azion CLI link](/pt-br/documentacao/devtools/cli/link-comando/). --- ## Verificar o site Todas as rotas retornam a URL do domínio da Azion do app, no formato `https://xxxxxxxxxx.map.azionedge.net`. O Azion Console mostra essa URL na página de deploy, e o `azion deploy` a imprime quando termina. Abra a URL em um navegador para ver o app React. O primeiro deploy pode levar vários minutos para responder em todas as localidades; os deploys seguintes levam cerca de dois minutos. Até que uma localidade receba o app, o domínio responde com uma página `404` que diz `There's nothing here yet`. Diante dessa resposta, aguarde e solicite a URL novamente. --- ## Próximos passos - [Compatibilidade com frameworks](/pt-br/documentacao/devtools/runtime/frameworks/compatibilidade-frameworks.md): Veja de quais outros frameworks e presets a Azion faz o build. - [Azion CLI deploy](/pt-br/documentacao/devtools/cli/deploy.md): Leia a saída do deploy e as flags que mudam um deploy. - [Importe um projeto do GitHub](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/automacao/importar-um-projeto-existente-do-github.md): Defina todos os campos da importação do GitHub, incluindo as variáveis. - [azion.config.js](/pt-br/documentacao/devtools/cli/azion-config-js.md): Altere o bucket, o cache e as regras que o preset React gera.