# 🚀 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

```bash
# 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
```bash
# 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
```bash
sudo systemctl stop newwhats-frontend-dev newwhats-backend-dev
```

#### Ativar Auto-start na Boot
```bash
sudo systemctl enable newwhats-frontend-dev newwhats-backend-dev
```

---

### Opção 2: Rodar Manualmente (Terminal)

#### Terminal 1 - Frontend (Hot-Reload)
```bash
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)
```bash
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
```bash
# 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
```bash
# 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
```bash
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
```bash
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)