🎯 Objetivos da Lição

Ao final desta lição o aluno será capaz de:

Executar o processo de build para produção
Entender a diferença entre ambiente de desenvolvimento e produção
Publicar projeto no Vercel ou Netlify
Otimizar assets antes do deploy
Criar README profissional para o repositório
Disponibilizar o jogo online funcionando corretamente

🏗 1. Gerando a Build de Produção

No terminal do projeto execute:

npm run build

O que esse comando faz:

Minifica o código
Remove trechos não utilizados
Otimiza arquivos
Gera a pasta dist (no Vite) ou build (no Create React App)

Essa pasta contém todos os arquivos prontos para hospedagem.

Após gerar a build, é recomendável testar:

npm run preview

Isso simula a versão de produção localmente.

🚀 2. Deploy no Vercel

Configuração padrão para projetos com Vite:

Build Command:

npm run build

Output Directory:

dist

Passos para publicar:

Criar conta no Vercel
Conectar conta do GitHub
Importar o repositório
Confirmar as configurações automáticas
Clicar em Deploy

A cada novo push no GitHub, o Vercel realiza novo deploy automaticamente.

🌍 3. Deploy no Netlify

Configuração:

Build command:

npm run build

Publish directory:

dist

Também é possível fazer deploy manual enviando a pasta dist diretamente na interface do Netlify.

⚙️ 4. Otimização de Assets

Antes de publicar, aplicar boas práticas:

✔ Comprimir imagens
✔ Reduzir tamanho de arquivos de áudio
✔ Utilizar sprite sheets
✔ Remover arquivos não utilizados
✔ Verificar tamanho final da pasta dist

Quanto menor e mais leve, melhor a performance.

📄 5. Estrutura de README Profissional

Modelo recomendado:

# 🎮 Nome do Jogo## 📖 Sobre
Breve descrição do projeto.## 🛠 Tecnologias
- React
- Phaser
- Vite## 🚀 Acesse Online
Link do deploy## 🎯 Funcionalidades
- Sistema de pontuação
- Animações
- Game Over
- Salvamento de High Score## 🖥 Como Rodar Localmentegit clone URL_DO_REPOSITORIO
npm install
npm run dev## 🏗 Build para Produçãonpm run build## 👨‍💻 Autor
Seu Nome

Observação:
Esse bloco pode ser copiado diretamente para o arquivo README.md no repositório.

🧪 Atividade Prática

Parte 1 – Build

Executar npm run build
Confirmar criação da pasta dist
Testar versão de produção local

Parte 2 – Deploy

Publicar no Vercel ou Netlify
Testar jogo online
Confirmar funcionamento de assets e high score

Parte 3 – README

Criar README estruturado
Inserir link público do jogo
Adicionar imagem do projeto
Descrever tecnologias utilizadas

🏆 Resultado Esperado

Ao final da aula o aluno deverá:

✅ Gerar build sem erros
✅ Publicar o jogo online
✅ Garantir funcionamento em ambiente de produção
✅ Criar documentação profissional
✅ Ter projeto completo acessível via link público