Ejecuta Múltiples Scripts npm Simultáneamente con Concurrently

En el mundo del Diseño y Desarrollo Web, muchas veces trabajamos en varios proyectos a la vez. Por ejemplo, si estás desarrollando una REST API en Node.js para el backend y, al mismo tiempo, trabajando en una aplicación React para el frontend, seguramente has tenido que abrir múltiples terminales y ejecutar los comandos por separado para iniciar ambos proyectos. Aunque este proceso funciona, puede ser tedioso y poco eficiente.

Hoy quiero mostrarte una forma más rápida de ejecutar varios scripts npm de manera simultánea usando un paquete llamado Concurrently.

¿Qué es Concurrently?

Concurrently es un paquete npm que permite ejecutar varios scripts al mismo tiempo en una sola terminal. Esto es particularmente útil cuando trabajas en proyectos que tienen múltiples repositorios o módulos, como una aplicación Full Stack donde debes iniciar el frontend y el backend simultáneamente.

Instalación de Concurrently

Para instalar Concurrently en tu proyecto, simplemente abre tu terminal en la carpeta contenedora del (backend & frontend) y ejecuta el siguiente comando:

npm install concurrently --save-dev

Esto instalará el paquete como una dependencia de desarrollo en tu proyecto.

¿Cómo Configurar Concurrently?

La configuración de Concurrently es bastante simple. Supongamos que tienes dos proyectos, uno para el backend y otro para el frontend, y ambos están dentro de una carpeta principal.

Carpeta-principal/
│
├── package.json    # Aquí es donde configuras Concurrently
│
├── front/          # Carpeta del proyecto frontend
│   └── package.json
│   └── src/
│       └── index.js
│
├── back/           # Carpeta del proyecto backend
    └── package.json
    └── src/
        └── app.js

1. Ubícate en la carpeta raíz del proyecto principal.

2. Si no lo tienes aún, crea un archivo package.json con el siguiente comando:

npm init

3. Una vez que tengas el archivo package.json, puedes agregar los scripts para cada proyecto. Por ejemplo:

"scripts": {
  "start-backend": "cd marbust-accounts-backend && npm start",
  "start-frontend": "cd marbust-accounts-frontend && npm run dev"
}

En este ejemplo, el script start-backend navega al directorio del backend y lo inicia, mientras que start-frontend hace lo mismo con el frontend.

4. Ahora, agrega el script que utilizará Concurrently para ejecutar ambos comandos de manera simultánea:

"start": "concurrently \"npm run start-backend\" \"npm run start-frontend\""

El comando "start": "concurrently \"npm run start-backend\" \"npm run start-frontend\"" está configurado dentro del archivo package.json para ejecutar simultáneamente dos scripts de npm: uno para el backend y otro para el frontend, utilizando el paquete Concurrently.

Cuando se ejecuta npm start, Concurrently se encarga de iniciar ambos scripts de manera paralela. En este caso, npm run start-backend cambia el directorio a la carpeta del backend (cd back) y ejecuta su script de inicio, que podría lanzar un servidor (por ejemplo, Node.js con Express). De forma similar, npm run start-frontend cambia el directorio al frontend (cd front) y ejecuta el comando que corre la aplicación, como npm run dev en una app React.

Este enfoque es muy útil para proyectos que tienen un frontend y backend separados, ya que permite trabajar con ambos entornos de desarrollo al mismo tiempo, ahorrando tiempo y facilitando el flujo de trabajo al no tener que abrir dos terminales por separado para iniciar ambos procesos.

Ejemplo Completo del package.json

Tu archivo package.json debería verse así:

{
  "name": "marbust-accounts",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "start": "concurrently \"npm run start-backend\" \"npm run start-frontend\"",
    "start-backend": "cd marbust-accounts-backend && npm start",
    "start-frontend": "cd marbust-accounts-frontend && npm run dev"
  },
  "devDependencies": {
    "concurrently": "^7.0.0"
  }
}

Ejecutando los Scripts

Con todo listo, solo tienes que ejecutar un único comando para iniciar ambos proyectos al mismo tiempo:

npm start

Esto ejecutará tanto el backend como el frontend en paralelo, permitiéndote trabajar de manera más eficiente y rápida sin tener que abrir múltiples terminales.

Conclusión

El uso de Concurrently me ha facilitado mucho el trabajo en mi proyecto Marbust Accounts, ya que me permite iniciar el backend y frontend de forma rápida y sencilla. Además, puedes combinar tantos scripts como necesites; el límite lo pones tú y tus deseos de dar vida a tus ideas.

Si te ha gustado este artículo, te invito a explorar otros temas relacionados con el diseño y el desarrollo web en mi blog, donde comparto más consejos útiles. ¡También puedes visitar mi canal de YouTube para ver más contenido!

Sobre el Autor:

Marco Antonio Bustillos Quiroz
Bachelor of Science in Web Design and Development (BYU-Idaho)
Full Stack Web Developer con más de 7 años de experiencia en desarrollo Front End y 5 años en desarrollo Back End. Mis proyectos incluyen sitios web, landing pages, aplicaciones web, REST APIs, e-commerce, y mucho más. Mi pasión es crear experiencias digitales impactantes y compartir conocimientos con otros desarrolladores.