# 📚 Guia Técnico - Build de Produção React + Vite

## Informações do Build

**Projeto:** Studio Vitória Dornelas
**Framework:** React 19 + TypeScript
**Build Tool:** Vite
**Ambiente:** Produção
**Data de Geração:** Novembro 2025

---

## 🔧 Configurações do Vite

### **vite.config.ts - Configurações Aplicadas**

```typescript
export default defineConfig({
  base: "/",                    // Base URL relativa (raiz do domínio)
  build: {
    outDir: "dist",             // Pasta de saída
    emptyOutDir: true,          // Limpar pasta antes de build
    minify: "terser",           // Minificação com Terser
    sourcemap: false,           // Sem source maps em produção
    assetsDir: "assets",        // Pasta para JS/CSS
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ["react", "react-dom"]  // Separar vendor bundle
        }
      }
    }
  }
});
```

### **Explicação das Configurações**

| Configuração | Valor | Motivo |
|---|---|---|
| `base` | `/` | URLs relativas funcionam em qualquer domínio |
| `minify` | `terser` | Reduz tamanho do JS em ~70% |
| `sourcemap` | `false` | Não expõe código-fonte em produção |
| `assetsDir` | `assets` | Organiza JS/CSS em pasta separada |
| `manualChunks` | vendor | Separa dependências para melhor cache |

---

## 📦 Estrutura do Build

### **Ficheiros Gerados**

```
dist/
├── index.html                          (368 KB)
├── .htaccess                           (Configuração Apache)
├── assets/
│   ├── index-DXYuoUAe.css             (126 KB - Tailwind CSS)
│   ├── index-C5Dl_NHa.js              (263 KB - App code)
│   └── vendor-C_q9xi5L.js             (302 KB - React + deps)
├── images/
│   ├── gallery/                        (Fotos de unhas)
│   ├── logoparabanner.png
│   ├── logoparanavbar.png
│   └── Vitoriafotoprincipal.png
├── robots.txt                          (SEO)
├── sitemap.xml                         (SEO)
└── schema.json                         (Structured data)
```

### **Tamanhos Comprimidos (Gzip)**

| Ficheiro | Original | Gzip | Redução |
|---|---|---|---|
| index.html | 368 KB | 105 KB | 71% |
| index-*.css | 126 KB | 19 KB | 85% |
| index-*.js | 263 KB | 64 KB | 76% |
| vendor-*.js | 302 KB | 91 KB | 70% |
| **Total** | **1.1 MB** | **280 KB** | **75%** |

---

## 🚀 Comandos de Build

### **Gerar Build de Produção**

```bash
cd /home/ubuntu/studio-vitoria-dornelas
pnpm run build
```

### **Resultado Esperado**

```
✓ 1674 modules transformed.
../dist/index.html                 368.03 kB │ gzip: 105.72 kB
../dist/assets/index-DXYuoUAe.css  126.55 kB │ gzip:  19.94 kB
../dist/assets/index-C5Dl_NHa.js   263.61 kB │ gzip:  64.33 kB
../dist/assets/vendor-C_q9xi5L.js  302.50 kB │ gzip:  91.85 kB
✓ built in 5.33s
```

---

## 🔍 Validação do Build

### **Verificar Estrutura**

```bash
cd /home/ubuntu/studio-vitoria-dornelas/dist
ls -la
find . -type f | wc -l
du -sh .
```

### **Verificar Caminhos Relativos**

```bash
grep -r "http://" dist/ || echo "✓ Sem URLs absolutas"
grep -r "https://" dist/ || echo "✓ Sem URLs absolutas"
grep -r "src=\"/" dist/index.html || echo "✓ Caminhos relativos OK"
```

---

## 📄 Ficheiro .htaccess

### **Localização:** `dist/.htaccess`

### **Funcionalidades**

```apache
# 1. Ativa mod_rewrite para SPA routing
RewriteEngine On

# 2. Redireciona todas as rotas para index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA,L]

# 3. Cache inteligente
<FilesMatch "\.js$|\.css$">
  Header set Cache-Control "max-age=31536000"
</FilesMatch>

# 4. Compressão GZIP
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css application/javascript
</IfModule>

# 5. Headers de segurança
Header set X-Content-Type-Options "nosniff"
Header set X-Frame-Options "SAMEORIGIN"
Header set X-XSS-Protection "1; mode=block"
```

