Crear un build de React usando Vite

por
Tiempo de lectura: 3 minutos

Aquí tienes un tutorial paso a paso sobre cómo crear un build con Vite y desplegarlo para probarlo en un servidor local utilizando Nginx. Este tutorial asume que ya tienes Node.js y npm instalados en tu máquina.

Paso 1: Crear una nueva aplicación Vite (si ya la tienes creada, puedes saltarte este paso)

  1. Abre la terminal y ejecuta el siguiente comando para crear una nueva aplicación Vite:
   npm create vite my-vite-app
  1. Selecciona la plantilla que prefieras (por ejemplo, «react» o «vue») y sigue las instrucciones para crear el proyecto.
  2. Cambia al directorio del proyecto:
   cd my-vite-app

Paso 2: Desarrollar y probar localmente

  1. Inicia el servidor de desarrollo de Vite:
   npm run dev

Esto iniciará un servidor de desarrollo en http://localhost:3000. Abre tu navegador y visita esa URL para ver tu aplicación en desarrollo.

Paso 3: Construir la aplicación

  1. Cuando estés listo para construir la aplicación para producción, detén el servidor de desarrollo (pulsa Ctrl + C en la terminal).
  2. Ejecuta el siguiente comando para construir la aplicación:
   npm run build

Este comando generará una carpeta dist en tu directorio de proyecto que contiene los archivos optimizados para producción.

Ahora podemos hacer dos pasos distintos:

  1. Crear un servidor de desarrollo.
  2. Crear un servidor de producción.

Crear un servidor de desarrollo para probar el build realizado

Para desplegar el servidor de pruebas, vamos a usar serve, primero tenemos que instalarlo:

npm install -g serve

Este comando instalará la herramienta serve de forma global, lo que significa que podrás acceder a ella desde cualquier lugar en tu sistema.

Después de instalar serve globalmente, puedes utilizarlo para servir tu aplicación Vite construida en producción. Aquí está el proceso:

  1. Asegúrate de que hayas construido tu aplicación Vite:
   npm run build
  1. Navega al directorio dist:
   cd dist
  1. Ejecuta el siguiente comando para iniciar un servidor HTTP simple con serve:
   serve

Esto iniciará un servidor en http://localhost:5000 (o un puerto diferente si el 5000 está ocupado).

  1. Abre tu navegador y visita http://localhost:5000 para ver tu aplicación Vite desplegada utilizando serve.

Este método es muy útil para pruebas locales rápidas y también es adecuado para entornos de producción más simples. Sin embargo, si planeas realizar una implementación más seria, es posible que desees considerar la configuración de un servidor web más robusto como Nginx o Apache.

Configurar un servidor web (Nginx)

  1. Asegúrate de tener Nginx instalado. Si no lo tienes, puedes instalarlo según las instrucciones proporcionadas anteriormente.
  2. Crea un archivo de configuración para tu aplicación en Nginx. Puedes usar el siguiente comando para abrir un nuevo archivo:
   sudo nano /etc/nginx/sites-available/my-vite-app

Sustituye «my-vite-app» con el nombre que desees.

  1. Agrega la configuración Nginx básica:
   server {
       listen 80;
       server_name localhost; # Cambia esto según tu dominio o IP

       location / {
           root /ruta/a/tu/proyecto/my-vite-app/dist; # Reemplaza con la ruta real a tu carpeta dist
           try_files $uri $uri/ /index.html;
       }

       # Puedes agregar más configuraciones según sea necesario
   }

Asegúrate de reemplazar «/ruta/a/tu/proyecto/my-vite-app/dist» con la ruta completa al directorio dist de tu aplicación.

  1. Guarda y cierra el archivo.
  2. Crea un enlace simbólico en el directorio sites-enabled:
   sudo ln -s /etc/nginx/sites-available/my-vite-app /etc/nginx/sites-enabled/
  1. Reinicia Nginx para aplicar los cambios:
   sudo service nginx restart

O en sistemas más modernos:

   sudo systemctl restart nginx

Probar la aplicación desplegada

  1. Abre tu navegador y visita http://localhost o la dirección IP de tu servidor.
  2. Deberías ver tu aplicación Vite desplegada utilizando Nginx.

¡Eso es todo! Has creado un build con Vite y desplegado tu aplicación para probarla localmente con Nginx. Ten en cuenta que estos pasos son básicos y pueden necesitar ajustes según tus necesidades específicas y la configuración de tu servidor.

Post Views: 114

Deja un comentario