# 🚀 Como Publicar a Aplicação Web no Servidor

Este guia explica como fazer o build e publicar a aplicação web Smart Agenda em um servidor de produção.

## 📦 Build de Produção

### 1. Criar o Build

Na pasta `web`, execute:

```bash
cd web
npm run build
```

Isso criará uma pasta `dist/` com os arquivos otimizados para produção.

### 2. Verificar o Build Localmente

Antes de publicar, pode testar o build localmente:

```bash
npm run preview
```

Isso servirá o build em `http://localhost:4173` (porta padrão do Vite preview).

## 🌐 Opções de Publicação

### Opção 1: Servidor Estático (Nginx, Apache, etc.)

#### Nginx

1. Copie o conteúdo da pasta `dist/` para o diretório do servidor web:
```bash
cp -r web/dist/* /var/www/smart-agenda/
```

2. Configure o Nginx para servir os arquivos estáticos:
```nginx
server {
    listen 80;
    server_name seu-dominio.com;
    root /var/www/smart-agenda;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}
```

3. Reinicie o Nginx:
```bash
sudo systemctl restart nginx
```

#### Apache (Instruções Detalhadas)

##### Passo 1: Criar o Build

Na pasta do projeto:
```bash
cd web
npm run build
```

Isso criará a pasta `dist/` com os arquivos otimizados.

##### Passo 2: Copiar Arquivos para o Servidor

**Opção A - Via SCP (se o servidor for remoto):**
```bash
scp -r web/dist/* usuario@seu-servidor.com:/var/www/html/smart-agenda/
```

**Opção B - Via FTP/SFTP:**
- Conecte-se ao servidor via FTP/SFTP
- Navegue até `/var/www/html/` (ou o diretório configurado)
- Crie a pasta `smart-agenda` se não existir
- Faça upload de todos os arquivos da pasta `web/dist/`

**Opção C - No próprio servidor:**
```bash
# Se já estiver no servidor
cp -r /caminho/para/projeto/web/dist/* /var/www/html/smart-agenda/
```

##### Passo 3: Criar arquivo .htaccess

Crie um arquivo `.htaccess` na pasta `/var/www/html/smart-agenda/`:

```apache
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  
  # Não reescrever arquivos e diretórios existentes
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  
  # Redirecionar tudo para index.html (SPA routing)
  RewriteRule . /index.html [L]
</IfModule>

# Habilitar compressão GZIP
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/json
</IfModule>

# Cache de arquivos estáticos
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType text/html "access plus 0 seconds"
</IfModule>
```

##### Passo 4: Configurar Virtual Host (Opcional mas Recomendado)

Crie ou edite o arquivo de configuração do Apache:

**Ubuntu/Debian:**
```bash
sudo nano /etc/apache2/sites-available/smart-agenda.conf
```

**CentOS/RHEL:**
```bash
sudo nano /etc/httpd/conf.d/smart-agenda.conf
```

Adicione a configuração:

```apache
<VirtualHost *:80>
    ServerName seu-dominio.com
    ServerAlias www.seu-dominio.com
    
    DocumentRoot /var/www/html/smart-agenda
    
    <Directory /var/www/html/smart-agenda>
        Options -Indexes +FollowSymLinks
        AllowOverride All
        Require all granted
        
        # Permitir arquivo .htaccess
        AllowOverride FileInfo
    </Directory>
    
    # Logs
    ErrorLog ${APACHE_LOG_DIR}/smart-agenda-error.log
    CustomLog ${APACHE_LOG_DIR}/smart-agenda-access.log combined
</VirtualHost>
```

**Para Ubuntu/Debian, ative o site:**
```bash
sudo a2ensite smart-agenda.conf
sudo systemctl reload apache2
```

**Para CentOS/RHEL:**
```bash
sudo systemctl reload httpd
```

##### Passo 5: Habilitar Módulos Necessários

```bash
# Ubuntu/Debian
sudo a2enmod rewrite
sudo a2enmod headers
sudo systemctl restart apache2

# CentOS/RHEL
# Os módulos geralmente já vêm habilitados
sudo systemctl restart httpd
```

##### Passo 6: Verificar Permissões

```bash
# Definir proprietário correto (ajuste conforme necessário)
sudo chown -R www-data:www-data /var/www/html/smart-agenda

# Ou se usar outro usuário:
sudo chown -R apache:apache /var/www/html/smart-agenda

# Definir permissões
sudo chmod -R 755 /var/www/html/smart-agenda
```

##### Passo 7: Testar

1. Acesse `http://seu-servidor/smart-agenda/` ou `http://seu-dominio.com`
2. Verifique se a aplicação carrega
3. Teste as rotas (ex: `/login`, `/explorar`)
4. Verifique o console do navegador para erros

##### Configuração HTTPS (SSL/TLS) - Recomendado

Para produção, configure HTTPS usando Let's Encrypt:

```bash
# Instalar Certbot
sudo apt install certbot python3-certbot-apache  # Ubuntu/Debian
sudo yum install certbot python3-certbot-apache  # CentOS/RHEL

# Obter certificado
sudo certbot --apache -d seu-dominio.com -d www.seu-dominio.com
```

##### Troubleshooting Apache

**Problema: Rotas não funcionam (404)**
- Verifique se o módulo `rewrite` está habilitado
- Confirme que `AllowOverride All` está no VirtualHost
- Verifique se o `.htaccess` está no lugar correto

**Problema: Permissão negada**
```bash
sudo chmod -R 755 /var/www/html/smart-agenda
sudo chown -R www-data:www-data /var/www/html/smart-agenda
```

**Problema: Assets não carregam**
- Verifique o caminho base no `vite.config.ts`
- Confirme que todos os arquivos foram copiados
- Verifique as permissões dos arquivos

**Ver logs de erro:**
```bash
# Ubuntu/Debian
sudo tail -f /var/log/apache2/error.log

# CentOS/RHEL
sudo tail -f /var/log/httpd/error_log
```

### Opção 2: Vercel (Recomendado - Grátis)

1. Instale a CLI da Vercel:
```bash
npm i -g vercel
```

2. Na pasta `web`, execute:
```bash
vercel
```

3. Siga as instruções no terminal para configurar o projeto.

4. Para deploy automático, conecte o repositório GitHub na dashboard da Vercel.

### Opção 3: Netlify (Grátis)

1. Instale a CLI do Netlify:
```bash
npm i -g netlify-cli
```

2. Na pasta `web`, execute:
```bash
netlify deploy --prod --dir=dist
```

3. Ou arraste a pasta `dist/` para o site do Netlify.

### Opção 4: GitHub Pages

1. Instale o plugin do Vite:
```bash
npm install --save-dev vite-plugin-gh-pages
```

2. Atualize `vite.config.ts`:
```typescript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import ghPages from 'vite-plugin-gh-pages';

export default defineConfig({
  plugins: [react(), ghPages()],
  base: '/SmartAgendaMobile/', // Nome do repositório
  server: { 
    port: 5173,
    host: '0.0.0.0',
    strictPort: false,
  },
});
```

3. Adicione script no `package.json`:
```json
{
  "scripts": {
    "deploy": "npm run build && gh-pages -d dist"
  }
}
```

4. Execute:
```bash
npm run deploy
```

### Opção 5: Servidor Node.js com Express

1. Instale as dependências:
```bash
npm install express
```

2. Crie um arquivo `server.js` na pasta `web`:
```javascript
const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'dist')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Servidor rodando na porta ${port}`);
});
```

3. Adicione ao `package.json`:
```json
{
  "scripts": {
    "start:prod": "node server.js"
  }
}
```

4. Execute:
```bash
npm run build
npm run start:prod
```

### Opção 6: Docker

1. Crie um `Dockerfile` na pasta `web`:
```dockerfile
FROM node:18-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

2. Crie `nginx.conf`:
```nginx
server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}
```

3. Build e execute:
```bash
docker build -t smart-agenda-web .
docker run -p 80:80 smart-agenda-web
```

## ⚙️ Configurações Importantes

### Variáveis de Ambiente

Se precisar de variáveis de ambiente, crie um arquivo `.env.production`:

```env
VITE_API_URL=https://api.seudominio.com
VITE_APP_NAME=Smart Agenda
```

### Base Path

Se a aplicação não estiver na raiz do domínio, configure o `base` no `vite.config.ts`:

```typescript
export default defineConfig({
  base: '/smart-agenda/',
  // ...
});
```

## 🔍 Verificações Pós-Deploy

1. ✅ Verifique se todos os assets carregam corretamente
2. ✅ Teste todas as rotas (SPA routing)
3. ✅ Verifique o console do navegador para erros
4. ✅ Teste em diferentes navegadores
5. ✅ Verifique responsividade mobile

## 📝 Notas

- O build cria arquivos estáticos (HTML, CSS, JS)
- Não é necessário Node.js em produção (exceto se usar servidor Express)
- Certifique-se de que o servidor está configurado para servir `index.html` em todas as rotas (SPA routing)
- Para HTTPS, configure SSL/TLS no servidor

## 🆘 Problemas Comuns

### Rotas não funcionam após refresh
- Configure o servidor para redirecionar todas as rotas para `index.html`

### Assets não carregam
- Verifique o `base` path no `vite.config.ts`
- Certifique-se de que os arquivos estão no diretório correto

### Erro 404
- Configure o servidor para servir `index.html` em todas as rotas
