Publicar proyectos frontend con JavaScript y Vercel

No permitas que tus creaciones web caigan en el olvido. Averigua cómo publicar proyectos frontend con JavaScript y Vercel totalmente gratis.

Vercel da vida a tus proyectos
Vercel da vida a tus proyectos

Estarás de acuerdo conmigo en que de poco (o nada) sirve desarrollar proyectos web, si luego estos se quedan guardados en un cajón, acumulando polvo.

Por muy espectacular que sea tu aplicación, si no la expones al mundo, es como si ésta no existiera.

Por esta razón, voy a dedicar el artículo de hoy a explicarte cómo publicar tus trabajos frontend con JavaScript y Vercel, de forma completamente gratis.

Antes de entrar en materia, déjame que empiece contándote qué es Vercel, y porqué he decidido dedicarle una entrada del blog.

Vercel, Desarrolla. Previsualiza. Publica.

Vercel es una plataforma de “deploy” y alojamiento web que, a grandes rasgos, permite publicar aplicaciones web, mediante un sistema de desarrollo e integración contínua.

Eso significa que, conforme avanzas en la creación de tu web, puedes desplegar cada nueva versión de forma totalmente automatizada.

Gracias a esto, puedes medir rápidamente el compromiso de tus usuarios, ya desde una versión temprana. Lo cual es excelente para testear y realizar pruebas de concepto.

Pero donde realmente brilla esta plataforma, y el motivo por el cual he elegido escribir sobre ella, es por la fácil integración que ofrece con cualquier desarrollo frontend.

Instalar, configurar y usar Vercel es extremadamente sencillo, con unas pocas instrucciones bastará para que tu web esté al alcance de cualquier navegador del mundo.

Pero no vayamos tan deprisa, más adelante te explicaré paso a paso, cómo realizar dicha integración.

Antes, me gustaría listar una serie de alternativas a Vercel, ya que es importante conocer qué otras opciones existen en el mercado.

Otras plataformas de deploy, alternativas a Vercel.

A decir verdad, no he probar todas las herramientas que aquí te presento. No obstante, todas ellas son ampliamente conocidas por la comunidad

De modo que, si quieres profundizar más sobre alguna de ellas, seguro que encontrarás muchos recursos fácilmente. 

También mencionar que, evidentemente, este listado no contempla absolutamente todas las plataformas de alojamiento web, se trata solo de algunas de las más conocidas, listadas sin ningún orden en particular.

Publica tu primer proyecto a través de Vercel

Ahora sí, vamos a entrar de lleno a publicar nuestro primer proyecto frontend a través de la plataforma Vercel.

Como suele ser habitual en este tipo de servicios, el primer paso será crear una cuenta de usuario. Por supuesto, si este punto ya lo tienes resuelto, puedes saltarte los siguientes párrafos.

Vercel permite crear una cuenta a través de servicios de terceros basados en Git como Github, GitLab o Bitbucket.

Opciones de login Vercel
Opciones de login Vercel

Sin embargo, para simplificar las cosas, en éste tutorial crearemos una cuenta mediante un correo electrónico personal.

Registro mediante correo electónico
Registro mediante correo electónico

Este proceso te mandará un mensaje a tu bandeja de entrada, para confirmar que se trata de un correo válido.

Confirmación email
Confirmación email

Tras corroborar que, efectivamente así es, ya podrás acceder a la plataforma usando este método de autenticación.

Si entras en la plataforma, deberías ver un “dashboard” parecido a este.

Dashboard Vercel
Dashboard Vercel

Llegados a este punto, es probable que tengas la tentación de hacer click en el botón “Create a New Project”. 

¡Pero espera!, ya que en las próximas líneas, te guiaré para que aprendas a realizar el proceso de “deploy” íntegramente desde tu proyecto frontend.

Por consiguiente, para poder avanzar al siguiente punto, es necesario disponer de un proyecto frontend en tu ordenador.

