Cómo enviar archivos HTML con Express

Introducción

En aplicaciones Node.js y Expressres.sendFile() , se puede utilizar para enviar archivos. Enviar archivos HTML mediante Express puede resultar útil cuando se necesita una solución para enviar páginas estáticas.

Nota: Antes de Express 4.8.0, res.sendfile()se admitía . Esta versión en minúsculas de res.sendFile()ya no se utiliza.

En este artículo aprenderás a utilizar res.sendFile().

Implemente sus aplicaciones Node desde GitHub con la plataforma de aplicaciones DigitalOcean . Deje que DigitalOcean se concentre en escalar su aplicación.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Node.js instalado localmente, lo cual puedes hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local .

Este tutorial fue verificado con Node v16.0.0, npmv7.11.1 y expressv4.17.1.

Paso 1 – Configuración del proyecto

Primero, abra su ventana de terminal y cree un nuevo directorio de proyecto:

mkdir express-sendfile-example

Luego, navegue hasta el directorio recién creado:

cd express-sendfile-example

En este punto, puedes inicializar un nuevo proyecto npm:

npm init -y

A continuación, deberá instalar el expresspaquete:

npm install express@4.17.1

En este punto, tienes un nuevo proyecto listo para usar Express.

Crea un nuevo server.jsarchivo y ábrelo con tu editor de código:

servidor.js

const express = require('express');const app = express();const port = process.env.PORT || 8080;// sendFile will go hereapp.listen(port);console.log('Server started at http://localhost:' + port);

Vuelva a visitar su ventana de terminal y ejecute su aplicación:

node server.js

Después de verificar que su proyecto funciona como se espera, puede utilizar res.sendFile().

Paso 2 – Usores.sendFile()

Revisa server.jstu editor de código y agrega path, .get()y res.sendFile():

servidor.js

const express = require('express');const path = require('path');const app = express();const port = process.env.PORT || 8080;// sendFile will go hereapp.get('/', function(req, res) {  res.sendFile(path.join(__dirname, '/index.html'));});app.listen(port);console.log('Server started at http://localhost:' + port);

Cuando se realiza una solicitud al servidor, index.htmlse sirve un archivo.

Crea un nuevo index.htmlarchivo y ábrelo con tu editor de código:

índice.html

!DOCTYPE htmlhtmlhead  meta charset="UTF-8"  titleSample Site/title  link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"  style    body { padding-top: 50px; }  /style/headbody  div    div      h1res.sendFile() Works!/h1    /div  /div    /body/html

Este código mostrará el mensaje: res.sendFile() Works!.

Nota: Este tutorial utiliza BootstrapCDN para diseñar, pero no es obligatorio.

Guarde los cambios. A continuación, vuelva a abrir la ventana de terminal y vuelva a ejecutar el servidor.

node server.js

Con el servidor en funcionamiento, visite http://localhost:8080en un navegador web:

Su aplicación ahora utiliza res.sendFile()archivos HTML.

Conclusión

En este artículo aprendiste a utilizar res.sendFile().

Continúe su aprendizaje con Aprenda a usar el enrutador Express 4.0 y Cómo recuperar parámetros URL y POST con Express .