Cómo desplegar un frontend con React y Vite en un VPS (sin volverte loco) - Episodio 33

Pensaba que instalar React sería fácil...

Hasta que me encontré con permisos, puertos bloqueados y un frontend en blanco

Cómo desplegar un frontend con React y Vite en un VPS 🗓 Diario de un SaaS

Nunca había montado nada con react y llevarlo a un VPS con AlmaLinux fue otra historia.

Lo que empezó como una simple instalación se convirtió en un viaje entre permisos denegados, puertos misteriosamente bloqueados y una pantalla blanca que me miraba con desprecio.

Si tú también estás pensando en montar tu frontend con React y Vite en un servidor, este post puede ahorrarte unas cuantas horas de frustración.

🛠️ Por qué Vite y no Create React App

Elegí Vite porque es más rápido, más liviano y mucho más simple de configurar para entornos de producción.

A ver, CRA está genial para prototipos, pero Vite arranca más rápido, compila mejor y el bundle final es más pequeño.

npm create vite@latest my-frontend -- --template react
cd my-frontend
npm install

✅ Instalación de Node.js y NPM en AlmaLinux

Para poder usar Vite, necesitaba tener Node.js. Y no, el repo por defecto de AlmaLinux no sirve.

curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo dnf install -y nodejs
node -v
npm -v

✅ Primeros problemas con permisos

Al intentar levantar la app con npm run dev, el puerto 5173 estaba bloqueado desde fuera. Además, el usuario no tenía permisos para ejecutar ciertos scripts.

Soluciones:

• Abrí el puerto en el firewall con:

sudo firewall-cmd --add-port=5173/tcp --permanent
sudo firewall-cmd --reload

• Ejecuté como un usuario sin restricciones de permisos sobre el directorio del proyecto.

✅ Asegurar que corra en producción

Para producción, no usé el server de desarrollo. Compilé el proyecto y serví los archivos estáticos con NGINX:

npm run build

Esto genera una carpeta dist/ con el frontend listo para producción.

Luego, configuré NGINX para servir esa carpeta:

server {
    listen 80;
    server_name midominio.com;

    root /var/www/my-frontend/dist;
    index index.html;

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

📊 Prueba final y resultados

Después de todo el setup, accedí al dominio... y por fin!

El frontend apareció como debería.

Sin errores.

Sin pantalla en blanco.

Sin drama.

Y con un bundle mucho más rápido que con CRA.

🧠 Reflexión final

Llevar React a un servidor real tiene su miga, entra en juego muchos factores que no ves en localhost: permisos, puertos, firewall, configuración de NGINX...

Al principio parece un caos, pero con paciencia (y logs) se puede montar un frontend en condiciones.

Y Vite, en ese sentido, es un gran aliado.

Ya que es rápido, limpio, minimalista.

Ideal para cuando no quieres pelearte con un monstruo como Webpack.

Ahora tengo un frontend funcionando en mi VPS, sirviendo estáticos con NGINX, y listo para integrarse con mi backend Flask.

💭 ¿También te has peleado con despliegues de frontend?

¡Cuéntame tus batallas en comentarios!

 

Si quieres conocer otros artículos parecidos a Cómo desplegar un frontend con React y Vite en un VPS (sin volverte loco) - Episodio 33 puedes visitar la categoría Proyecto-IA.