Cuando hablamos de desplegar una aplicación de React, tenemos muchas opciones, pero una de las más fáciles y rápidas es Vercel.
¿Qué es Vercel?
Vercel es una plataforma de la nube que facilita el despliegue de aplicaciones web. Es especialmente popular para aplicaciones construidas con Node.js y React, ya que esta empresa también desarrolla el framework Next.js, basado en estas tecnologías.
Creación de un Proyecto de Ejemplo
Para crear un proyecto de React, puedes utilizar Vite, una herramienta moderna que ofrece una experiencia de desarrollo más rápida. Aquí te muestro cómo hacerlo, primero selecciona el template de React con:
npm create vite@latest tu-proyecto-react -- --template react
o si prefieres usar pnpm:
pnpm create vite@latest tu-proyecto-react -- --template react
Después de crear tu proyecto, navega a la carpeta del proyecto e instala las dependencias:
cd tu-proyecto-react
npm install
o con pnpm:
cd tu-proyecto-react
pnpm install
Instalación del CLI de Vercel
Para desplegar tu proyecto en Vercel, necesitas instalar el CLI (Command Line Interface) de Vercel. Puedes hacerlo globalmente en tu sistema con:
npm install -g vercel
o, si usas pnpm:
pnpm add -g vercel
Para verificar que se instaló correctamente, puedes usar:
vercel -h
Autenticación en Vercel
Antes de poder desplegar tu proyecto, necesitarás autenticarte en Vercel. Esto se hace fácilmente desde la línea de comandos:
vercel login
Sigue las instrucciones en pantalla para completar el proceso de autenticación.
Despliegue del Proyecto
Una vez autenticado, estás listo para desplegar tu proyecto. Navega al directorio de tu proyecto y ejecuta:
vercel
Durante el proceso de despliegue, Vercel te hará varias preguntas. La más importante es sobre el directorio que contiene tu código. Para proyectos creados con Vite, deberías usar ./ (el directorio raíz), ya que Vite coloca el archivo de entrada (index.html) y la carpeta de construcción en el directorio raíz del proyecto. Si se te pregunta, selecciona las siguientes opciones:
- ¿Cuál es el directorio de tu código? ./
Sigue las instrucciones adicionales y elige las configuraciones que mejor se adapten a tu proyecto. Una vez completado, Vercel desplegará tu aplicación y proporcionará una URL para acceder a ella en línea.
Recuerda que también puedes conectar tu repositorio de GitHub durante el proceso de despliegue para automatizar futuras actualizaciones cada vez que realices un push a tu repositorio.
Conclusión
Vercel ofrece una forma rápida y sencilla de llevar tus aplicaciones de React a producción. Con solo unos pocos comandos, puedes tener tu proyecto en línea y accesible para todo el mundo.