Customize Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.

No cookies to display.

Crear un build de React usando Vite

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:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm create vite my-vite-app
npm create vite my-vite-app
   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:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
cd my-vite-app
cd my-vite-app
   cd my-vite-app

Paso 2: Desarrollar y probar localmente

  1. Inicia el servidor de desarrollo de Vite:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm run dev
npm run dev
   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:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm run build
npm run build
   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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm install -g serve
npm install -g serve
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:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm run build
npm run build
   npm run build
  1. Navega al directorio dist:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
cd dist
cd dist
   cd dist
  1. Ejecuta el siguiente comando para iniciar un servidor HTTP simple con serve:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
serve
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:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
sudo nano /etc/nginx/sites-available/my-vite-app
sudo nano /etc/nginx/sites-available/my-vite-app
   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:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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
}
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 }
   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:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
sudo ln -s /etc/nginx/sites-available/my-vite-app /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/my-vite-app /etc/nginx/sites-enabled/
   sudo ln -s /etc/nginx/sites-available/my-vite-app /etc/nginx/sites-enabled/
  1. Reinicia Nginx para aplicar los cambios:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
sudo service nginx restart
sudo service nginx restart
   sudo service nginx restart

O en sistemas más modernos:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
sudo systemctl restart nginx
sudo systemctl restart nginx
   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.

0

Deja un comentario