Creando aplicaciones de Next.js y publicándolas en Vercel usando mono repositorios con Yarn Workspaces

10 min readMar 31, 2021

Una guía para trabajar con mono repositorios y no morir en el intento.

Hoy en día existen muchas facilidades y herramientas muy útiles para desarrollar proyectos de software. Next.js es simplemente fenomenal y su combinación con vercel nos permite olvidarnos de cosas como la gestión de servidores y centrarnos únicamente en desarrollar nuestro producto, teniendo la confianza de usar una plataforma en la que creen compañías como Uber, McDonald’s, entre otras.

A lo largo de esta guía vamos a tomar como ejemplo el desarrollo de una plataforma ecommerce.

Arquitectura de la plataforma

Un ecommerce se puede componer de un sitio que es el que visitamos todos comúnmente y otro que pueden visitar los encargados para su administración. Bajo este análisis podríamos desarrollar esta plataforma como dos proyectos separados dada su robustez.

Arquitectura propuesta para la plataforma: Proyecto para el administrador y los clientes.

Uso de mono repositorios

La estructura de mono repositorios es usada por grandes compañías como Google para tener en un único repositorio muchos de sus proyectos, de esta manera pueden compartir recursos entre algunos de ellos.

En nuestro caso intuitivamente podríamos crear dos proyectos independientes entre sí que podrían usar las mismas dependencias pero en distintas versiones cada uno, no obstante, no sería posible compartir recursos entre ambos y cabe la posibilidad que ocurran errores al integrar ambos proyectos. Ante la necesidad de reutilizar código y utilizar las mismas versiones de las distintas librerías que puede ocupar un proyecto es donde el uso de mono repositorios nos brinda muchas facilidades para gestionar estos proyectos.

En sí, hacer uso de multi repositorios no está mal y ante la pregunta ¿Debo usar mono o multi repositorios? muchos llegan al acuerdo en decir: depende. Tenemos que tomar en cuenta nuestras necesidades y el posible escalamiento de nuestro proyecto. A continuación tenemos el esquema que seguiríamos si mantenemos repositorios separados para ambos proyectos.

Esquema del proyecto haciendo uso de multi repositorios

Al usar un mono repositorio ambos proyectos estarán en la misma carpeta y esto nos facilita compartir recursos, por ejemplo, la carpeta node_modulesse crea en la raíz y las apps no tendrán un directorio independiente con sus dependencias.

A este punto tenemos una noción de cual será la estructura de la plataforma. Llegó la hora del trabajo práctico ¡manos a la obra! 😉

Yarn

Esta es una herramienta que nos permite gestionar las dependencias que usamos en un proyecto. Yarn es simplemente genial.

Instalación

Abre tu consola y ejecuta el siguiente comando:

$ npm install --global yarn

Puedes verificar si se instaló y verificando la versión con la siguiente instrucción:

$ yarn --version

2. Inicializando el mono repositorio

Usa la consola y ubícate donde quieras hacer tu proyecto. Una vez lo hayas hecho crearemos la carpeta que contendrá nuestros aplicaciones.

$ mkdir ecommerce

E ingresa a la carpeta:

$ cd ecommerce

Una vez dentro usaremos el comando yarn initpara crear el archivo package.jsonen la raíz. Puedes revisar la documentación oficial aquí.

$ yarn init

En la consola te hará unas cuantas preguntas como el nombre del paquete, la versión, el autor, etc.

question name (testdir): ecommerce
question version (1.0.0):
question description: The most awesome eccomerce
question entry point (index.js):
question git repository:
question author: John Doe
question license (MIT):
question private:
success Saved package.json
✨  Done in 87.70s.

Se habrá creado el archivopackage.json en la raíz conteniendo los datos que ingresaste anteriormente, por ejemplo:

{
  "name": "ecommerce",
  "version": "1.0.0",
  "description": "The most awesome eccomerce",
  "main": "index.js",
  "author": "John Doe",
  "license": "MIT"
}

En ese mismo archivo package.json vamos a agregar unas cuantas líneas al final del archivo para configurar nuestro workspace.

{
  "name": "ecommerce",
  "version": "1.0.0",
  "description": "The most awesome eccomerce",
  "main": "index.js",
  "author": "John Doe",
  "license": "MIT",
  "private":true,
  "workspaces":["ecommerce-admin", "ecommerce-client"]
}

Nota que agregamos en los workspaces el nombre de nuestras apps, que al final de cuentas serán carpetas dentro de nuestra carpeta ecommerce . Eso es lo que colocamos ahí, el nombre de los directorios.

Creando las aplicaciones de Next.js

