clube67_newwhats.local/clube67/newwhats.local/DEVELOPMENT.md

🚀 Guia de Desenvolvimento - NewWhats

Este documento descreve como configurar e rodar o ambiente de desenvolvimento com hot-reload para desenvolvimento rápido.

---

📋 Portas

Serviço	Produção	Desenvolvimento
Frontend (Next.js)	3003	4004
Backend (Express)	8008	8009

---

🛠️ Setup Inicial

1. Requisitos

• Node.js (verifique com node -v)
• npm (verifique com npm -v)
• PostgreSQL rodando
• DragonflyDB (Redis-compatible) rodando
• NATS JetStream rodando
• Temporal.io rodando

2. Instalar Dependências

# Frontend
cd frontend
npm install

# Backend
cd ../backend
npm install

---

🏃 Executar em Desenvolvimento (Hot-Reload)

Opção 1: Usar Serviços Systemd (Recomendado)

Iniciar Ambos os Serviços

# Iniciar dev services
sudo systemctl start newwhats-frontend-dev newwhats-backend-dev

# Verificar status
sudo systemctl status newwhats-frontend-dev newwhats-backend-dev

# Ver logs em tempo real
sudo journalctl -u newwhats-frontend-dev -f
sudo journalctl -u newwhats-backend-dev -f

Parar Serviços Dev

sudo systemctl stop newwhats-frontend-dev newwhats-backend-dev

Ativar Auto-start na Boot

sudo systemctl enable newwhats-frontend-dev newwhats-backend-dev

---

Opção 2: Rodar Manualmente (Terminal)

Terminal 1 - Frontend (Hot-Reload)

cd /home/deploy/projetos/newwhats.local/frontend
npm run dev

# Output esperado:
# ▲ Next.js 14.2.35
# - Local:        http://localhost:4004
#  ✓ Ready in X.Xs

Terminal 2 - Backend (Hot-Reload)

cd /home/deploy/projetos/newwhats.local/backend
npm run dev

# Output esperado:
# Server running on port 8009
# Watching for file changes...

---

📝 Variáveis de Ambiente

Frontend

• NODE_ENV=development → Ativa React DevTools e hot-reload
• Porta: 4004 (configurado em package.json)

Backend

• NODE_ENV=development → Logs detalhados, sem compressão
• PORT=8009 → Porta dev (não conflita com produção 8008)
• .env já está configurado com valores corretos

---

🔄 Hot-Reload em Ação

Frontend

• Edite arquivos em frontend/pages/, frontend/components/, etc.
• Next.js recompila automaticamente e atualiza o navegador
• Para mudanças em next.config.mjs, reinicie o serviço

Backend

• Edite arquivos em backend/src/
• tsx watch reinicia o servidor automaticamente
• Mudanças em .env requerem restart manual

---

🚨 Troubleshooting

Porta já em uso

# Verificar qual processo usa a porta
lsof -i :4004  # Frontend
lsof -i :8009  # Backend

# Matar processo (último recurso)
sudo kill -9 <PID>

Serviço não inicia

# Verificar logs detalhados
sudo systemctl status newwhats-frontend-dev
sudo journalctl -u newwhats-frontend-dev -n 50

# Recarregar systemd após editar .service
sudo systemctl daemon-reload

Mudanças não aparecem

• Frontend: Limpar cache do navegador (Ctrl+Shift+Del)
• Backend: Aguarde a mensagem de restart no terminal

---

⚙️ Scripts Disponíveis

Frontend

npm run dev        # Desenvolvimento com hot-reload (porta 4004)
npm run build      # Build para produção
npm run start      # Rodar build (produção, porta 3003)
npm run lint       # Linting

Backend

npm run dev        # Desenvolvimento com tsx watch (porta 8009)
npm run build      # Compilar TypeScript
npm run start      # Rodar compilado (produção, porta 8008)
npm run db:migrate # Migrar database
npm run db:push    # Push schema para database
npm run db:studio  # Prisma Studio

---

🔗 URLs de Desenvolvimento

• Frontend: http://localhost:4004
• Backend API: http://localhost:8009
• Prisma Studio: npm run db:studio (backend)

---

📌 Produção vs Desenvolvimento

Aspecto	Produção	Desenvolvimento
Hot-reload	❌	✅
Compilação	✅ Build prévio	❌ On-the-fly
Logs	Estruturados (JSON)	Pretty-printed
Otimização	✅	❌
Velocidade Dev	Lenta	⚡ Rápida

---

🤝 Boas Práticas

1. Sempre use dev em desenvolvimento — hot-reload economiza tempo
2. Teste em produção antes de deploy — verifique otimizações
3. Mantenha .env sincronizado — mudanças críticas requerem restart
4. Limpe logs regularmente — journalctl --vacuum=time=7d
5. Verifique portas antes de mudar — evite conflitos

---

📞 Suporte

Para problemas ou dúvidas, verifique:

• Logs dos serviços: journalctl -u newwhats-*-dev -f
• Status das dependências: systemctl status postgresql dragonfly nats
• Conectividade: curl http://localhost:8009/health

---

Última atualização: 2026-04-10 Ambiente: Linux (Debian/Ubuntu)