Despliegue

1. Despliegue de la Aplicación React #

El despliegue de una aplicación React implica moverla de tu entorno local a un servidor para que los usuarios puedan acceder a ella en la web. Existen varias opciones de hosting populares, cada una con características diferentes que pueden adaptarse a distintos proyectos.

Opciones de despliegue #

1. Vercel

   • Vercel es una plataforma popular para desplegar aplicaciones frontend, especialmente Next.js y React.
   • Proporciona un proceso de despliegue rápido y gratuito.
   • Integra despliegues automáticos al hacer push en GitHub, GitLab o Bitbucket.

2. Netlify

   • Similar a Vercel, Netlify ofrece un despliegue fácil para proyectos frontend.
   • Incluye características como previsualización de pull requests, control de acceso y un CDN para optimizar el rendimiento.
   • Se sincroniza con repositorios en GitHub, GitLab y Bitbucket.

3. GitHub Pages

   • GitHub Pages es ideal para proyectos simples y estáticos.
   • Es gratuito y permite alojar sitios directamente desde un repositorio de GitHub.
   • Sin embargo, tiene limitaciones para aplicaciones que necesitan un backend o API.

Preparación de la aplicación para producción #

Antes de desplegar, es importante optimizar la aplicación para el entorno de producción.

1. Construir la aplicación:

   • Ejecuta npm run build en la terminal. Este comando crea una versión optimizada de la aplicación en una carpeta llamada build, lista para producción.

2. Verificar las rutas:

   • Asegúrate de que todas las rutas funcionan correctamente, ya que en producción los enlaces rotos o mal configurados pueden causar errores.

3. Configurar variables de entorno:

   • Si tienes variables sensibles (como URLs de APIs), asegúrate de que estén configuradas en un archivo .env y en el servicio de hosting (Vercel o Netlify, por ejemplo).

4. Optimización:

   • Asegúrate de eliminar código o dependencias no utilizadas y usa useMemo, useCallback, y lazy para optimizar el rendimiento de la aplicación.

Ejercicio práctico: Despliegue de la aplicación final #

Para el despliegue, usaremos Vercel como ejemplo.

Paso a Paso para Desplegar en Vercel:

1. Crear un repositorio en GitHub:

   • Asegúrate de que tu proyecto esté subido a GitHub. Si aún no lo has subido, inicializa un repositorio, haz un commit de tu código y empuja los cambios:

     1git init
     2git add .
     3git commit -m "Subir proyecto a GitHub"
     4git branch -M main
     5git remote add origin <URL de tu repositorio>
     6git push -u origin main

2. Conectar con Vercel:

   • Inicia sesión en Vercel (puedes registrarte con tu cuenta de GitHub para mayor comodidad).
   • En el tablero de Vercel, haz clic en “Import Project” y selecciona tu repositorio de GitHub.

3. Configuración de despliegue:

   • Vercel detectará automáticamente que es un proyecto React y seleccionará las configuraciones necesarias.
   • Si necesitas configurar variables de entorno, ve a Settings > Environment Variables en el proyecto de Vercel y agrega las variables necesarias (por ejemplo, URLs de APIs, claves, etc.).

4. Desplegar la aplicación:

   • Haz clic en Deploy. Vercel construirá y desplegará tu proyecto automáticamente.
   • Una vez completado, Vercel te proporcionará una URL donde estará disponible tu aplicación.

5. Despliegues automáticos:

   • Cada vez que hagas un push a la rama principal de tu proyecto en GitHub, Vercel actualizará automáticamente el despliegue. Esto facilita el mantenimiento y las actualizaciones de la aplicación.

Despliegue en otras plataformas #

• Netlify:

  • Similar a Vercel, pero con algunos pasos de configuración específicos. En Netlify, selecciona New Site from Git y conecta tu repositorio de GitHub.
  • Configura las variables de entorno y selecciona npm run build como comando de construcción.

• GitHub Pages:

  • Para proyectos simples, GitHub Pages permite alojar aplicaciones frontend desde la rama gh-pages.
  • Puedes usar el paquete gh-pages para desplegar automáticamente:

    1npm install gh-pages --save-dev

    Luego, configura el package.json:

    1"homepage": "https://<nombre_usuario>.github.io/<nombre_proyecto>",
    2"scripts": {
    3  "predeploy": "npm run build",
    4  "deploy": "gh-pages -d build"
    5}

  • Ejecuta npm run deploy para desplegar la aplicación en GitHub Pages.