Node.js para Frameworks Front-end

¿Acabas de comenzar tus estudios en un Framework Front-end (como React o Angular , te has topado con Node.js y tienes preguntas sobre cómo funciona?

Si es así, entonces preparé este artículo para responder tus preguntas principales y brindarte lo esencial que necesitas saber para poder utilizar Node.js en tu desarrollo Front-end con frameworks. Responderé preguntas como:

• ¿Por qué necesitamos usar Node.js en el front-end?
• ¿Qué necesitas saber tu, desarrollador front-end , para trabajar con esta herramienta?
• ¿Qué es el npmy el package.json?
• ¿Cuáles son los principales comandos que usaré?

Incluso si has usado Node.js antes (por ejemplo, para simular API REST con json-server ), creo que aprenderá información nueva en este artículo, principalmente relacionada con el uso de NPM con marcos de front-end. ¿Vamos?

¿Node.js en el front-end?

Los frameworks front-end suelen utilizar un conjunto de herramientas para facilitar nuestro desarrollo.

Una de estas herramientas es un servidor local , y una de sus características es observar los cambios realizados en los archivos VSCode y actualizar automáticamente la pantalla del navegador con los nuevos cambios de código.

Otra característica comúnmente utilizada por los marcos es proporcionar una sintaxis más sencilla para escribir componentes (React, por ejemplo, usa JSX). Sin embargo, esta sintaxis debe convertirse (o compilarse ) a HTML, CSS y JavaScript puros para que los navegadores puedan comprender el código que escribimos. Esta conversión también la realiza automáticamente el servidor local.

Estos son solo algunos ejemplos de operaciones locales , es decir, operaciones realizadas dentro de tu computadora, como: creación de servidores, lectura y escritura de archivos, compilaciones, preprocesamiento de lenguaje, entre otros procesos.

Sin embargo, JavaScript, el lenguaje de programación con el que estamos familiarizados, no puede realizar estas operaciones locales en el front-end. Y ahí es donde entra Node.js.

Node.js (o simplemente Node) pretende ser un nuevo entorno de ejecución para JavaScript , además de los navegadores. ¡Permite realizar operaciones locales sin necesidad de un navegador!

De hecho, Node fue creado inicialmente para desarrollar aplicaciones back-end usando JavaScript, ¡pero también se ha vuelto muy útil para realizar procesos automatizados que faciliten el desarrollo front-end!

Node es un programa que debe estar instalado en su computadora para poder usarse. Naturalmente, su instalación es obligatoria para el desarrollo en frameworks front-end. Para hacer esto, consulte el artículo.Cómo instalar Node.js en Windows, Linux y macOS.

De esta manera, Node jugó un papel muy importante en la popularización de los frameworks front-end más utilizados en la actualidad, ya que utilizan este programa para garantizar una buena productividad y experiencia de desarrollo.

Pero, ¿cómo utilizamos esta herramienta en la práctica, junto con los frameworks?

Creando una aplicación front-end con paquetes Node.js

En el resto de este artículo, para explicar mejor los conceptos de Node, usaré el proceso de creación de una aplicación React como ejemplo. Sin embargo, los mismos conceptos se aplican a otros frameworks front-end, como Vue y Angular, ¡con ligeras variaciones en los comandos a ejecutar!

Para trabajar con React, por ejemplo, existen diferentes herramientas que nos ayudan a crear un proyecto. Una de estas herramientas es Vite , que es capaz de crear automáticamente un proyecto base para que trabajemos con un framework front-end, además de proporcionarnos un servidor que realiza operaciones automatizadas, como las ya comentadas al principio del artículo.

Para utilizar Vite, debemos ejecutar el siguiente comando:

npm create vite@latest

Recordando que Vite es solo una de las herramientas que nos ayudan a crear un proyecto front-end. Para React, hay otras como Create React App (que actualmente está siendo menos usado), Next, Remix, entre otros. Cada uno cubre una necesidad de proyecto diferente.

Pero, ¿qué hace realmente este comando?

es npm create uno de los comandos puestos a disposición por NPM ( Node Package Manager). NPM es un programa que viene instalado con Node y es capaz de instalar o ejecutar un paquete a través de la línea de comandos.

Pero ¿qué es un paquete? Un paquete NPM (que también puede denominarse paquete Node) es un proyecto escrito en Node que una persona o equipo de la comunidad de desarrollo ha puesto a disposición. Están disponibles en el sitio web de NPM . Vite en sí es un paquete NPM. De hecho, ¡todos los frameworks y bibliotecas de JavaScript front-end son proyectos de Node publicados en NPM!

Ahora podemos explicar mejor el comando NPM que se muestra arriba:

• npm create vite: este comando puede ejecutar un paquete que fue publicado en el sitio web de NPM, más específicamente el paquete llamado create-vite;
• @latest: Esta parte del comando especifica que queremos ejecutar la última versión de este paquete ( latest significa “última” en inglés).

Dependiendo del marco o biblioteca que utilices, encontrarás variaciones del comando para instalar o ejecutar un paquete NPM (por ejemplo, algunas comienzan con npx). Si tienes alguna duda, siempre puedes consultar la documentación de npm ¡Si quieres entender exactamente qué hace un determinado comando! Además, lo ideal es que la documentación del framework que estés utilizando siempre proporcione los comandos que necesitas ejecutar.

Al ejecutar el comando, la terminal se volverá interactiva y hará algunas preguntas sobre la creación del proyecto. Cuando termine, se crea la estructura estándar del proyecto en su computadora y podrá ver que uno de los archivos se llama package.json. Este es el archivo base de cualquier proyecto de Node. ¿Vamos a conocerlo mejor?

El archivo package.json

¿Recuerdas que dije que un framework front-end necesita varias herramientas que faciliten el desarrollo? Estas herramientas son precisamente los paquetes de Node. Es muy común que haya uno o más paquetes de proyectos "principales" y que estén respaldados por varios otros paquetes, que brindan soluciones listas para usar para diferentes tipos de problemas.

Todos estos paquetes también deben estar instalados en su computadora para aprovecharlos. Ahí es donde entra en juego el archivo package.json: documenta todos los paquetes necesarios para que el proyecto funcione.

Para proporcionar un ejemplo, veamos el package.json generado al crear un proyecto de React con Vite:

{
  "name": "mi-aplicacion-react",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "vite": "^4.4.5"
  }
}

