> For the complete documentation index, see [llms.txt](https://salvatore-academy.gitbook.io/dev-fullstack-web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://salvatore-academy.gitbook.io/dev-fullstack-web/academia/missoes-de-frontend/deploy-de-aplicacoes-react.md).

# Deploy de Aplicações React

Área: Frontend | Nível recomendado: Iniciante

{% hint style="info" %}
Nesta missão, aprenderemos sobre o processo de build de aplicações frontend, como o NodeJS e ferramentas como o Vite facilitam a criação de artefatos estáticos, e como esses artefatos são hospedados em diferentes plataformas. A missão também cobrirá a configuração de Continuous Deployment (CD) com o Render, proporcionando uma compreensão completa de como preparar e lançar uma aplicação React no ambiente de produção.
{% endhint %}

## Vídeo

{% embed url="<https://youtu.be/AmTypi2o67w>" %}

**Link direto:** <https://youtu.be/AmTypi2o67w>

## Tópicos

1. **Fundamentos do Processo de Build:**
   * Explicação sobre o conceito de build e a importância de transformar o código de desenvolvimento em artefatos estáticos para produção.
   * Discussão sobre o papel do NodeJS e como diferentes ferramentas de build, como Webpack e Vite, são utilizadas no processo.
2. **Exploração do Vite no Build de React:**
   * Detalhamento de como o Vite otimiza o desenvolvimento e produção de aplicações React.
   * Demonstração do comando `npm run preview` para testar a aplicação em um ambiente de produção local.
3. **Hospedagem de Sites Estáticos:**
   * Discussão sobre hospedagem de sites estáticos e as vantagens de utilizar plataformas especializadas para aplicações frontend.
   * Análise de diferentes provedores de hospedagem, incluindo GitHub Pages e suas limitações com relação ao processo de build.
4. **Deploy no Render e Configuração de CD:**
   * Instruções passo a passo para configurar um projeto React no Render, integrando-o com um repositório do GitHub.
   * Explicação sobre o sistema de Continuous Deployment do Render, que realiza deploys automáticos após cada commit.

## Material de Apoio

### Repositório no GitHub

{% embed url="<https://github.com/SalvatoreAcademy/frontend-missao-aprendizado-iniciante-deploy-de-aplicacoes-react>" %}

### PDF para Download

{% file src="/files/Br8XbdfGeIHKeMseap9g" %}

### Miro

{% embed url="<https://miro.com/app/board/uXjVNOBw03o=/?moveToWidget=3458764570069463852&cot=14>" %}

## Exercícios de Fixação

{% hint style="info" %}
Use esses exercícios para reforçar o que acabou de aprender. Se errar, leia a explicação para entender melhor o conceito.
{% endhint %}

<details>

<summary>O que é o processo de build?</summary>

A) Processo de desenvolvimento de novas funcionalidades.

B) Transformação do código-fonte em arquivos otimizados para produção.

C) Configuração do ambiente de desenvolvimento.

D) Criação de designs para a aplicação.

</details>

<details>

<summary>Resposta correta</summary>

**O que é o processo de build?**

**Resposta Correta**: B

**Feedback**: O processo de build transforma o código-fonte em arquivos otimizados e prontos para produção.

</details>

***

<details>

<summary>Complete o comando para criar um build de produção usando Vite.</summary>

```bash
npm run _______
```

</details>

<details>

<summary>Resposta correta</summary>

**Complete o comando para criar um build de produção usando Vite.**

**Resposta Correta**: `build`

**Feedback**: O comando completo é `npm run build`, que cria um build de produção usando Vite.

</details>

***

<details>

<summary>O que é Continuous Deployment (CD)?</summary>

A) Processo de integração de novas dependências no projeto.

B) Automatização de testes unitários.

C) Deploy automático de novas versões após cada commit.

D) Configuração de ambientes de desenvolvimento.

</details>

<details>

<summary>Resposta correta</summary>

