Cómo desplegar una aplicación React + Vite usando Vercel

Si tienes una web hecha con React + Vite y quieres que esté disponible en internet, Vercel es una forma sencilla y gratuita para desplegar.

Antes de empezar, necesitamos:

Una cuenta en Vercel
Si no tienes, puedes registrarte Vercel
Subir tu proyecto a Github, GitLab o Bitbucket.
Revisa que la carpeta src esté en la raíz del proyecto para evitar problemas al generar los archivos.

1. Prepara tu proyecto

Primero, necesitas crear los archivos listos para producción. Esto hará que tu app funcione de manera optimizada cuando esté en línea. Desde la terminal, en la carpeta de tu proyecto, ejecuta:

npm run build

Captura mostrando la terminal con el comando npm run build ejecutado y la carpeta dist generada.

Este comando generará una carpeta dist

Captura mostrando la carpeta dist generada.

2. Inicia sesión en Vercel

Ve a Vercel e inicia sesión con tu cuenta de GitHub, GitLab o Bitbucket en este caso usaremos Github. (o regístrate si es la primera vez).
Dentro de tu cuenta, busca el botón New Project y haz clic ahí.

Captura de la interfaz de Vercel mostrando el botón

3. Selecciona el repositorio de GitHub

Después de hacer clic en New Project, te aparecerá una lista con tus repositorios de GitHub.
Busca el repositorio donde tienes tu proyecto React+Vite, en este caso, genshinimpact, seleccionamos import.

Captura mostrando la lista de repositorios en Vercel y el proyecto seleccionado.

4. Configura el proyecto en Vercel

Vercel debería detectar automáticamente que tu proyecto usa Vite, y activa las siguientes opciones:

Framework Preset: Vite.
Build Command: vite build.
Output Directory: dist.

Captura mostrando las configuraciones del proyecto en Vercel con

Captura mostrando las configuraciones del proyecto en Vercel

5. Despliega tu app

Haz clic en Deploy.
Vercel empezará a construir tu app y luego la desplegará. Este proceso puede tardar un poco dependiendo del tamaño del proyecto.

Captura mostrando el botón de deploy

Captura mostrando el proceso de despliegue en Vercel

Cuando termine, Vercel te dará un enlace donde puedes ver tu pagina en línea. Haz clic y verifica que todo funcione.

Captura del proceso terminado con el dominio de la pagina

Captura del navegador con la pagina desplegada.

Desplegar una aplicación React + Vite en Vercel es una forma práctica de tener tu página en línea de forma sencilla. Además, tiene la ventaja de actualizar automáticamente tu app cuando haces cambios en tu repositorio. Sin embargo, no es la única opción gratuita que puedes usar. Otras plataformas que también puedes considerar son:

Netlify
GitHub Pages
Render
Surge
Firebase Hosting