¿Por qué Node.js no ve archivos en la carpeta node_modules?

A veces, los desarrolladores quieren servir algún activo estático de node_modules. Por lo general, no queremos exponer ninguno de sus caminos internos al mundo exterior. Si sus archivos están en el directorio node_modules , puede hacer una ruta estática en su servidor que obtenga sus archivos desde cualquier directorio que especifique. 

La función express.static() se usa para servir los archivos estáticos desde un directorio, use la función de middleware incorporada express.static() en Express.

Sintaxis:

express.static(root, [options])

Parámetros: Esta función acepta los siguientes dos parámetros:

  • root: el parámetro raíz especifica el directorio desde donde desea servir el archivo estático. 
  • options: es un parámetro opcional que contiene propiedades como etag, dotfiles, etc.

Por ejemplo, si desea servir activos estáticos desde el nombre de la carpeta public , use el siguiente código.

app.use(express.static('public'))

Ahora, su aplicación puede servir recursos estáticos en todas las URL.

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css

Ejemplo: para servir archivos CSS de arranque desde el directorio node_modules

Paso 1: Primero, cree una aplicación NodeJS e instale los módulos necesarios como Express.js y bootstrap .

mkdir Project 
cd Project
npm init -y
npm i express bootstrap

Paso 2: Cree un archivo index.js que es nuestro servidor básico con el siguiente código.

índice.js

Javascript

const express = require('express');
const path = require('path');    
  
const app = express();
const PORT = 3000;
  
// Static route
// Serve bootstrap CSS file 
app.use('/bootstrap', 
    express.static(path.join(__dirname, 
      'node_modules/bootstrap/dist/css')));
  
// GET Request
app.get('/', (req,res)=>{
    res.sendFile(path.join(__dirname, 'index.html'));
})
  
// Start the server
app.listen(PORT, err =>{
    err ? 
    console.log("Error in server setup") :
    console.log("Server listening on Port", PORT)
});

Paso 3: Cree un archivo index.html en su directorio raíz con el siguiente código.

índice.html

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title></title>
    <link rel="stylesheet" 
      href="/bootstrap/bootstrap.min.css"> 
</head>
  
<body>
    <h1 class="text-success">GeeksforGeeks</h1> 
</body>
  
</html>

Explicación: la URL de la hoja de estilo es /bootstrap/bootstrap.min.css , donde /bootstrap es el prefijo virtual. Entonces, cuando el servidor recibe una solicitud de esta URL, el servidor busca el archivo especificado en su ruta estática especificada node_modules/bootstrap/dist/css y lo envía al cliente. 

Paso 4: Ejecute el servidor con el siguiente comando:

node index.js

Salida: Verá la siguiente salida en la pantalla del terminal.

Server listening on Port 3000

Ahora abra cualquier navegador y vaya a http://localhost:3000/ , verá el siguiente resultado.

Publicación traducida automáticamente

Artículo escrito por braktim99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *