codigo0/GUIA_DESPLIEGUE.md

Guía de Despliegue - EMERGES TES

Fecha: 2025-12-17
Estado: Aplicación lista para desplegar

---

📋 Estado Actual

Despliegue actual: ⚠️ NO CONFIGURADO

La aplicación está lista para desplegarse pero no hay configuración de despliegue activa. El build genera archivos estáticos en dist/ que pueden desplegarse en cualquier plataforma.

---

🚀 Opciones de Despliegue Disponibles

1. Vercel (Recomendado para React/Vite)

Ventajas:

• ✅ Integración perfecta con Vite/React
• ✅ Deploy automático desde Git
• ✅ HTTPS automático
• ✅ CDN global
• ✅ Preview deployments
• ✅ Gratis para proyectos personales

Pasos:

1. Instalar Vercel CLI:

   npm install -g vercel
   

2. Desplegar:

   vercel
   

3. O conectar repositorio en vercel.com:

   • Ir a vercel.com
   • Conectar repositorio GitHub
   • Configuración automática detectada

Configuración automática:

• Build Command: npm run build
• Output Directory: dist
• Install Command: npm install

Archivo de configuración (opcional): vercel.json

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "framework": "vite",
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

---

2. Netlify

Ventajas:

• ✅ Fácil deploy desde Git
• ✅ Drag & drop de carpeta dist/
• ✅ HTTPS automático
• ✅ Formularios y funciones serverless
• ✅ Gratis para proyectos personales

Pasos:

Opción A: Desde Git

1. Ir a netlify.com
2. Conectar repositorio
3. Configurar:
   • Build command: npm run build
   • Publish directory: dist

Opción B: Drag & Drop

1. Ejecutar npm run build
2. Arrastrar carpeta dist/ a Netlify

Archivo de configuración: netlify.toml

[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

---

3. GitHub Pages

Ventajas:

• ✅ Gratis con repositorio público
• ✅ Integración con GitHub
• ✅ Personalización de dominio

Pasos:

1. Configurar Vite para GitHub Pages:

   Editar vite.config.ts:

   export default defineConfig({
     base: '/protocolo-r-pido/', // Nombre del repositorio
     // ... resto de configuración
   });
   

2. Crear GitHub Action: .github/workflows/deploy.yml

   name: Deploy to GitHub Pages
   
   on:
     push:
       branches: [ main ]
   
   jobs:
     build-and-deploy:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v3
   
         - name: Setup Node.js
           uses: actions/setup-node@v3
           with:
             node-version: '18'
             cache: 'npm'
   
         - name: Install dependencies
           run: npm install
   
         - name: Build
           run: npm run build
   
         - name: Deploy to GitHub Pages
           uses: peaceiris/actions-gh-pages@v3
           with:
             github_token: ${{ secrets.GITHUB_TOKEN }}
             publish_dir: ./dist
   

3. Habilitar GitHub Pages:

   • Settings → Pages
   • Source: GitHub Actions

---

4. Servidor Propio (VPS/Shared Hosting)

Pasos:

1. Build de producción:

   npm run build
   

2. Subir carpeta dist/ al servidor:

   # Ejemplo con rsync
   rsync -avz dist/ usuario@servidor:/var/www/html/
   
   # O con FTP/SFTP
   # Subir todo el contenido de dist/ a la raíz del servidor web
   

3. Configurar servidor web:

   Nginx:

   server {
       listen 80;
       server_name tu-dominio.com;
       root /var/www/html;
       index index.html;
   
       location / {
           try_files $uri $uri/ /index.html;
       }
   }
   

   Apache (.htaccess):

   <IfModule mod_rewrite.c>
     RewriteEngine On
     RewriteBase /
     RewriteRule ^index\.html$ - [L]
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteCond %{REQUEST_FILENAME} !-d
     RewriteRule . /index.html [L]
   </IfModule>
   

---

📦 Preparación para Despliegue

1. Verificar Build

# Build de producción
npm run build

# Verificar que dist/ se creó correctamente
ls -la dist/

# Previsualizar build localmente
npm run preview

2. Verificar Archivos Críticos

Asegurar que estos archivos estén en dist/:

• ✅ index.html
• ✅ assets/ (JS, CSS)
• ✅ manual/ (93 archivos .md)
• ✅ manifest.json (para PWA)

3. Verificar Rutas

Las rutas de React Router necesitan configuración especial:

• Todas las rutas deben redirigir a index.html
• Configurar rewrites/redirects según la plataforma

---

🔧 Configuración Recomendada por Plataforma

Vercel

Crear vercel.json:

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "framework": "vite",
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ],
  "headers": [
    {
      "source": "/manual/(.*)",
      "headers": [
        {
          "key": "Content-Type",
          "value": "text/markdown"
        }
      ]
    }
  ]
}

Netlify

Crear netlify.toml:

[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[[headers]]
  for = "/manual/*"
  [headers.values]
    Content-Type = "text/markdown"

GitHub Pages

Modificar vite.config.ts:

export default defineConfig({
  base: process.env.NODE_ENV === 'production' 
    ? '/protocolo-r-pido/' // Cambiar por nombre del repo
    : '/',
  // ... resto de configuración
});

---

✅ Checklist Pre-Despliegue

• Build exitoso (npm run build)
• Verificar que dist/ contiene todos los archivos
• Verificar que los 93 archivos .md están en dist/manual/
• Probar build localmente (npm run preview)
• Verificar rutas funcionan correctamente
• Verificar PWA (manifest.json, service worker si existe)
• Configurar variables de entorno si es necesario
• Configurar dominio personalizado (opcional)

---

🌐 URLs de Ejemplo

Después del despliegue, la aplicación estará disponible en:

• Vercel: https://protocolo-r-pido.vercel.app
• Netlify: https://protocolo-r-pido.netlify.app
• GitHub Pages: https://usuario.github.io/protocolo-r-pido
• Servidor propio: https://tu-dominio.com

---

📝 Notas Importantes

Archivos .md en Producción

Los archivos .md en public/manual/ se copian automáticamente a dist/manual/ durante el build. Asegurar que:

1. ✅ Los 93 archivos estén en public/manual/
2. ✅ El build los incluya en dist/manual/
3. ✅ Las rutas en el código apunten a /manual/...

PWA (Progressive Web App)

La aplicación tiene manifest.json pero falta:

• ⚠️ Service Worker (para funcionamiento offline completo)
• ⚠️ Iconos de la app (para instalación)

Variables de Entorno

Actualmente no hay variables de entorno necesarias. Si se agregan en el futuro:

• Crear .env.example
• Documentar variables requeridas
• Configurar en plataforma de despliegue

---

🚀 Comando Rápido de Despliegue

Vercel (Más rápido)

npm install -g vercel
vercel

Netlify

npm run build
# Arrastrar dist/ a netlify.com

GitHub Pages

# Configurar GitHub Action (ver arriba)
git push origin main

---

📊 Comparación de Plataformas

Plataforma	Facilidad	Costo	Performance	Recomendado
Vercel	⭐⭐⭐⭐⭐	Gratis	Excelente	✅ Sí
Netlify	⭐⭐⭐⭐	Gratis	Muy buena	✅ Sí
GitHub Pages	⭐⭐⭐	Gratis	Buena	⚠️ Requiere config
Servidor propio	⭐⭐	Variable	Variable	⚠️ Más trabajo

---

Recomendación: Vercel para facilidad y performance óptima con Vite/React.

---

Estado: ✅ Aplicación lista para desplegar - Falta configurar plataforma