Pular para conteúdo

Aula 15 – PWA e Deploy: Colocando no Ar! 🚀

Seu app está pronto, mas onde ele vai morar? Hoje vamos aprender a transformar seu site em um "Aplicativo Instalável" e fazer o deploy profissional.

📱 O que é PWA (Progressive Web App)?

Uma PWA permite que seu site se comporte como um App Nativo: - Instalação: Link "Adicionar à tela de início" no celular. - Offline: Funciona mesmo sem internet (via Service Workers). - Velocidade: Carregamento instantâneo.

🚢 Fazendo o Deploy

Existem plataformas fantásticas que automatizam o processo de colocar seu código no ar direto do GitHub.

1. Vercel (Recomendado para Next.js e Vite)

  1. Conecte sua conta do GitHub.
  2. Escolha o repositório.
  3. Clique em "Deploy". Pronto!

2. Netlify

Semelhante à Vercel, excelente para sites estáticos e SPAs.

🔍 SEO e Meta Tags

Para que seu app apareça bem no Google e tenha uma imagem bonita quando compartilhado no WhatsApp, configure o index.html:

<title>Meu App Incrível</title>
<meta name="description" content="A melhor descrição de todas">
<meta property="og:image" content="https://meuapp.com/capa.jpg">

🚀 Prática da Aula

Vamos colocar seu projeto no ar HOJE!

  1. Crie uma conta na Vercel ou Netlify.
  2. Suba seu código final para o GitHub.
  3. Configure o deploy automático (Continuous Deployment).
  4. Teste o link gerado no seu celular.
  5. (Desafio) Configure o manifesto da PWA para que o Chrome peça para instalar o site.

📊 Ciclo do Deploy Automático

graph LR
    A[Código Local] -->|git commit| B[GitHub]
    B -->|Webhook| C[Vercel/Netlify]
    C -->|Build| D[Site Online 🎉]

Comemoração

Parabéns! Você saiu do zero e agora tem uma aplicação React rodando na nuvem para o mundo todo ver!