Este es un gran framework para React, no soy un ingeniero de front-end pero me permite enfocarme en otras cosas y olvidarme de cosas como la gestión de las rutas. Considero que es una herramienta que será un estándar dentro de poco, hay una gran oportunidad para subirnos en esa ola 👀.

Next.js tiene un curso para aprender todos sus conceptos y es muy interactivo, accede desde aquí. Y más adelante verás porque es tan genial Next.js 😜

Creando la aplicación ecommerce-admin

Es muy fácil crear una aplicación, dentro de la misma carpeta de nuestro mono repo abre la consola y ejecuta el siguiente comando:

$ yarn create next-app

Durante la ejecución de ese comando te pedirá el nombre para la Aplicación de Next.js, coloca ecommerce-admin y se empezarán a descargar los paquetes necesarios para tener el proyecto por defecto de Next.js.

Cuando el proceso de creación de la App ecommerce-admin haya finalizado podrás ver que se creó una nueva carpeta en la raíz de ecommerce Esa carpeta se llama node_modules y si recuerdas una de las imágenes anteriores donde vimos la estructura de los mono repositorios ¿Notaste que había una carpeta llamada node_modules?. Yarn workspaces nos gestiona las dependencias en esa carpeta y no se mantiene en la app como sucedería con los multi repositorios.

Directorio después de la creación de la aplicación ecommerce-admin

Si te ubicas en la carpeta de la aplicación recién creada y ejecutas el comando yarn devpodrás ejecutar en tu computadora el proyecto.

$ cd ecommerce-admin$ yarn dev

Una vez ejecutes este comando se compilará el código, abre tu navegador e ingresa a la dirección localhost:3000 donde podrás ver la pantalla de bienvenida de Next.js que nos indica que nuestro proyecto se creó con éxito.

Pantalla de bienvenida de la aplicación de Next.js

Next.js se preocupa por muchas cosas en lugar que nosotros las hagamos. Una de ellas es inicializarnos nuestro repositorio de gituna vez se crea la app para no preocuparnos por ello. Tenemos que eliminar los archivos git porque el directorio principal será el que deberemos inicializar, no sus subcarpetas (proyectos).

Copia en un bloc de notas aparte el contenido del archivo .gitigonore ya que nos servirá más adelante. Entonces procede a eliminar la carpeta git y el archivo .gitignore

2. Creando la aplicación ecommerce-client

Tenemos que repetir los pasos anteriores, ubícate con la consola en la carpeta ecommerce

Crea la aplicación:

$ yarn create next-app

Durante la instalación te pedirá también el nombre que deseas darle a la app, coloca: ecommerce-client

Una vez se termine de crear verás que se creó una carpeta con el nombre del proyecto, si entras a la carpeta y despliegas node_modules verás que no hay muchas dependencias, todas las que deberían estar también se encuentran en node_modules que está en la raíz del mono repositorio.

Directorio de la aplicación ecommerce-client

Asimismo puedes ejecutar con el comando yarn dev el proyecto y entrar a tu navegador para ver el mensaje de bienvenida de Next.js.

Pantalla de bienvenida de la aplicación ecommerce-client de Next.js

Así como se hizo anteriormente elimina el contenido de la carpeta donde se inicializó el repositorio git

Elimina lo que se indica en la flecha que son archivos git

A este punto tenemos creadas nuestras dos aplicaciones que están siendo gestionadas por Yarn Workspaces, ya tenemos un mono repositorio 😎

Nota: Si usas una versión de Next.js u otra librería en un proyecto debes usar la misma versión en el otro.

Creando repositorio Git

En esta guía vamos a usar Github para almacenar nuestro mono repo (También puedes usar Gitlab o Bitbucket). Abre la consola, ubícate en la raíz ecommerce/coloca la siguiente instrucción:

$ git init

Crea un archivo llamado .gitignore ábrelo y agrega lo siguiente dentro de el:

/node_modules

¿Recuerdas que dijimos que copiaríamos el contenido del archivo .gitignore de una de las aplicaciones? Pues adiciona ese contenido en el archivo .gitignore que acabas de crear en la raíz del mono repositorio, vamos a agregar las carpetas node_modules y otras de cada una de las aplicaciones que no queremos que estén en Github. Next.js ya nos da la plantilla para que solo copiemos y solo tenemos que editar para que estén acorde a nuestro mono repositorio.

