Pasos para crear una aplicación Express.js

Express es el marco minimalista más popular. Se basa en el módulo HTTP integrado de NodeJS para facilitar la interacción simple y fácil entre la lógica de frontend y backend a través de la API, y también nos permite organizar nuestra lógica comercial de una manera muy bonita. Es mucho más flexible y podemos usarlo tanto para la web como para Android. Además, proporciona un procedimiento de manejo de errores muy simple.

Enfoque: a continuación se muestran los pasos fundamentales para escribir una aplicación rápida. Aquí cubrimos temas como la configuración del entorno con la instalación de módulos, la creación de una aplicación, la ejecución del servidor web y la comunicación básica con el servidor. Debe saber cómo usar el administrador de paquetes de Nodes para trabajos básicos, conocimiento básico de la terminal para instalar dependencias y módulos, conocimiento básico de cómo funciona una aplicación web y un buen conocimiento de ES6. 

Implementación paso a paso:

Paso 1: escriba este comando en su terminal para crear una aplicación nodejs, ya que nuestro servidor express funcionará dentro de la aplicación del Node.

Sintaxis:  

npm init

Esto le pedirá algunas configuraciones sobre su proyecto, puede completarlas en consecuencia, también puede cambiarlo más tarde desde el archivo  package.json .

Nota: use ` npm init -y ` para la inicialización predeterminada

Paso 2: Instalar las dependencias necesarias para nuestra aplicación.

npm install express

Algo como esto se mostrará en la instalación exitosa,  

Paso 3: La estructura del proyecto se verá como sigue. 

Cree un archivo app.js, para este artículo, escribiremos todo el código express en ese archivo. Esta será nuestra estructura de carpetas. Ahora dentro de app.js, importe express con la palabra clave require y cree una aplicación llamando a la función express() proporcionada por el marco express. Configure el puerto para nuestra aplicación local, 3000 es el predeterminado, pero puede elegir cualquiera según la disponibilidad de puertos. Llame a la función listen() , requiere ruta y devolución de llamada como argumento. Comienza a escuchar la conexión en la ruta especificada, el host predeterminado es localhost y nuestra ruta predeterminada para la máquina local es localhost:3000, aquí 3000 es el puerto que hemos establecido anteriormente. La función de devolución de llamada se ejecuta en el inicio exitoso del servidor o debido a un error.

const express = require('express');
  
const app = express();
const PORT = 3000;
  
