# Deploy de aplicação Jamstack com React

import Tag from '~/components/webkit/Tag.vue';

<Tag severity="info">
  Aplicação estática
</Tag>

O React está listado na [documentação do Jamstack](https://jamstack.org/generators/react-static/) como um gerador de site estático, alinhado à abordagem Jamstack.

Saiba mais sobre o [React](https://react.dev/).

---

## Pré-requisitos

Antes de começar, você deve ter:

- Uma conta na [plataforma da Azion](/pt-br/documentacao/produtos/contas/criar-uma-conta/) com o produto [Functions](/pt-br/documentacao/produtos/build/applications/functions/) habilitado.
- [A versão mais recente da Azion CLI instalada](/pt-br/documentacao/produtos/azion-cli/visao-geral/).
- Um editor de código.
- Acesso ao terminal.
- Node.js ≥ 18 instalado.

---

## Inicializar um projeto React

1. No terminal, inicialize o projeto:

```sh 
  azion init
```

2. Dê um nome ao seu projeto ou pressione `enter` para aceitar a sugestão dada:

```sh 
? Your application's name:  (black-thor) 
```

3. Escolha o preset do React:

```sh 
? Choose a preset:  [Use arrows to move, type to filter]
  Angular
  Astro
  Docusaurus
  Eleventy
  Emscripten
  Gatsby
  Hexo
  Hono
  Hugo
  Javascript
  Jekyll
  Next
> React
  Rustwasm
  Svelte
  Typescript
  Vitepress
  Vue
```

4. Escolha um dos templates disponíveis.

5. Você pode optar por iniciar um servidor de desenvolvimento local ou não.

```sh 
? Do you want to start a local development server? (y/N) 
```

Os próximos passos dependem de sua resposta.

- [Se você optou por executar um servidor de desenvolvimento local](#resposta-sim-para-desenvolvimento-local).
- [Se você optou por não executar um servidor de desenvolvimento local](#resposta-nao-para-desenvolvimento-local).

### Resposta sim para desenvolvimento local

1. Instale as dependências do projeto. Digite `y` quando a interação solicitar:

```sh 
Do you want to install project dependencies? This may be required to start local development server (y/N)
```

Aguarde até que a instalação seja concluída.

Saída:

```sh
Your application was built successfully
[Azion] [Server] › ✔  success   Function running on port 0.0.0.0:3333, url: http://localhost:3333
```

2. No navegador, vá para `http://localhost:3333/` e você verá o seu projeto React em execução.

#### Implantação do projeto

Quando o seu projeto está em execução localmente, você ainda pode implantá-lo. Para fazer isso:

1. Pare a execução no terminal com `control + c`. 
2. Acesse a pasta do projeto:

```sh
cd [nome-do-seu-projeto] 
```

3. Implante o projeto: 

```sh
azion deploy
```

4. Aguarde enquanto o projeto é construído e implantado na Azion Web Platform.

:::note 
Uma vez que o deployment é iniciado, a Azion abrirá o navegador e levará o usuário a uma página no Azion Console onde os logs e o processo de implantação podem ser monitorados. Se não abrir automaticamente, basta clicar no link fornecido.
::: 

Após a implantação ser concluída, você receberá um Workload para acessar o seu projeto React na plataforma da Azion.

Aguarde alguns minutos para que a propagação ocorra e, em seguida, acesse a sua aplicação usando o Workload fornecido, que deve ser semelhante a `https://xxxxxxx.map.azionedge.net`.

### Resposta não para desenvolvimento local

Após indicar que você não deseja executar um servidor local, implante o projeto.

1. Digite `y` para a seguinte interação, indicando que deseja implantar o projeto:

```sh
Do you want to deploy your project?
```

2. Instale as dependências do projeto. Digite `y` quando a interação solicitar:

```sh 
Do you want to install project dependencies? This may be required to start local development server (y/N)
```

3. Aguarde enquanto o projeto é construído e implantado na plataforma da Azion.

:::note 
Uma vez que o deployment é iniciado, a Azion abrirá o navegador e levará o usuário a uma página no Azion Console onde os logs e o processo de implantação podem ser monitorados. Se não abrir automaticamente, basta clicar no link fornecido.
::: 

Após a implantação ser concluída, você receberá um Workload para acessar o seu projeto React na plataforma da Azion.

Aguarde alguns minutos para que a propagação ocorra e, em seguida, acesse a sua aplicação usando o Workload fornecido, que deve ser semelhante a `https://xxxxxxx.map.azionedge.net`.