/node_modules# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.# Ecommerce-admin dependencies/ecommerce-admin/node_modules
/ecommerce-admin/.pnp
/ecommerce-admin/.pnp.js# testing
/ecommerce-admin/coverage# next.js
/ecommerce-admin/.next/
/ecommerce-admin/out/# production
/ecommerce-admin/build# misc
/ecommerce-admin/.DS_Store
/ecommerce-admin/*.pem# debug
/ecommerce-admin/npm-debug.log*
/ecommerce-admin/yarn-debug.log*
/ecommerce-admin/yarn-error.log*# local env files
/ecommerce-admin/.env.local
/ecommerce-admin/.env.development.local
/ecommerce-admin/.env.test.local
/ecommerce-admin/.env.production.local# vercel
/ecommerce-admin/.vercel# Ecommerce-client dependencies/ecommerce-client/node_modules
/ecommerce-client/.pnp
/ecommerce-client/.pnp.js# testing
/ecommerce-client/coverage# next.js
/ecommerce-client/.next/
/ecommerce-client/out/# production
/ecommerce-client/build# misc
/ecommerce-client/.DS_Store
/ecommerce-client/*.pem# debug
/ecommerce-client/npm-debug.log*
/ecommerce-client/yarn-debug.log*
/ecommerce-client/yarn-error.log*# local env files
/ecommerce-client/.env.local
/ecommerce-client/.env.development.local
/ecommerce-client/.env.test.local
/ecommerce-client/.env.production.local# vercel
/ecommerce-client/.vercel

Hecho lo anterior, ya tenemos los archivos y directorios que si subiremos a nuestro repositorio.

Posteriormente, agrega todos los archivos que se colocarán en el repo con el siguiente comando:

$ git add .

Envía tus archivos haciendo el commit inicial.

$ git commit -m ":rocket: Init my monorepo"

Lo subes y ya tienes el mono repositorio en tu github 😜

Publicando en Vercel

Vercel fue creada por los mismos que hicieron Next.js, es una plataforma que te ayuda a no preocuparte por asuntos de gestión de servidores, es más, te brinda una gran experiencia donde incluso cada vez que hagas commit a una rama te da un enlace, en el puedes visualizar esa versión del proyecto con esa funcionalidad que agregaste. Esta plataforma te permite de la manera más sencilla gestionar dominios, certificados de seguridad, serverless functions, y otros. Lo mejor de todo es que puedes tener proyectos en producción y no pagar ni un centavo hasta que alcances la cuota.

Importando los proyectos

Entra a https://vercel.com/new e intenta importar el mono repositorio que acabas de subir:

Selecciona la cuenta que deseas usar, en este caso usaré mi cuenta personal que es de hobby.

Verás que tienes la posibilidad de seleccionar las aplicaciones que tenemos en nuestro mono repositorio, tendrás que crear un proyecto de vercel por cada una de ellas.

Seleccionando el directorio de la aplicación a publicar

Puedes configurar la publicación como agregando un nombre al proyecto (solo haremos eso), agregar variables de entorno, etc. Nosotros vamos a continuar y hacer clic en deploy

Vercel hace muy rápido el deploy de tus aplicaciones de Next.js, ve a tomar agua por mientras 😉

Una vez publicado verás un mensaje de felicitaciones de vercel con tu sitio publicado

Ahora solo nos falta hacer lo mismo para la aplicación ecommerce-client. La seleccionas y repites los pasos anteriores.

Estamos a punto de terminar, solo falta un poco!

Vamos a configurar nuestros proyectos en Vercel para evitar que cuando hayan cambios en alguno de ellos se haga build en el otro.

Entra en el dashboard de vercel a tu proyecto, luego al apartado settings y busca Git

Justo al final verás una tarjeta con titulo Ignored Build Step, en ella vas a copiar el siguiente comando y vas a guardar la configuración

git diff --quiet HEAD^ HEAD ./

Ignorando el *build* en un proyecto cuando se agregaron cambios a otro

Recuerda hacer esto mismo en las configuraciones de tu otro proyecto de vercel.

A este punto ya tienes el esqueleto inicial de tu plataforma Ecommerce publicada, es cuestión de que te pongas manos a la obra para empezar su desarrollo. Notarás que cada que hagas commit a uno de tus aplicaciones vercel te genera un enlace con un subdominio algo raro. Esos son los previews que nos genera vercel para que puedas visualizar el estado de tu aplicación con esos cambios que acabas de agregar. Esto nos permite compartir con otras personas esas nuevas funcionalidades y que no tengan que descargar los cambios de esa rama y todas esas cosas cansadas agobiantes, así vercel nos da la mejor experiencia a los desarrolladores para compartir fácilmente lo que hagamos 😎

Puedes revisar el repositorio de github que se trabajó en esta guía en el siguiente enlace:

https://github.com/fabricioism/ecommerce

Conclusiones

Toma tu tiempo en pensar si un mono repositorio es la mejor opción para el proyecto que vas a desarrollar, pero si sientes que se acopla a tus necesidades espero que esta guía te pueda ayudar para no morir en el intento y optimizar tu tiempo para preocuparte más por tu producto.

Hasta pronto,