Damian Soto
dsoto

dsoto

Cómo crear una API desde 0 en Vercel

Damian Soto's photo
Damian Soto
·Oct 26, 2021·

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Una api es básicamente un pedazo de código, una caja negra, que se ejecuta en el servidor y que recibe una llamada (request) y devuelve una respuesta (response) HTTP. Y lo genial es que en internet todo es request/response entonces podemos hacer en el medio de todo o casi de todo: consultas sql, llamadas de formularios, tratamiento de imágenes, bot de telegram, llamadas a otras api's.

Quiero hacer un serie de artículos sobre API's que espero despierten nuevas ideas y comprendan el poder del desarrollo serverless o "function as a services" (faas).

Requerimientos

El ambiente de desarrollo será en node, si ya lo habías pensado este puede ser un buen momento para empezar.

Debes tener cierta práctica con git o al menos con el flujo básico de trabajo de add, commit, push y con esto ya estás preparado.

1. Crea el proyecto

En la consola crea una carpeta que contendrá el proyecto y en ella inicializamos el proyecto en node con la opcion -y para que no nos pregunte nada, luego puedes modificar los datos directamente en package.json

mkdir mi-api
cd mi-api
npm init -y

2. Código

Vercel es su infinita bondad si encuentra una carpeta api en la raíz del proyecto tratará cada fichero dentro como una función con retorno HTTP, aquí estará nuestra API. Entonces crea una carpeta con nombre api y adiciona un fichero que-bola.json.js con el siguiente contenido (fijate en los comentarios).

//  /api/que-bola.json.js

module.exports = (req, res) => {

  // tomamos el nombre desde  querystring del la url 
  const { name } = req.query;

  // retornamos un JSON con el saludo
  res.json({
     text: `${name}, que bola asere !!` 
  });
};

3. Ejecutar

Para ver nuestro código corriendo localmente instalamos Vercel CLI, que es un paquete para garantizar el desarrollo local que luego veremos online. Lo instalamos globalmente para próximos proyectos

npm i -g vercel

Para ver nuestra api funcionamos vamos a la carpeta donde esta el proyecto y ejecutamos

vercel dev

El cliente de Vercel te pedirá indetificarte en Vercel, tienes que haberte creado la cuenta como hablamos anteriormente, y luego ejecutará en proyecto:

Vercel CLI 23.1.2 dev (beta) — https://vercel.com/feedback
> > No existing credentials found. Please log in:
> Log in to Vercel github
> Success! GitHub authentication complete for pepe.perez@gmail.com
> Ready! Available at http://localhost:3000

Si todo va bien podras ver tu api corriendo localhost:3000/api/que-bola.json?name=pepe

3. Deploy

Esto es jamón. Si ejecutas vercel en tu proyecto se publicará online y te devolverá la url bajo el dominio vervel.app para acceder al proyecto.

Vercel CLI 23.1.2
🔍  Inspect: https://vercel.com/sotoplatero/crear-una-api-desde-0-en-vercel/AQPGZhNp4T49i1jTdq2ju7tKYLes [3s]
✅  Production: https://crear-una-api-desde-0-en-vercel.vercel.app [copied to clipboard] [22s]
📝  Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
💡  To change the domain or build command, go to https://vercel.com/sotoplatero/crear-una-api-desde-0-en-vercel/settings

Me erizo!!! Qué emoción!! Ahora puedes ir a crear-una-api-desde-0-en-vercel.vercel.app/api/que-bola.json?name=pepe

Solo faltaría crear el repo en github o gitlab y conectarlo a tu proyecto. Si te fijas en la consola anterior veras una url para configurar el proyecto algo como https://vercel.com/sotoplatero/crear-una-api-desde-0-en-vercel/settings pues vas a esa dirección y en el menu lateral busca git

vercel project setting git.jpg

Conecta tu proyecto a tu repo y luego de esto cada vez que actualices tu repo mediante un push se actualizará tu proyecto en vercel.

Conclusiones

Tenemos una API corriendo local y en vercel que puede parece poco pero es suficiente para lo que viene. El código lo puedes trastear en github

En la próxima entrada le haremos un front a nuestra API para consumirla. Sígueme en twitter para que no te la pierdas.

 
Share this