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. 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 o serve. Para os outros frameworks dos quais a Azion faz o build, consulte Compatibilidade com web frameworks.

Pré-requisitos

Console

Uma conta da Azion. Para criar uma, consulte Criar uma conta.
Acesso ao Azion Console. Para entrar, consulte Como acessar o Azion Console.
Uma conta do GitHub. O formulário do template a conecta quando pede uma.

CLI

Uma conta da Azion. Para criar uma, consulte Criar uma conta.
A Azion CLI, instalada e com login feito. Para configurá-la, consulte Primeiros passos com a Azion CLI.
Node.js 18 ou posterior, e npm.
Um terminal e um editor de código.

GitHub

Uma conta da Azion. Para criar uma, consulte Criar uma conta.
Acesso ao Azion Console. Para entrar, consulte Como acessar o Azion Console.
Uma conta do GitHub.
Um repositório do GitHub que contém um projeto React.

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	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. 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:

Abra os templates

Acesse Azion Console > Create > Templates.

Encontre os templates React

Em Search by name, framework, or keyword, digite React.

Selecione o template para o deploy

Conecte sua conta do GitHub

Se o formulário mostrar GitHub Connection, selecione Connect with GitHub e instale o Azion GitHub App.

Selecione um Git Scope

Em Git Scope, selecione o escopo do template.

Preencha as configurações que o template pede

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.

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:

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. Com o template React Boilerplate, o comando imprime:

Texto

01? Choose a preset: [Use arrows to move, type to filter]

02> AI Studio

03 Angular

04 Astro

05 Docusaurus

06 Eleventy

07 Emscripten

08 Gatsby

09 Hexo

10 Hono

11 Hugo

12 Javascript

13 Jekyll

14 Next

15 Nuxt

16 OpenNextJS

17 Preact

18 Qwik

19 React

20 Rustwasm

21 Stencil

22 Svelte

23 Typescript

24 Vitepress

25 Vue

26 Vuepress

27? Choose a preset: React

28? Choose a template: [Use arrows to move, type to filter]

29> React with ButterCMS Starter Project

30 React Boilerplate

31 Vite + React Boilerplate

32? Choose a template: React Boilerplate

34Fetching selected template...

36Template successfully fetched

37Template successfully configured

38Installing application dependencies

39…

40added 1307 packages, and audited 1308 packages in 1m

41273 packages are looking for funding

42 run `npm fund` for details

4370 vulnerabilities (3 low, 4 moderate, 63 high)

45To address issues that do not require attention, run:

46 npm audit fix

48To address all issues (including breaking changes), run:

49 npm audit fix --force

51Run `npm audit` for details.

52…

53[Azion] [Build] › ℹ info Using preset: react

54[Azion] [Build] › ✔ success Build completed successfully with only azion.config

55[Azion] [IaC] › ✔ success Manifest generated successfully at <project-dir>/my-site/.edge/manifest.json

56If you want to start a local development server later, run 'azion dev'

57Make sure to change to the new working directory before running building or deploying your project

58If you want to deploy your application later, run 'azion deploy'

59Make sure to change to the new working directory before running building or deploying your project

60Your 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.

Para fazer o build do app, entre na pasta do projeto e execute azion build:

Shell

01cd my-site

02azion build

O Azion Bundler executa o script react-scripts build do template com o preset react, e o app compilado vai para .edge/assets:

Texto

01Building your Application. This process may take a few minutes

02Running build step command:

04$ npx --yes @aziontech/bundler@1.1.4 build --preset react

05…

06[Azion] [Build] › ℹ info Using preset: react

07[Azion] [Pre-Build] › ℹ info Starting pre-build...

08…

09[React] › ℹ info

10> reactjs-boilerplate@0.1.1 build

11> CI=false react-scripts build

[React] › ℹ  info      (node:33966) [DEP0176] DeprecationWarning: fs.F_OK is deprecated, use fs.constants.F_OK instead

14…

16[React] › ℹ info Creating an optimized production build...

18[React] › ℹ info Compiled successfully.

20[React] › ℹ info File sizes after gzip:

22[React] › ℹ info 70.01 kB assets/static/js/main.1e230516.js

23 1.77 kB assets/static/js/453.6fadd187.chunk.js

24 513 B assets/static/css/main.f855e6bc.css

26[React] › ℹ info

27The project was built assuming it is hosted at /.

28You can control this with the homepage field in your package.json.

30The .edge/assets folder is ready to be deployed.

31…

33[Azion] [Pre-Build] › ℹ info Pre-build completed successfully

34[Azion] [Build] › ℹ info Using built-in handler from "react" preset.

35[Azion] [Build] › ℹ info Starting build...

36[Azion] [Build] › ✔ success Build completed successfully

37[Azion] [Post-Build] › ℹ info Starting post-build...

38[Azion] [Post-Build] › ✔ success Post-build completed successfully

39[Azion] [Storage] › ℹ info Using provided prefix for storage '$BUCKET_NAME': $BUCKET_PREFIX

40[Azion] [IaC] › ✔ success Manifest generated successfully at <project-dir>/my-site/.edge/manifest.json

41Your Application was built successfully

Para fazer o deploy do app, execute azion deploy na pasta do projeto:

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.

Para executar o app na sua máquina antes do deploy, consulte Azion CLI dev. 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.

GitHub

Para fazer o deploy de um projeto React a partir do seu repositório do GitHub:

Abra o Import from GitHub

Acesse Azion Console > Create > Import from GitHub.

Selecione o card de importação

Na aba Import from GitHub, selecione o card. A página Import from GitHub abre.

Conecte sua conta do GitHub

Se nenhuma conta do GitHub estiver conectada, selecione Connect with GitHub em GitHub Connection.

Selecione o repositório

Selecione um Git Scope e depois selecione o Repository que contém o projeto React.

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 recebem o nome que você mantiver.

Selecione o preset React

Defina Preset como React.

Defina o diretório raiz

Em Root Directory, mantenha / quando o projeto React estiver na raiz do repositório.

Digite o comando de instalação

Em Install Command, digite npm install.

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.

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.

Estas verificações confirmam o caso de uso Implantar aplicações front-end.

Próximos passos

Compatibilidade com frameworksVeja de quais outros frameworks e presets a Azion faz o build.Azion CLI deployLeia a saída do deploy e as flags que mudam um deploy.Importe um projeto do GitHubDefina todos os campos da importação do GitHub, incluindo as variáveis.azion.config.jsAltere o bucket, o cache e as regras que o preset React gera.Implantar aplicações front-endUma single-page application cujas chamadas de API chegam a um backend existente no mesmo domínio.