Pablo Mchn
Posted on December 10, 2023
Se hace bastante simple deployar un proyecto backend con NodeJS y Express en vercel, solo hay que tener en cuenta algunas pocas cosas! te lo voy a ir mostrando en este articulo paso paso, dejándote también el código de ejemplo para que te lo puedas copiar y probar en tu proyecto.
Te dejo también el paso a paso en video, no te olvides de suscribirte a mi canal ❤️.
.Preparando proyecto para deployar en Vercel
Vamos a comenzar creando un proyecto simple para deployar, en tu editor de código crea una carpeta llamada app. Dentro de esta carpeta corre el siguiente comando en la consola:
npm init -y
Esto va a crear un archivo package.json con información básica y necesaria del proyecto.
Ahora, dentro de nuestra carpeta app hay que crear otro archivo al cual lo vamos a llamar index.js, es importantísimo que se llame index.js y no de otra forma como app.js o server.js, vercel va a buscar un archivo que se llame index.js a la hora de deployar el código.
Entonces la estructura tiene que ir quedando algo mas o menos como esto:
Bueno, comencemos a escribir un poco de código en nuestro index.js. Te dejo acá un código básico para que te sirva como referencia.
const express = require("express");
const app = express();
const port = process.env.PORT || 3000;
app.get("/", (req, res) => {
const htmlResponse = `
<html>
<head>
<title>NodeJs y Express en Vercel</title>
</head>
<body>
<h1>Soy un proyecto Back end en vercel</h1>
</body>
</html>
`;
res.send(htmlResponse);
});
app.listen(port, () => {
console.log(`port runing in http://localhost:${port}`);
});
A este punto seguramente tengas un proyecto propio o tengas en mente deployar otra cosa, pero paso a dar una explicación rápida del código que esta acá arriba, quizás te sirva.
1) Lo primero que esta haciendo es requerir a Express y luego invocarlo en la constante app
const express = require("express");
const app = express();
Al estar utilizando Express tenemos que instalarlo para que funcione 😅
Ejecuta este comando en la consola, siempre dentro de la carpeta app
npm i express
2) Lo segundo (y super importante) es la configurcion del puerto en la constante port.
const port = process.env.PORT || 3000;
En este punto el estamos diciendo que nuestro proyecto va a correr en un determinado dominio o en nuestro caso en alguna url que nos genere vercel. Eso lo indicamos con el (process.env.PORT). Luego le decimos que en caso de no haber ningún dominio/url configurada lo vamos a levantar en nuestro servidor local en el puerto 3000, con esto: ( || 3000). Pero todo bien! seguro que se nos va a configurar una url en vercel!
3) Vamos con lo tercero, pero en verdad lo importante ya se hizo en el paso 2. Lo demás ya va a estar ajustado a lo que suceda en tu proyecto. En mi caso solo tengo configurado un poco de código HTML para mostrar en el navegador cuando se ejecute el servidor.
app.get("/", (req, res) => {
const htmlResponse = `
<html>
<head>
<title>NodeJs y Express en Vercel</title>
</head>
<body>
<h1>Soy un proyecto Back end en vercel</h1>
</body>
</html>
`;
res.send(htmlResponse);
});
4) Por ultimo, le pedimos a la constante app (donde esta corriendo express) que escuche el puerto que configuramos mas arriba y que nos de un poco de feedback por consola.
app.listen(port, () => {
console.log(`port runing in http://localhost:${port}`);
});
Bueno, ahora ya estamos en condiciones de probar el proyecto en nuestro servidor local (se va a levantar en el puerto 3000) para ver si todo esta funcionando, hay que correr este comando en la consola.
node index.js
¿Funcionó? Bueno, si esta todo bien, ósea no te dio ningún error y tu proyecto se ejecuto bien en el puerto 3000 de tu servidor local, entonces ya estamos en condiciones de subirlo a vercel.
Preparando configuraciones del proyecto para deployar en vercel
Lo primero que tenemos que hacer a esta altura es crear un archivo de extensión json llamado vercel.json (de nuevo, siempre dentro de la carpeta app), dentro de este archivo van las configuraciones básicas que necesita vercel, acá te lo muestro:
{
"builds": [
{
"src": "./index.js",
"use": "@vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "/"
}
]
}
No me quiero meter demasiado en esto, pero son las configuraciones necesarias en los "builds" y las "routes" que necesitamos para hacer funcionar el deploy.
Algo sintético seria lo siguiente:
Builds: Definen como se construye la aplicación, en este punto usamos nuestro archivo index.js empleado dentro del entorno de ejecución @vercel/node.
Routes: Define como se manejan las rutas de la aplicación. Todas las URl representadas como /(.*) Se van a redirigir a la raiz del sitio (/).
Mientras tanto la estructura de tu proyecto se debería ver como algo así (o eso espero).
Deployando el proyecto en vercel
Bueno, ahora vamos con lo ultimo, llego al fin el momento de subir esto a vercel. Primero hay que crear una cuenta si es que aun no te hiciste una, crear una cuenta en vercel es totalmente gratis y no te pide ninguna tarjeta de crédito ni nada de eso, crea una cuenta aca: https://vercel.com
Hay dos maneras de hacer el deploy, una es vinculando un repositorio y otra es utilizando el CLI de vercel y hacerlo todo por consola, yo prefiero usar la consola, es muy simple y ademas no hay necesidad de subir todo a github, te cuento como hacerlo.
Si nunca antes instalaste vercel llego el momento de hacerlo!
En tu consola corre el siguiente comando para instalar vercel de forma global.
npm install -g vercel
Ahora si! ya podemos usar el CLI y subir el proyecto por consola.
Hay que correr simplemente el comando vercel.
vercel
Una ves que corras ese comando se te van a mostrar algunas pocas preguntas en tu consola que hay que contestar.
Te las muestro por acá y te las explico:
Set up and deploy:
Acá le ponemos que si con la letra: y
Wich scope do you want to deploy to?
Acá nos pregunta en que ámbito deseamos desplegar el proyecto. A mi me aparece pab-mchn porque es el nombre de mi cuenta y estoy logeado. Si aun no te logeaste, te va a pedir que te logees, es un proceso simple y se gestiona con una confirmación de cuenta con el navegador.
Link to existing project?
Acá nos pregunta si lo queremos vincular a un proyecto que se tenga creado en Vercel, le ponemos que no con una simple n. A no ser que si lo quieras vincular a un proyecto que tengas creado.
What´s is your project`s name?
Acá todo bien, simplemente nos pregunta el nombre que le queramos poner a nuestro proyecto. Creale alguno o busca cual es el nombre de tu proyecto si es que en la anterior respuesta pusiste que si.
In wich directory is your code located?
Acá nos pregunta donde esta ubicado nuestro proyecto y nos sugiere esta respuesta ./ Esta respuesta es correcta, nuestro archivo index.js esta en la raíz del proyecto dentro de la carpeta app así que la ubicación es correcta, simplemente damos un "Enter".
Y listo! Vercel va a generar los links para deployar el proyecto y ya vamos a poder verlo en las URL que nos esta mostrando en la consola. míralas en tu navegador.
En caso de que quieras subirlo a producción deberías correr este comando (ya te lo sugiere por ahí en consola ).
vercel --prod
Bueno, eso es todo!
Espero que puedas tener tu hermoso proyecto en vercel y que la pases bien.
Saludos!
Pablo.
Posted on December 10, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related