Puedes preparar uno de cero, o bien aprovechar el entorno de desarrollo basado en Vite que creamos en el artículo de hace unas semanas. 

Preparar un entorno de trabajo frontend con Vite

Te dejo un enlace al repositorio de Github para que puedas descargarte ese proyecto base, y utilizarlo como punto de partida para la guía de hoy.

https://github.com/Danivalldo/libreriasjs/tree/master/MASTER_VITE

No te preocupes mucho por el contenido y funcionalidades de tu aplicación. En realidad bastará con que muestres un texto “hello world” en pantalla.

Recuerda que el objetivo de hoy es distribuir tu web mediante Vercel, así que vamos a mantener las cosas simples.

Como dije, vamos a realizar la integración con Vercel directamente desde nuestro dispositivo. Así que empezamos instalando la dependencia necesaria a través del siguiente comando

npm install vercel

Esta librería está preparada para utilizar directamente desde cualquier CLI.

No obstante, lo que vamos a hacer, es incluir una propiedad nueva entre los «scripts» de nuestro archivo package.json

De este modo incluimos el proceso de «deploy» entre las instrucciones del entorno de desarrollo.

"scripts": {
    "deploy": "vercel --prod"
  }

En este punto, si consideras que tu aplicación ya está lista para ser publicada, lanza el comando:

npm run deploy

Debido a que es la primera vez que ejecutas esta instrucción, Vercel te preguntará una serie de cuestiones para configurar adecuadamente el proceso de “deploy”.

Estas preguntas son las siguientes:

Set up and deploy

Este primer “prompt” nos pide validar qué proyecto deseamos publicar. Por ese motivo, aparece la ruta en tu sistema operativo hacia el directorio raíz. Selecciona “Y”, y aprieta la tecla “enter” sin miedo.

Which scope do you want to deploy to?

Vercel también se asegura de que asocies la publicación a una cuenta activa de la plataforma. A menos que tengas más de una, te debería sugerir la que has creado en los párrafos anteriores.

Link to existing project?

¿Recuerdas que antes te he pedido que no generes una aplicación nueva a través del panel de gestión web?. Bien, pues precisamente era porque ahora Vercel creará un espacio nuevo para nosotros.

What’s your project’s name?

Evidentemente, hay que poner un nombre a tu creación, así que intenta ser descriptivo.

In which directory is your code located?

En mi opinión, esta pregunta debería ir a continuación de la primera. Básicamente Vercel nos pregunta si el código fuente de nuestra aplicación se encuentra en la raíz del directorio seleccionado.

Prácticamente el 100% de las veces será así, de modo que puedes seleccionar “./”.

Por último, pero no por ello menos importante, deberemos asignar los comandos de instalación, compilación y desarrollo. Así como el directorio de distribución.

Una de las genialidades de Vercel es que es capaz de detectar una gran cantidad de espacios de trabajo basados en Node.js.

Entre otros, reconoce configuraciones tan famosas como “Create React App”, “Angular”, “Next.js”, “Vue.js” y , por supuesto, “Vite”. Por ese motivo, es posible que acierte con los ajustes predeterminados.

En cualquier caso, te dejo la configuración que funciona para mi ejemplo.

  • Build Command: npm run build
  • Development Command: vite –port $PORT
  • Install Command: `yarn install`, `pnpm install`, or `npm install`
  • Output Directory: dist

Ten en cuenta que estos parámetros se pueden editar a través de la aplicación web siempre que lo desees. 

Tras unos pocos segundos de espera, si todo ha ido bien, Vercel te devuelve una URL de producción. Si accedes mediante un navegador a esa dirección verás tu aplicación web funcionando.

¡Enhorabuena! Acabas de publicar el primero de mucho proyectos frontend con JavaScript y Vercel. Este es mi resultado:

https://libreriasjsverceldeploy.vercel.app/

Más allá de publicar proyectos frontend con JavaScript y Vercel