**O que é Continuous Deployment (CD)?**

**Resposta Correta**: C

**Feedback**: Continuous Deployment (CD) automatiza o deploy de novas versões após cada commit no repositório.

</details>

***

<details>

<summary>Verdadeiro ou Falso: O Vite oferece suporte nativo para hot module replacement (HMR).</summary>

A) Verdadeiro

B) Falso

</details>

<details>

<summary>Resposta correta</summary>

**Verdadeiro ou Falso: O Vite oferece suporte nativo para hot module replacement (HMR).**

**Resposta Correta**: A

**Feedback**: Verdadeiro. O Vite oferece suporte nativo para hot module replacement (HMR), que facilita o desenvolvimento mais rápido e eficiente.

</details>

## Exercícios de Validação

{% hint style="info" %}
Esses exercícios testarão sua compreensão prática. Revise o feedback para melhorar suas habilidades.
{% endhint %}

### Desafio de Configuração

Configure um projeto React usando Vite, execute um build de produção e visualize a versão de produção localmente utilizando o comando `npm run preview`.

* Implementar o novo projeto React com Vite.
* Executar `npm run build`.
* Visualizar a versão de produção com `npm run preview`.

<details>

<summary>Passos esperados</summary>

1. Inicialize um novo projeto React com Vite:

   ```bash
   npm create vite@latest my-react-app --template react
   cd my-react-app
   npm install
   ```
2. Execute o build de produção:

   ```bash
   npm run build
   ```
3. Visualize a versão de produção localmente:

   ```bash
   npm run preview
   ```

**Feedback**: Certifique-se de que o projeto é configurado corretamente e que a aplicação funciona como esperado em modo de produção.

</details>

### Revisão de Deploy

Revise a configuração de Continuous Deployment no Render para garantir que qualquer commit no repositório do GitHub resulta em uma nova versão em produção.

* Verifique as configurações no Render para integração contínua.
* Teste a automação realizando um commit e observando o deploy automático.

<details>

<summary>Passos esperados</summary>

1. Verifique se o repositório do GitHub está conectado ao Render.
2. Garanta que o comando de build está configurado corretamente no Render:

   ```bash
   npm run build
   ```
3. Faça um commit no repositório do GitHub e observe o processo de deploy automático no Render.

**Feedback**: Assegure-se de que o Continuous Deployment está configurado corretamente e funcionando como esperado, automatizando o processo de deploy para cada novo commit.

</details>

### Projeto Prático

Implemente um deploy completo de uma aplicação React no Render, configurando o Continuous Deployment para garantir que todas as atualizações no repositório GitHub sejam refletidas automaticamente na aplicação em produção.

#### Tarefas

1. **Configuração Inicial**:
   * Crie um novo projeto React com Vite.
   * Configure o projeto no GitHub.
2. **Deploy no Render**:
   * Crie uma conta no Render e conecte o repositório GitHub.
   * Configure o comando de build e as variáveis de ambiente necessárias.
3. **Continuous Deployment**:
   * Garanta que cada commit no repositório GitHub dispare um novo build e deploy no Render.

<details>

<summary>Passos esperados</summary>

1. Inicialize um novo projeto React com Vite:

   ```bash
   npm create vite@latest my-react-app --template react
   cd my-react-app
   npm install
   ```
2. Garante que o projeto está no GitHub.
3. Configure o Render:
   * Crie um novo serviço web e conecte ao repositório do GitHub.
   * Configure o comando de build:

     ```bash
     npm run build
     ```
   * Configure o comando de execução:

     ```bash
     npm run start
     ```
4. Teste o Continuous Deployment:
   * Faça um commit no repositório do GitHub e observe o deploy automático no Render.

**Feedback Detalhado**: Garanta que todas as etapas do deploy estão funcionando corretamente, desde a configuração inicial até a automação do deploy contínuo, assegurando que a aplicação está sempre atualizada com as últimas mudanças no código-fonte.

</details>