¿Qué es Express.js y por qué debería utilizarlo?

Express.js (o "Express") es un marco web NodeJS utilizado en el back-end (o servidor) de sitios web y aplicaciones web. Express es flexible y minimalista, lo que significa que no tiene una colección extensa de bibliotecas y paquetes innecesarios, ni dicta cómo debe construir su aplicación.

El marco Express crea API que facilitan la comunicación a través de solicitudes y respuestas HTTP. Una de las cosas notables de Express es que les brinda a los desarrolladores un control total sobre las solicitudes y respuestas asociadas con cada uno de los métodos de su aplicación.

En este tutorial, aprenderá cómo y por qué debería usar Express en sus propios proyectos.

Instalación de Express en su proyecto

Antes de que pueda utilizar el marco Express, deberá instalarlo en el directorio de su proyecto. Este es un proceso sencillo que requiere NodeJS y npm.

Lo primero que debe hacer es crear un package.json archivo (dentro del directorio / carpeta de su proyecto) usando el siguiente comando:

npm init

La ejecución del comando anterior iniciará un proceso que le solicitará las siguientes entradas:

• Nombre del paquete
• Versión
• Descripción
• Punto de entrada
• Comando de prueba
• Palabras clave
• Autor
• Licencia

El nombre del paquete, la versión, el punto de entrada y los campos de licencia tienen valores predeterminados que puede anular fácilmente proporcionando sus valores. Sin embargo, si desea mantener los valores predeterminados, simplemente puede usar el siguiente comando en su lugar:

npm init -y

La ejecución del comando anterior generará lo siguiente package.json archivo en el directorio de su proyecto:

{
"nombre": "myapp",
"versión": "1.0.0",
"descripción": "",
"main": "index.js",
"guiones": {
"prueba": "echo \" Error: no se especificó ninguna prueba \ "&& salida 1"
},
"palabras clave": [],
"autor": "",
"licencia": "ISC",
}

Ahora puede instalar Express usando el siguiente comando:

npm install express --save

La instalación de Express generará un package-lock.json archivo, así como un módulos_nodo carpeta.

Comprensión del archivo package.json

La razón por la que necesita crear un package.json archivo antes de instalar Express es que el package.json archivo actúa como un repositorio, almacenando metadatos importantes sobre su Proyectos de NodeJS.Dependencias es el nombre de uno de estos campos de metadatos, y Express es un dependencia.

La instalación de Express en el directorio de su proyecto actualizará automáticamente su package.json Archivo.

El archivo package.json actualizado

{
"nombre": "myapp",
"versión": "1.0.0",
"descripción": "",
"main": "index.js",
"guiones": {
"prueba": "echo \" Error: no se especificó ninguna prueba \ "&& salida 1"
},
"palabras clave": [],
"autor": "",
"licencia": "ISC",
"dependencias": {
"express": "^ 4.17.1"
}
}

Ahora tiene un campo de "dependencias" que tiene una dependencia: Express. Y el dependencias object almacena el software del que depende su proyecto para funcionar correctamente, que en este caso es el marco Express.

Crear un servidor con Express

Tener una API que maneje el almacenamiento y movimiento de datos es un requisito para cualquier aplicación de pila completa, y Express hace que el proceso de creación del servidor sea rápido y fácil.

Mira hacia atrás en el package.json archivo de arriba y verá un campo "principal". Este campo almacena el punto de entrada a su aplicación, que es "index.js" en el ejemplo anterior. Cuando desee ejecutar su aplicación (o en este caso, el servidor que está a punto de construir), tendrá que ejecutar el index.js archivo usando el siguiente comando:

nodo index.js

Sin embargo, antes de llegar a la etapa de ejecución, deberá crear el index.js (o aplicación de servidor) en el directorio de su proyecto.

Creando el archivo index.js

const express = require ('express');
aplicación constante = express ();
puerto constante = 5000;
app.get ('/', (req, res) => {
res.send ('Su servidor está operativo')
})
app.listen (puerto, () => {
console.log (`El servidor se está ejecutando en: http://localhost:${port}`);
})

El archivo anterior importa Express y luego lo usa para crear una aplicación Express. La aplicación Express luego proporciona acceso a la obtener y escucha métodos que forman parte del módulo Express. El app.listen () El método es el primero que necesita configurar. Su propósito es enumerar las conexiones en un puerto específico de la computadora host, que es puerto 5000 en el ejemplo anterior.

El propósito de app.get () El método es obtener datos de un recurso específico. Este método tiene dos argumentos: una ruta y una función de devolución de llamada. El argumento de ruta en el ejemplo anterior tiene una barra inclinada que representa la posición de la raíz. Por lo tanto, navegar a la http://localhost: 5000 URL (que es la raíz de su aplicación), mientras se ejecuta su aplicación index.js anterior, producirá el siguiente resultado en su navegador:

