Express, el framework Node.js más utilizado del mundo, permite a los desarrolladores crear servidores web backend con JavaScript. Este framework proporciona la mayor parte de lo que necesitan los desarrolladores de backend, simplificando el enrutamiento y la respuesta a las solicitudes web.

Ya tenemos una guía sobre todo lo que debes saber sobre Express.js, así que este artículo práctico te mostrará cómo utilizarlo. Este tutorial explica cómo crear y desplegar una aplicación Node.js de ejemplo utilizando Express.js.

Cómo Crear Aplicaciones Rápidamente con Express.js

Este tutorial muestra cómo crear una aplicación web que recibe peticiones a un endpoint, utiliza un parámetro de la petición para hacer una llamada a la base de datos y devuelve información de la base de datos como JSON.

Requisitos Previos

Para seguir este tutorial, asegúrate de que tienes instalado lo siguiente en tu ordenador:

  • Node.js y Node Package Manager (npm) — Entorno de tiempo de ejecución y gestor de paquetes esenciales para JavaScript.
  • Git — Sistema distribuido de control de versiones que facilita el desarrollo colaborativo de software.

Generador de Aplicaciones Express

Puedes añadir Express a aplicaciones Node existentes siguiendo el proceso descrito en nuestra guía Express.js, pero si empiezas desde cero, hay una opción aún más rápida: el generador Express.

El generador Express oficial de Express.js es un paquete de Node que te permite generar un nuevo esqueleto de aplicación. Para ello, primero crea una carpeta para tu aplicación y luego ejecuta el comando npx (disponible en Node.js 8.2.0):

mkdir express-application
npx express-generator

Una vez generada con éxito, el terminal muestra una lista de las carpetas/archivos creados y los comandos para instalar las dependencias y ejecutar la aplicación. Instala las dependencias ejecutando el siguiente comando:

npm install

A continuación, inicia tu servidor web:

DEBUG=myapp:* npm start

La aplicación esqueleto tiene una ruta raíz preconstruida que muestra una página de inicio básica. Puedes verla en tu navegador visitando localhost:3000.

Explorar el Esqueleto de la Aplicación Express

Cuando abras tu aplicación Express en tu editor de código preferido, encontrarás una estructura básica que forma la columna vertebral de tu aplicación web.

/
|-- /node_modules
|-- /public
|-- /routes
    |-- index.js
    |-- users.js
|-- /views
    |-- error.jade
    |-- index.jade
    |-- layout.jade
|-- app.js
|-- package.json
  • node_modules: Este directorio almacena todas las dependencias y librerías instaladas para el proyecto.
  • public: Contiene activos estáticos como CSS, JavaScript, imágenes, etc. Estos archivos se sirven directamente al navegador del cliente.
  • routes: Contiene los archivos responsables de definir varias rutas y gestionar las peticiones procedentes de diferentes URL.
  • views: Contiene plantillas o vistas que el servidor renderiza para crear la interfaz de usuario. Aquí, error.jade, index.jade y layout.jade son plantillas escritas en el lenguaje de plantillas Jade. Ayudan a estructurar y mostrar contenido dinámico a los usuarios.
  • app.js: Este archivo suele servir como punto de entrada para la aplicación Express. Es donde se configura el servidor, se establece el middleware, se definen las rutas y se gestionan las peticiones y respuestas.
  • package.json: Este archivo contiene metadatos sobre la aplicación. Ayuda a gestionar las dependencias y la configuración del proyecto.

Comprendiendo la Gestión de Rutas

En tu aplicación Express, el directorio routes es donde se definen las rutas como archivos independientes. La ruta principal, a menudo llamada ruta raíz, reside en el archivo routes/index.js.

Esta ruta raíz se encarga de una solicitud GET, respondiendo con una página web generada en HTML por el framework. A continuación se muestra un fragmento de código que ilustra cómo se maneja una solicitud GET para renderizar una página de bienvenida básica:

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
 res.render('index', { title: 'Express' });
});

module.exports = router;

Si modificas la función res.render() por res.send()el tipo de respuesta cambia de HTML a JSON:

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.send({ key: 'value' });
});

module.exports = router;

Ampliando las capacidades, se añade otra ruta al mismo archivo, introduciendo un nuevo endpoint que acepta un parámetro. Este fragmento de código demuestra cómo tu aplicación puede gestionar el tráfico en un endpoint diferente, extraer un parámetro y responder con su valor en JSON:

/* GET a new resource */
router.get('/newEndpoint', function(req, res, next) {
  res.send({ yourParam: req.query.someParam });
});

El envío de una solicitud GET a localhost:3000/newEndpoint?someParam=whatever producirá una salida JSON que contendrá la cadena «whatever».

Se realiza una solicitud GET a la aplicación que se ejecuta localmente en Postman.
Se realiza una solicitud GET a la aplicación que se ejecuta localmente en Postman.

Alojamiento de Aplicaciones Express y Kinsta

Hacer peticiones web de tu ordenador a tu ordenador está muy bien, pero el desarrollo web no está completo hasta que no estás fuera de localhost. Afortunadamente, Kinsta facilita el despliegue de aplicaciones en la web, incluso si necesitas una base de datos.

Ahora, vamos a profundizar en la ampliación de las capacidades de tu aplicación integrando la funcionalidad de la base de datos y desplegando tanto la aplicación como la base de datos en la web, permitiendo el acceso desde cualquier ordenador.

Antes de desplegar tu aplicación Express en el Alojamiento de Aplicaciones de Kinsta, es crucial que envíes el código y los archivos de tu aplicación al proveedor Git que hayas elegido (Bitbucket, GitHub o GitLab). Asegúrate de crear un archivo .gitignore en el directorio raíz de tu aplicación e incluye node_modules para evitar enviar estos archivos a tu proveedor de Git.

Una vez configurado tu repositorio, sigue estos pasos para desplegar tu aplicación Express en Kinsta:

  1. Inicia sesión o crea una cuenta para ver tu panel MyKinsta.
  2. Autoriza a Kinsta con tu proveedor Git.
  3. Haz clic en Aplicaciones en la barra lateral izquierda, y luego en Añadir aplicación.
  4. Selecciona el repositorio y la rama desde la que deseas desplegar.
  5. Asigna un nombre único a tu aplicación y elige una Ubicación para el centro de datos.
  6. A continuación, configura tu entorno de construcción. Selecciona la configuración de Máquina de construcción estándar con la opción Nixpacks recomendada para esta demo.
  7. Utiliza todas las configuraciones por defecto y luego haz clic en Crear aplicación.

¡Kinsta funciona con el generador de aplicaciones Express desde el principio! Una vez que completes estos pasos, tu aplicación comenzará automáticamente el proceso de construcción y despliegue.

La pantalla de despliegue te proporcionará una URL donde Kinsta desplegará tu aplicación. Puedes añadir /newEndpoint?someParam=whatever para probar el endpoint construido en la sección anterior de este artículo.

Cómo Añadir una Base de Datos a una Aplicación Express

Para la mayoría de las aplicaciones a nivel de producción, disponer de una base de datos es esencial. Por suerte, Kinsta simplifica este proceso proporcionando servicios de base de datos administrados en su totalidad que son increíblemente fáciles de configurar.

A continuación te explicamos cómo puedes crear una base de datos en Kinsta:

  1. Ve a la sección Bases de Datos en la barra lateral del panel de control de MyKinsta.
  2. Haz clic en Crear una base de datos. Configura los detalles de tu base de datos introduciendo un nombre y seleccionando el tipo de base de datos.
  3. Selecciona la opción PostgreSQL. Se generará automáticamente un nombre de usuario y una contraseña para la base de datos:

    El paso de configuración de la base de datos MyKinsta de añadir una nueva base de datos.
    El paso de configuración de la base de datos MyKinsta de añadir una nueva base de datos.

  4. Selecciona la misma ubicación del Centro de Datos donde alojaste tu aplicación Express y configura el tamaño deseado.
  5. Confirma la información de pago y haz clic en Crear base de datos.

Una vez que la base de datos se haya creado correctamente:

  1. Accede a los detalles de la base de datos haciendo clic sobre ella. En la página Visión general, ve a la sección Conexiones internas.
  2. Selecciona la aplicación adecuada.
  3. Marca la opción Añadir variables de entorno a la aplicación.
  4. Haz clic en Añadir conexión para conectar la base de datos recién creada y tu aplicación.