Con esta pequeña guía hemos cubierto la parte más fundamental del proceso de “deploy” con Vercel. 

Sin embargo, esta plataforma ofrece mucho más. 

Desde integraciones con servicios de terceros como Mongo DB Atlas. 

Vincular un dominio personalizado a tus creaciones 

Hasta despliegue de funciones “serverless” para ejecutar scripts en el lado del servidor, tal como veremos a continuación.

«Serverless functions», ejecuta funciones en el servidor sin habilitar un servidor.

No podía terminar el escrito, sin explicar brevemente una de las capacidades más alucinantes de Vercel. Estoy hablando de las «Serverless functions». 

A grandes rasgos, consiste en declarar y ejecutar funciones en el lado del servidor, sin necesidad de montar un servidor que las maneje.

¿Cómo es eso posible? suena hasta contradictorio. El caso es que la infraestructura de Vercel, está preparada para escuchar peticiones a un determinado «endpoint», sin que tengas que habilitarlo tú, explícitamente.

Me explico, si tuvieras que crear una URL como punto de entrada (o sea un endpoint) con NodeJs, ¿Cómo lo harías?

Probablemente, instalarias ExpressJs como dependencia, instanciarías un nuevo servidor «http» escuchando un puerto, y definirías rutas a las que acceder con peticiones como GET o POST.

Esas peticiones desencadenarían una respuesta programada en una función.

Bien, pues Vercel te ahorra todo ese trabajo, permitiendo publicar directamente las funciones de respuesta, sin tener que conectarlas a un framework como ExpressJs. 

Vamos a ver cómo se hace, de nuevo, te sorprenderá descubrir lo sencillo que resulta.

La plataforma Vercel, mapea en forma de endpoints los scripts que encuentre alojados en el directorio llamado «api».

Por consiguiente, si incluyes un documento llamado «handler.js» dentro de un directorio con el nombre «api», habilitarás el endpoint «https://tuproyecto.vercel.app/api/handler»

Pero ojo, solo funcionará correctamente, si escribes correctamente la función, y la exportas tal como hago en este ejemplo. 

export default function handler(request, response) {
  response.status(200).json({
    body: request.body,
    query: request.query,
    cookies: request.cookies,
  });
}

Si estás un poco familiarizado con la API de ExpressJs, reconocerás esta función al momento. 

Como ves, puedes manejar qué respuesta entregas al cliente, y obtener información de la petición a partir del objeto “request”.

Por supuesto, puedes aprovechar esta característica, para conectarte a una base de datos o a un “webservice”, las posibilidades son infinitas.

Puede que más adelante le dedique una segunda parte a esta plataforma, cubriendo más en detalle todos estos aspectos. Hasta entonces, te animo a que investigues y pruebes por tí mismo.

Espero que este pequeño vistazo a Vercel te haya sido de ayuda. Si es así, puedes seguirme a través de las redes sociales de libreriasjs y compartir qué aplicaciones has publicado.

¡Hasta la próxima desarrolladores!

4 comentarios en «Publicar proyectos frontend con JavaScript y Vercel»

    • Gracias por tu comentario Antonio!

      Aún no he preparado ningún artículo abordando este tema.
      Pero tengo intención, por un lado, de profundizar más en la creación y publicación de «serverless functions en Vercel», y por el otro, explicar cómo hacer CI/CD en AWS para proyectos NodeJs.

      Estoy acabando otros artículos, así que de momento no tengo muy claro cuando podré ponerme con estos temas.
      Una vez más gracias por tu feedback.

      Saludos

      Responder
  1. Muchas, muchas, muchas gracias, esto era lo que estaba buscando hace rato y no lo encontraba, instalar Vercel como dependencia en «package.json» y no de forma global, yo soy usuario de Linux y cuando trato de instalar Vercel de forma Global me genera una serie de errores (permisos) los cuales no he logrado superar; con Vercel como dependencia es genial y super fácil.

    Responder

Deja un comentario