app.listen(PORT, (error) =>{
    if(!error)
        console.log("Server is Successfully Running, 
                   and App is listening on port "+ PORT)
    else 
        console.log("Error occurred, server can't start", error);
    }
);

Paso para ejecutar la aplicación: ahora que hemos creado un servidor, podemos comenzar a ejecutarlo con éxito para ver si funciona, escriba este comando en su terminal para iniciar el servidor express. 

node app.js

Salida: verá algo como esto en la terminal.

Ahora, con todo esto, hemos creado y ejecutado el servidor con éxito, si su servidor no se inicia, entonces puede haber algún error, intente analizar y leer ese error y resolverlo en consecuencia. 
Finalmente, después de una ejecución exitosa, si intenta abrir la URL (localhost: 3000) en el navegador, le mostrará que no puede OBTENER / porque aún no hemos configurado ninguna ruta en esta aplicación.  

Paso 4: Ahora configuraremos todas las rutas para nuestra aplicación.

Las rutas son los puntos finales del servidor, que están configurados en nuestro servidor backend y cada vez que alguien intenta acceder a esos puntos finales, responde de acuerdo con su definición en el backend. Si es un principiante, puede considerar la ruta como una función que se llama cuando alguien solicita la ruta especial asociada con esa función y devuelve el valor esperado como respuesta. Podemos crear rutas para métodos HTTP como get, post, put, etc. 

Sintaxis: la sintaxis básica de este tipo de rutas se ve así, la función dada se ejecutará cuando la ruta y el método de solicitud se parezcan.

app.anyMethod(path, function)

Ejemplo 1: configuración de una ruta de solicitud de obtención básica en la URL raíz (ruta ‘/’) del servidor.

1. Con app.get() estamos configurando nuestra primera ruta, requiere dos argumentos, el primero es la ruta y el segundo es una función que se ejecutará cuando alguien solicite esta ruta con el método GET. El expreso proporciona el objeto de solicitud y respuesta como un parámetro para todos estos tipos de funciones.
2. El req es un objeto gigante que se recibirá del usuario y res es un objeto que se enviará al usuario después de que la función termine de ejecutarse.
3. Más tarde, llamamos al método status() , toma un código de estado HTTP como argumento y cuando se devuelve la respuesta, se enviará el estado.
4. Finalmente, estamos devolviendo la respuesta al usuario. El método send() toma una string, un objeto, una array o un búfer como argumento y se usa para enviar el objeto de datos al cliente como una respuesta HTTP. También hay muchos tipos de respuesta en express como res.json( ) que se usa para enviar un objeto JSON, res.sendFile() que se usa para enviar un archivo, etc.

const express = require('express');
  
const app = express();
const PORT = 3000;
  
app.get('/', (req, res)=>{
    res.status(200);
    res.send("Welcome to root URL of Server");
});
  
app.listen(PORT, (error) =>{
    if(!error)
        console.log("Server is Successfully Running,
                    and App is listening on port "+ PORT)
    else 
        console.log("Error occurred, server can't start", error);
    }
);

Paso para ejecutar la aplicación: guarde este código, reinicie el servidor y abra el host local en el puerto dado. Cuando el cliente solicita con el método apropiado en la ruta especificada, por ejemplo: solicitud GET en la ruta ‘/’, nuestra función devuelve la respuesta como texto sin formato. Si abrimos la sección de red en las herramientas de desarrollo de Chrome (presione Ctrl + Shift + I para abrir) verá la respuesta devuelta por el localhost junto con toda la información.  

Producción:

Ejemplo 2: Configuración de una ruta de solicitud de obtención más en la ruta ‘/hello’ . 

1. La mayoría de las cosas son las mismas que en el ejemplo anterior.
2. La función set() se usa para establecer el tipo de contenido del encabezado HTTP como HTML. Cuando el navegador reciba esta respuesta, se interpretará como HTML en lugar de texto sin formato.
3. Además, en este ejemplo, no estamos configurando explícitamente el estado, ahora está concatenado con la declaración de envío de la respuesta. Esta es otra forma de enviar el estado junto con una respuesta.

const express = require('express');
  
const app = express();
const PORT = 3000;
  
app.get('/hello', (req, res)=>{
    res.set('Content-Type', 'text/html');
    res.status(200).send("<h1>Hello GFG Learner!</h1>");
});
  
app.listen(PORT, (error) =>{
    if(!error)
        console.log("Server is Successfully Running, and App is
                      listening on port "+ PORT)
    else 
        console.log("Error occurred, server can't start", error);
    }
);

Paso para ejecutar la aplicación: guarde este código, reinicie el servidor y abra el host local en el puerto dado. Ahora acceda a la ruta ‘/hello’ desde el navegador. El texto h1 dentro de HTML se mostrará como respuesta.

Producción:

Paso 5: Ahora veremos cómo enviar datos al servidor.

A veces tenemos que enviar nuestros datos al servidor para su procesamiento, por ejemplo, cuando intentas iniciar sesión en Facebook, envías una contraseña y un correo electrónico al servidor. Aquí veremos cómo recibir los datos de la solicitud del usuario. Podemos enviar datos con el objeto de solicitud en la ruta especificada con los métodos HTTP apropiados. Hasta ahora estábamos usando el navegador para interactuar con el servidor, pero en este paso, se debe necesitar cualquier herramienta o formulario de interfaz para enviar datos porque la barra de búsqueda del navegador solo puede enviar requests para recibir recursos del servidor. 

Ejemplo: configurar una ruta para que los usuarios accedan a enviar datos con requests posteriores.

1. Antes de crear una ruta para recibir datos, estamos usando un middleware incorporado, el middleware es un tema tan amplio y más avanzado que no lo discutiremos aquí, solo para entender un poco, puede pensar en esto como una pieza de código. que se ejecuta entre los ciclos de solicitud-respuesta.
2. El middleware express.json() se utiliza para analizar el objeto de solicitud entrante como un objeto JSON. app.use() es la sintaxis para usar cualquier middleware.
3. Después de eso, hemos creado una ruta en la ruta ‘/’ para la possolicitud. 
4. const {nombre}, que es la sintaxis en ES6 para extraer la propiedad o propiedades dadas del objeto. Aquí estamos extrayendo la propiedad de nombre que envió el usuario con este objeto de solicitud.
5. Después de eso, simplemente estamos enviando una respuesta para indicar que hemos recibido los datos con éxito. Si este `${} ` te parece extraño, déjame decirte que es la sintaxis en ES6 para generar strings con expresión javascript en ES6. Podemos inyectar cualquier expresión javascript dentro de ${}.

const express = require('express');
  
const app = express();
const PORT = 3000;
  
app.use(express.json());
app.post('/', (req, res)=>{
    const {name} = req.body;
      
    res.send(`Welcome ${name}`);
})
  
app.listen(PORT, (error) =>{
    if(!error)
        console.log("Server is Successfully Running, and 
                    App is listening on port "+ PORT)
    else 
        console.log("Error occurred, server can't start", error);
    }
);

Paso para ejecutar la aplicación: Estamos Accediendo a la ruta con Postman. Es una herramienta para probar API, podemos usar cualquier otra cosa como Axios, fetch o cualquier otra cosa desde la interfaz o cURL desde la terminal, pero eso hará que se desvíe del tema, solo tenga en cuenta que nuestro servidor express solo exige una ruta con objeto de solicitud, no importa de dónde venga. Hemos enviado los datos como un objeto JSON con el cuerpo de la solicitud y express nos envía una respuesta junto con los datos. Indica que nuestro objetivo de enviar datos al servidor tuvo éxito.  

Producción: 

Paso 5: Envío de archivos desde el servidor

Paso 6: Ahora veremos cómo enviar archivos desde el servidor.

Varias veces necesitamos transferir los recursos del servidor según la solicitud del usuario, existen principalmente dos métodos para enviar archivos, uno es enviar archivos estáticos usando middleware y el otro es enviar un solo archivo en una ruta.
Esta es nuestra estructura de carpetas y queremos servir los archivos del directorio de archivos estáticos como archivos estáticos y la imagen.jpg en una ruta separada.

Ejemplo 1: servir el directorio completo usando middleware   Express nos proporciona un middleware express.static(), acepta dos argumentos, el primero es la ruta raíz absoluta del directorio cuyos archivos vamos a servir. Simplemente podemos usarlo para servir archivos estáticos, proporcionando a app.use() . 

Sintaxis:

app.use(path, express.static(root, [options]));

1. En primer lugar, estamos importando un `ruta` del módulo incorporado, porque más adelante vamos a utilizar una de las funciones proporcionadas por este módulo.
2. Simplemente estamos montando un middleware en la ruta ‘/static’ .
3. El middleware static() requiere una ruta absoluta, por lo que usamos el método de unión del módulo de ruta.
4. El método join() toma dos parámetros y los une como una ruta, en NodeJS tenemos un atributo global __dirname que contiene la ruta del directorio en el que se encuentra el archivo actual.
5. Proporcionamos esa ruta unida al middleware para que pueda comenzar a servir los archivos dentro de ese directorio en la ruta dada.

const express = require('express');
  
const app = express();
const PORT = 3000;
  
const path = require('path')
app.use('/static', express.static(path.join(__dirname, 'Static Files')))
  
  
app.listen(PORT, (error) =>{
    if(!error)
        console.log("Server is Successfully Running, 
                   and App is listening on port "+ PORT)
    else 
        console.log("Error occurred, server can't start", error);
    }
);

Paso para ejecutar la aplicación: Esta será la respuesta devuelta cuando solicitemos algún archivo estático del directorio que estamos sirviendo como estático. Aquí puede ver que hemos recibido un archivo HTML como respuesta a ‘/static/random.html’ . Lo mismo sucede cuando solicitamos ‘/static/1.jpg’.

Producción:

Ejemplo 2: Envío de un solo archivo en una ruta con la función sendFile().
Esta función acepta una URL absoluta del archivo y cada vez que se accede a la ruta de la ruta, el servidor proporciona el archivo como una respuesta HTTP. Este proceso se puede considerar como un punto final único de express.static(). Puede ser útil cuando tenemos que hacer algún tipo de procesamiento antes de enviar el archivo.

Sintaxis:

res.sendFile(fileUrl)

1. Estamos creando una ruta de solicitud de obtención en la ruta ‘ / archivo’
2. Luego, estamos creando la ruta absoluta uniendo la ruta del __dirname actual y el nombre del archivo que queremos enviar y luego pasándolo a sendFile().
3. Luego, la ruta envía el archivo image.jpg al usuario como una respuesta HTTP.

const express = require('express');
const path = require('path');
  
const app = express();
const PORT = 3000;
  
app.get('/file', (req, res)=>{
    res.sendFile(path.join(__dirname,'image.jpg'));
});
  
app.listen(PORT, (error) =>{
    if(!error)
        console.log("Server is Successfully Running, and App is listening on port "+ PORT)
    else 
        console.log("Error occurred, server can't start", error);
    }
);

Salida: después de ejecutar el servidor, cuando solicitamos la ruta ‘/ archivo’, el servidor envía el archivo image.jpg como respuesta.