A continuación, copia la cadena de conexión de la base de datos recién creada para conectarte a ella con una herramienta de base de datos. Cualquier herramienta de conexión SQL será suficiente, pero en esta demostración se utiliza Beekeeper. Abre la aplicación y haz clic en Importar desde URL, pega la cadena de conexión y haz clic en Importar. Esto te permitirá ejecutar SQL en la base de datos alojada en Kinsta que acabas de crear.

A continuación, crea una tabla elemental con una única entrada ejecutando algunas sentencias SQL sobre la base de datos alojada con tu herramienta de base de datos:

CREATE TABLE "States"
( id integer CONSTRAINT states_pk PRIMARY KEY,
  state_name varchar(100),
  capital varchar(100),
  state_bird varchar(100),
  "createdAt" TIMESTAMPTZ NOT NULL DEFAULT NOW(),
  "updatedAt" TIMESTAMPTZ NOT NULL DEFAULT NOW()
);

INSERT INTO "States"
VALUES(1, 'ohio', 'columbus', 'cardinal');

Añade los siguientes paquetes de base de datos a tu proyecto:

npm install sequelize pg

La dependencia sequelize es un ORM para Node.js, y el paquete pg sirve como cliente PostgreSQL, permitiendo la interacción entre las aplicaciones Node.js y las bases de datos PostgreSQL.

A continuación, escribe el código de la aplicación que acepta una petición GET con un parámetro id y devuelve la información de la base de datos asociada a ese id. Para ello, modifica tu archivo index.js en consecuencia:

var express = require('express');
var router = express.Router();
const { Sequelize, DataTypes } = require('sequelize');
const sequelize = new Sequelize(process.env.CONNECTION_URI, {
  dialect: 'postgres',
  protocol: 'postgres',
});

const State = sequelize.define('State', {
  // Model attributes are defined here
  state_name: {
  type: DataTypes.STRING,
  allowNull: true,
  unique: false
  },
  capital: {
  type: DataTypes.STRING,
  allowNull: true,
  unique: false
  },
  state_bird: {
  type: DataTypes.STRING,
  allowNull: true,
  unique: false
  },
}, {
  // Other model options go here
});

async function connectToDB() {
  try {
  sequelize.authenticate().then(async () => {
  // await State.sync({ alter: true });
  })
  console.log('Connection has been established successfully.');
  } catch (error) {
  console.error('Unable to connect to the database:', error);
  }
}
connectToDB();

/* GET a new resource */
router.get('/state', async function(req, res, next) {
  const state = await State.findByPk(req.query.id);
  if (state) {
   res.send(state)
  } else {
   res.status(404).send("state not found");
  }
});


/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

/* GET a new resource */
router.get('/newEndpoint', function(req, res, next) {
  res.send({ yourParam: req.query.someParam });
});

module.exports = router;

Haz commit de los cambios en el código y envíalos a tu repositorio Git. A continuación, procede a redistribuir manualmente en Kinsta o espera al despliegue automático.

Ahora, cuando consultes el endpoint /states con id=1, recibirás un estado de la base de datos.

Una solicitud GET a la aplicación en pleno funcionamiento alojada en MyKinsta.
Una solicitud GET a la aplicación en pleno funcionamiento alojada en MyKinsta.

¡Eso es todo! Puedes consultar el código completo del proyecto en GitHub.

Resumen

Este artículo ha demostrado cómo el framework Express permite crear y desplegar una aplicación Node.js de forma rápida y sencilla. Puedes crear una nueva aplicación con el generador Express en unos sencillos pasos. Con el Alojamiento de Aplicaciones de Kinsta, el despliegue de la aplicación se agiliza y requiere una configuración mínima.

La potencia y facilidad de uso del framework Express para el desarrollo de aplicaciones Node.js es significativa. Con Kinsta, puedes llevar el impulso que Express y Node.js te dan a la fase de despliegue de tu proyecto sin perder tiempo con la configuración.

¿Qué opinas del generador de aplicaciones Express? ¿Lo has utilizado para desarrollar alguna aplicación anteriormente? ¡No dudes en compartir tus experiencias en los comentarios de abajo!

Jeremy Holcombe Kinsta

Editor de Contenidos y Marketing en Kinsta, Desarrollador Web de WordPress y Redactor de Contenidos. Aparte de todo lo relacionado con WordPress, me gusta la playa, el golf y el cine. También tengo problemas con la gente alta ;).