El app.get () La función de devolución de llamada del método genera la salida anterior. Esta función de devolución de llamada tiene dos argumentos: solicitud y respuesta. La respuesta (que es res en el ejemplo anterior) es el objeto HTTP que envía una aplicación Express después de una solicitud HTTP (que es lo que hace al escribir la URL anterior en su navegador).

Servicio de un sitio web estático con su servidor Express

Los servidores juegan un papel importante en el desarrollo de API que ayudan a almacenar y transferir datos dinámicos, y ahí es donde probablemente usará un servidor Express en sus propios proyectos.

Sin embargo, un servidor Express también puede servir archivos estáticos. Por ejemplo, si desea crear un sitio web estático (como uno para un entrenador personal, un entrenador de vida o un estilista), puede usar su servidor Express para alojar el sitio web.

Un ejemplo de sitio web HTML estático

 casa 







Bienvenidos

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus rerum officia quibusdam mollitia deserunt animi soluta laudantium. Quam sapiente a dolorum magnam necessitatibus quis tempore facere totam. ¡Dolor, sequi Distintio!

Ver servicios

El código HTML anterior crea una página de inicio estática agradable de un sitio web de estilista personal mediante el enlace al siguiente archivo style.css:

*{
margen: 0;
acolchado: 0;
tamaño de caja: caja de borde;
}
cuerpo {
familia de fuentes: 'Lato', sans-serif;
altura de línea: 1,5;
}
a {
color: # 333;
decoración de texto: ninguna;
}
ul {
estilo de lista: ninguno;
}
pags {
margen: .5rem 0;
}
h1 {
margen izquierdo: 2rem;
}
/ * Utilidad * /
.envase {
ancho máximo: 1100px;
margen: automático;
acolchado: 0 2rem;
desbordamiento: oculto;
}
.btn {
pantalla: bloque en línea;
borde: ninguno;
fondo: # 910505;
color: #fff;
acolchado: 0.5rem 1rem;
radio de borde: 0.5rem;
}
.btn: hover {
opacidad: 0,9;
}
/ * Barra de navegación * /
#navbar {
fondo: #fff;
posición: pegajosa;
arriba: 0;
índice z: 2;
}
#navbar .container {
pantalla: cuadrícula;
columnas de plantilla de cuadrícula: 6fr 3fr 2fr;
acolchado: 1rem;
alinear-elementos: centro;
}
#navbar h1 {
color: # b30707;
}
#navbar ul {
justificarse a sí mismo: fin;
pantalla: flex;
margen derecho: 3.5rem;
}
#navbar ul li a {
acolchado: 0.5rem;
font-weight: negrita;
}
#navbar ul li a.current {
fondo: # b30707;
color: #fff;
}
#navbar ul li a: hover {
fondo: # f3f3f3;
color: # 333;
}
#navbar .social {
justificarse a sí mismo: centro;
}
#navbar .social i {
color: # 777;
margen derecho: .5rem;
}
/* casa */
#casa {
color: #fff;
fondo: # 333;
acolchado: 2rem;
posición: relativa;
}
#home: before {
contenido: '';
fondo: url ( https://source.unsplash.com/random) centro / cubierta sin repetición;
posición: absoluta;
arriba: 0;
izquierda: 0;
ancho: 100%;
altura: 100%;
opacidad: 0,4;
}
#home .showcase-container {
pantalla: cuadrícula;
columnas de plantilla de cuadrícula: repetir (2, 1fr);
justificar-contenido: centro;
alinear-elementos: centro;
altura: 100vh;
}
#home .showcase-content {
índice z: 1;
}
#home .showcase-content p {
margen inferior: 1rem;
}

Servicio del sitio web con Express Server

const express = require ('express');
aplicación constante = express ();
puerto constante = 5000;
app.use (express.static ('público'));
app.get ('/', (req, res) => {
res.sendFile ('index.html')
})
app.listen (puerto, () => {
console.log (`El servidor se está ejecutando en: http://localhost:${port}`);
})

Los archivos HTML y CSS anteriores se encuentran en una carpeta pública en el directorio principal del proyecto. La ubicación del archivo HTML lo hace accesible para el servidor Express y sus funciones.

Una de las nuevas funciones del servidor Express anterior es la app.use () método. Monta el express.static () middleware, que sirve archivos estáticos. Esto hace posible utilizar el res.sendFile () función para servir a la estática index.html archivo de arriba.

Navegando al http://localhost: 5000 location en su navegador mostrará algo similar a la siguiente salida:

Explore el desarrollo de backend

El marco Express le permite realizar solicitudes HTTP específicas y recibir respuestas adecuadas utilizando un conjunto de métodos predefinidos. También es uno de los marcos de backend más populares en la actualidad.

Aprender a utilizar el marco Express es un gran paso. Pero si realmente desea convertirse en un desarrollador de backend profesional, hay mucho más que debe aprender.

Aprenda a convertirse en desarrollador backend en 2021

Si tiene su corazón puesto en una carrera en TI, puede hacer algo peor que aprender las habilidades que necesita para ser un desarrollador de backend.

Leer siguiente

Sobre el Autor