Si no sabes qué es o no estás familiarizado con el formato de archivo JSON, te sugiero leer el artículo. Aprenda qué es JSON y cómo usarlo.

Entendamos los atributos de este JSON:

• "name"(nombre): el nombre del proyecto Node.js.
• "private"(privado): define si su proyecto será privado o si estará disponible para que lo utilicen otras personas de la comunidad.
• "version"(versión): la versión actual del proyecto. NPM utiliza el llamado control de versiones semántico ( SemVer ). Puedes leer más sobre esto en este artículo.
• "type"(tipo): el tipo de modularización que se utilizará en el proyecto. El tipo predeterminado es commonjs, pero hoy en día se recomienda utilizar module, para seguir las últimas versiones de ECMAScript.
• "scripts": Esta parte tiene algunos scripts predefinidos, pero también puedes definir los tuyos.
• "dependencies"(dependencias): define la lista de paquetes necesarios para ejecutar su proyecto en un entorno de producción.
• "devDependencies"(dependencias de desarrollo): define la lista de paquetes necesarios para ejecutar el proyecto en un entorno de desarrollo y prueba.

Ahora sabemos que todos los paquetes necesarios para que el proyecto funcione se llaman dependencias , divididas en dependencias de desarrollo ( devDependencies) y dependencias de producción ( dependencies).

Usando NPM para instalar dependencias

¡El siguiente paso es instalar las dependencias del proyecto! Esto se puede hacer ejecutando el comando npm installdentro de la carpeta del proyecto.

¡Este comando es padrón para instalar las dependencias de cualquier framework front-end u otro proyecto de Node!

Este proceso puede tardar desde segundos hasta varios minutos, dependiendo de su procesamiento de Internet y de su computadora.

node_modules Cuando termine, se creará una nueva carpeta llamada en la raíz del proyecto con todos los paquetes instalados. Puede notar que esta carpeta tiende a ser muy grande, generalmente con muchos más paquetes que los enumerados en package.json. Esto se debe a que cada dependencia normalmente depende de otras, creando una cadena de dependencias.

Y con eso, casi estamos terminando la etapa de creación de un proyecto front-end usando Node y NPM. Todo lo que tenemos que hacer es ver la aplicación en el navegador.

El comando para hacer esto también puede variar según el marco; en el caso de React with Vite, este comando es npm run dev. Este comando ejecutará el script llamado dev, que también se especifica en package.jsonel atributo scripts:

"dev": "vite",

Al ejecutar npm run dev, se creará un servidor local para que la aplicación esté disponible a través de una dirección local. ¡Al abrir la dirección en su navegador, podrá ver el proyecto!

Resumen

Vaya, aprendimos mucho, ¿no? Ahora, cuando crees tu proyecto de framework front-end favorito, sabrás lo que sucede bajo el capó cuando ejecutes todos esos comandos locos en la terminal.

¿Vemos un resumen de lo que pasó?

• Node es un entorno/programa que lee y ejecuta código JavaScript localmente, pudiendo utilizar este lenguaje para realizar operaciones tales como: crear servidores, manipular archivos, convertir idiomas, etc.;
• Un proyecto escrito en Node puede ponerse a disposición de la comunidad de desarrolladores en forma de paquete en el sitio web de NPM;
• NPM ( Node Package Manager ) es el administrador de paquetes de Node. Con él podemos ejecutar o instalar soluciones realizadas por la comunidad;
• El archivo package.json es el archivo base de cualquier proyecto de Node y documenta información importante sobre el proyecto, como la lista de dependencias que deben instalarse;
• En resumen, utilizamos Node y NPM para instalar todas las herramientas y soluciones necesarias para el desarrollo en un framework front-end.

No olvide consultar también la capacitación de Alura sobre frameworks front-end y el contenido más detallado sobre Node.js que hemos reunido para usted:

• Capacitación Explora React con JavaScript
• Capacitación Explora el framework angular
• ¿Sabes qué es NodeJS? #AluraTips
• Artículo Crear y publicar una biblioteca Javascript en NPM

Articulo adaptado y traducido por Daysibel Cotiz.

Antonio Evaldo

Instructor y Desarrollador de Software en las escuelas de Front-end y Programación de Alura, con enfoque en JavaScript. Soy técnico en informática por IFPI y estudié Ingeniería Eléctrica en la UFPI. Me apasiona el desarrollo web y compartir conocimientos de una manera encantadora. En mi tiempo libre veo series, películas y anime.