Deploy de Aplicações React

Área: Frontend | Nível recomendado: Iniciante

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.

Vídeo

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

https://github.com/SalvatoreAcademy/frontend-missao-aprendizado-iniciante-deploy-de-aplicacoes-reactgithub.com

PDF para Download

1MB

Frontend - Iniciante - Missão de Aprendizado - Deploy de Aplicações React.pdf

pdf

Miro

Exercícios de Fixação

Use esses exercícios para reforçar o que acabou de aprender. Se errar, leia a explicação para entender melhor o conceito.

O que é o processo de build?

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.

Resposta correta

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.

---

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

npm run _______

Resposta correta

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.

---

O que é Continuous Deployment (CD)?

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.

Resposta correta

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.

---

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

A) Verdadeiro

B) Falso

Resposta correta

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.

Exercícios de Validação

Esses exercícios testarão sua compreensão prática. Revise o feedback para melhorar suas habilidades.

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.

Passos esperados

1. Inicialize um novo projeto React com Vite:

   npm create vite@latest my-react-app --template react
   cd my-react-app
   npm install

2. Execute o build de produção:

   npm run build

3. Visualize a versão de produção localmente:

   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.

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.

Passos esperados

1. Verifique se o repositório do GitHub está conectado ao Render.

2. Garanta que o comando de build está configurado corretamente no Render:

   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.

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.

Passos esperados

1. Inicialize um novo projeto React com Vite:

   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:

     npm run build

   • Configure o comando de execução:

     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.