Aula 15 - Build e Deploy 🚀

Colocando seu App no Ar

Agenda de Hoje 📅

1. Dev vs Prod: As diferenças
2. O que é o Build? (Minificação e Sacudida)
3. Variáveis de Ambiente (.env)
4. Estratégias de Deployment
5. SEO Básico para SPAs
6. Prática: Publicando na Vercel/Netlify

1. O Final da Jornada 🏁

• Seu código no VS Code é para humanos.
• O código em produção é para navegadores.
• Precisamos transformar o arquivo .svelte em JS puro e otimizado.

2. O Processo de Build 🏗️

npm run build

1. Compilação: Svelte limpa o código.
2. Tree Shaking: Remove bibliotecas não usadas ("sacode a árvore").
3. Minificação: Remove espaços e encurta nomes de variáveis.
4. Hashing: Adiciona IDs aos arquivos para controle de cache.

3. Variáveis de Ambiente (.env) 🛡️

• Nunca coloque senhas ou chaves de API direto no código!
• Use arquivos .env para separar configurações por ambiente.

/* .env */
VITE_API_URL=https://api.producao.com
VITE_TOKEN=123456

3.1 Usando no Svelte

• O Vite exige o prefixo VITE_.

const url = import.meta.env.VITE_API_URL;

4. O Diretório dist/ 📂

• Após o build, surge a pasta dist/ (ou build/).
• Ela contém o pacote final estático.
• É essa pasta que será enviada para o servidor.

5. Estratégias de Deploy 🌐

5.1 Vercel e Netlify (Recomendado)

• Integração total com GitHub.
• Deploy automático a cada "git push".
• Suporte nativo ao Svelte.

5.2 GitHub Pages

• Ideal para projetos gratuitos de portfólio.
• Requer uma configuração básica (Action) para SPAs.

6. Fluxo de Publicação 🌊

graph LR
    A[Git Push] --> B[GitHub]
    B -->|Webhook| C[Servidor Deploy]
    C -->|Build| D[Nova Versão no Ar]

7. SEO para SPAs 🔍

• O Google tem dificuldade de ler sites que dependem muito de JS.
• Dicas: Use tags semânticas (main, nav, article).
• No futuro, estude SvelteKit para renderização no servidor (SSR).

8. Lighthouse 💡

• Ferramenta do Google Chrome para medir qualidade.
• Verifica: Performance, Acessibilidade, Melhores Práticas e SEO.

9. Prática: Deploy Instantâneo ☁️

• Crie uma conta na Vercel ou Netlify.
• Conecte seu repositório do curso.
• Adicione as variáveis .env no painel de controle.
• Veja o link público gerado!

10. Resumo da Aula ✅

• O Build prepara o site para o mundo real.
• .env é obrigatório para segurança.
• Deploy contínuo aumenta a produtividade.

Próxima Aula: Projeto Final 🏆

• Review Geral.
• Orientações para o Desafio.
• Dicas de Carreira e Mercado.

Dúvidas? 🤔

"Um projeto que não está no ar é apenas um arquivo no seu computador."