### **Requisitos do Servidor**

- ✅ Apache (não Nginx)
- ✅ mod_rewrite ativado
- ✅ mod_deflate ativado (compressão)
- ✅ mod_headers ativado (headers de segurança)

---

## 🔗 Caminhos de Ficheiros

### **Todos os Caminhos são Relativos**

```html
<!-- ✅ Correto - Relativo -->
<img src="images/logoparabanner.png" />
<link rel="stylesheet" href="assets/index-*.css" />
<script src="assets/index-*.js"></script>

<!-- ❌ Errado - Absoluto -->
<img src="/images/logoparabanner.png" />
<img src="https://dominio.com/images/logoparabanner.png" />
```

### **Vantagens de Caminhos Relativos**

- ✅ Funciona em qualquer domínio
- ✅ Funciona em subdiretórios
- ✅ Funciona em staging/produção
- ✅ Sem necessidade de reconfiguração

---

## 🔐 Segurança

### **Verificações de Segurança**

```bash
# Verificar se há ficheiros sensíveis expostos
find dist/ -name "*.map" -o -name ".env*" -o -name "*.ts"

# Verificar permissões
ls -la dist/
chmod 755 dist/
chmod 644 dist/*.html dist/*.js dist/*.css
```

### **Headers de Segurança Inclusos**

- `X-Content-Type-Options: nosniff` - Previne MIME sniffing
- `X-Frame-Options: SAMEORIGIN` - Previne clickjacking
- `X-XSS-Protection: 1; mode=block` - Proteção XSS
- `Referrer-Policy: strict-origin-when-cross-origin` - Privacidade

---

## 📊 Performance

### **Métricas Esperadas**

| Métrica | Valor | Benchmark |
|---|---|---|
| First Contentful Paint | < 1s | ✅ Excelente |
| Largest Contentful Paint | < 2.5s | ✅ Excelente |
| Cumulative Layout Shift | < 0.1 | ✅ Excelente |
| Time to Interactive | < 3s | ✅ Excelente |

### **Otimizações Aplicadas**

- ✅ Code splitting (vendor separado)
- ✅ Tree shaking (remove código não usado)
- ✅ Minificação agressiva
- ✅ Lazy loading de componentes
- ✅ Image optimization
- ✅ CSS purging (Tailwind)

---

## 🐛 Troubleshooting

### **Problema: Página em branco**

**Causa:** .htaccess não configurado corretamente

**Solução:**
```bash
# Verificar se mod_rewrite está ativado
# Contactar suporte da hospedagem
# Confirmar que .htaccess foi enviado
```

### **Problema: 404 em rotas**

**Causa:** SPA routing não configurado

**Solução:**
```bash
# Garantir que .htaccess redireciona para index.html
# Verificar permissões: chmod 644 .htaccess
```

### **Problema: Assets não carregam**

**Causa:** Caminhos incorretos

**Solução:**
```bash
# Verificar que pasta assets/ existe
# Verificar que ficheiros CSS/JS estão em assets/
# Limpar cache do navegador
```

---

## 📈 Monitoramento

### **Verificar Logs do Apache**

```bash
# No cPanel, aceda a: Metrics > Raw Access Logs
# Procure por erros 404 ou 500
```

### **Testar Performance**

- Google PageSpeed Insights: https://pagespeed.web.dev/
- GTmetrix: https://gtmetrix.com/
- WebPageTest: https://www.webpagetest.org/

---

## 🔄 Atualizações Futuras

### **Para Gerar Novo Build**

```bash
# 1. Fazer alterações no código-fonte
# 2. Executar build
cd /home/ubuntu/studio-vitoria-dornelas
pnpm run build

# 3. Fazer upload da nova pasta dist/
# 4. Substituir ficheiros antigos em public_html
```

---

## 📚 Recursos Úteis

- **Vite Docs:** https://vitejs.dev/
- **React Docs:** https://react.dev/
- **Tailwind CSS:** https://tailwindcss.com/
- **Apache .htaccess:** https://httpd.apache.org/docs/

---

## 📞 Suporte Técnico

**Desenvolvido por:** Squad Digital
**Email:** squad_digital@email.com
**Instagram:** @squad_digital
**Versão:** 1.0.0 (Novembro 2025)
