3

Estoy haciendo un pequeño proyecto personal con HTML, CSS, Javascript y Node.js. El problema es que cuándo carga el servidor y cargo el archivo .html , éste se muestra sin los estilos .css ni las imágenes, solo el html. Investigué un poco y encontré que hay que indicar la ruta para servir los archivos estáticos (.css, .html, imagenes, etc), lo hice pero no me funciona. Alguien podría ayudarme? el directorio de mi proyecto actual esta así: tengo una carpeta llamado NODE, donde tengo el archivo de node.js, y dentro de esta carpeta tengo otra llamada PUBLIC donde tengo el .html, .css y las imágenes. en el archivo de node.js tengo el código que muestro en la captura. También dejo una imagen para que vean como se muestra en el navegador, sin estilos ni nada. Espero alguien pueda ayudarme, ya que he intentado de todo y no funciona nada.

directorio de mi proyecto (dentro de la carpeta public se encuentra el .html, .css, imágenes, etc. el form.js es el archivo node.js )

Este es el código del archivo form.js (node):

'use strict'
var http = require('http').createServer(webServer);
const express = require('express');
const app = express();
app.use(express.static('public'));
        
var form = require('fs').readFileSync('publico/formulario.html');
var querystring = require('querystring');
var util = require('util');
var dataString = '';

function webServer(req, res) {
        if(req.method == 'GET'){
            res.writeHead(200,{'Content-Type' : 'text/html'})
            res.end(form)  
        }

        if(req.method == 'POST'){
            req
                .on('data',function(data){
                    dataString += data
                })
                .on('end',function(){ 
                    var templateString = `los datos que enviaste por POST como string son: ${dataString}`
                    console.log(templateString)
                    res.end(templateString)
                })
        }
}

http.listen(3000);
console.log('Servidor corriendo en http:localhost:3000/')

Asi se muestra cuando inicio el servidor y abro el navegador, vean que no se cargan los estilos:

Gracias de antemano al que me pueda ayudar, he intentado todo lo que he encontrado y nada ha funcionado.

3 respuestas 3

6

O es chicha o es limonada.

Estas mezclando cosas y por eso el resultado no es el esperado.

En esta respuesta se muestra una forma de servir archivos estáticos:

  • usando Express
  • usando el módulo HTTP de Nodejs.

Express

Express es un potente framework para Node, que te permite crear aplicaciones o API's de forma muy rápida.

Una de sus características principales es que se encarga de manejar las solicitudes y respuestas mediante funciones middleware.

En tu código (aportado en la pregunta), lo único que hace Express es ocupar memoria del equipo:

const express = require('express');
const app = express();
app.use(express.static('public'));

Y es que luego no utilizas para nada tu aplicación Express, sino por el contrario, levantas tu servidor usando el módulo http de Node, dejando la aplicación de Express instanciada sin más.

Al punto al que quiero llegar es que cuando levantas un servidor http con Node, y usas Express, no es necesario importar el módulo http, ya que Express lo hace internamente.

Un ejemplo muy básico de un servidor usando Express sería:

// importamos los módulos necesarios
const express = require('express');
const path = require('path');

//creamos una instancia de express
const app = express();

// puerto donde queremos que escuche nuestro servidor
const port = 3000;

// función middleware para servir archivos estáticos
app.use(express.static(path.join(__dirname, 'public')));

// levantamos nuestro servidor en el puerto seleccionado
app.listen(port, () => {
  console.log(`Servidor iniciado en el puerto: ${port}`);
});

Ahora, cualquier solicitud a http://localhost:3000/archivo.ext debería funcionar, siempre que archivo.ext exista en la carpeta public.

¿path, __dirname? ¿me lo explicas por favor?

El módulo path de NodeJS es una herramienta que nos permite trabajar con archivos y directorios de archivos (path).

El método join() que estoy usando, me permite unir los segmentos o trozos de rutas válidas a directorios.

Por ejemplo, si en MS Windows, yo uso:

path.join('C:\\folder','subfolder');

el resultado será:

'C:\\folder\\subfolder' 

(recordemos que en sistemas Windows, los directorios se delimitan con barra invertida, es por ello que debemos usar el carácter de escape: \)

La variable de entorno __dirname, nos proporciona la ruta (path) del archivo que ejecuta el script de Node. En tu caso, debe indicar el directorio en donde se encuentra tu archivo form.js (es aconsejable que uses un nombre un poco más acorde, como server.js, app.js o incluso index.js)

Al usar __dirname me aseguro de apuntar directamente al directorio donde reside mi script, y en ese mismo directorio debe haber un subdirectorio llamado public, de esta forma, nuestra aplicación Express sabrá cuál es la ruta absoluta de los archivos que debe servir.

Por otro lado, usar __dirname nos elimina el engorroso tema de escribir la ruta a mano, y así evitamos errores de tipeo.

¿Y las cabeceras?

Resulta que no todo en esta vida es fácil y siempre tendremos algún dolor de cabeza.

En este caso, nuestro quebradero de cabezas son precisamente las cabeceras HTTP. Y es que tanto cliente como servidor deben saber de antemano el tipo de dato que están recibiendo de su contraparte. Express no hace esto por nosotros, pero nos provee de una forma de hacerlo.

Cuando se envía una archivo en cualquier formato desde nuestro servidor, debemos establecer una cabecera de tipo content-type cuyo valor es uno de los posibles tipo MIME listado por el IANA. Por ejemplo:

  • HTML: text/html.
  • CSS: text/css.
  • Javascript: application/javascript.
  • PNG: image/png.

En esta respuesta doy una explicación amplia del proceso, entonces, para no ser repetitivo, sólo mostraré cómo ha de quedar el código en cuestión. Para ello usaremos el módulo mime, que debemos instalar en nuestra aplicación usando: npm install --save mime@latest.

El código debe verse así:

// importamos el módulo
const mime = require('mime');

// escribimos la función que creará nuestra cabecera
const setHeadersOnStatic = (res, path, stat) => {
  const type = mime.getType(path);
  res.set('content-type', type);
}

// creamos el objeto con las opciones
const staticOptions = {
  setHeaders: setHeadersOnStatic
}

// usamos las opciones
app.use(express.static(path.join(__dirname, 'public'), staticOptions));

Recibir datos del formulario

Por último, en tu código se ve que deseas responder a una solicitud tipo POST, para ello, puedes usar una función middleware que se encargue de procesar la solicitud y enviar la respuesta acorde.

Dado que en nuestra carpeta public ya tenemos un archivo llamado formulario.html, no necesitamos escribir un middleware para una solicitud GET, ya que nuestro servidor ya está configurado para servir dicho archivo si se accede a la ruta:

http://localhost:3000/formulario.html

Pero para recibir los datos de dicho formulario, una vez que el cliente lo complete y haga clic en el botón de submit, debemos decirle a Express cómo procesar esa solicitud. Para ello, usaremos el método post:

app.post('/ruta', (req, res, next) => {
  const data = req.body;
  console.log(data);
  res.status(200).json({
    mensaje: 'Datos recibidos',
    data
  });
});

Aquí he usado el campo body de nuestro objeto request, sin embargo, para usar dicho campo, el mismo debe primero ser llenado con la información proveniente del cliente. Esto sólo ocurre si analizamos la solicitud con un parser.

Express nos provee su propio parser o analizador (a partir de la versión v4.16.0 en adelante). Por lo tanto debemos decirle a nuestra aplicación que use dicho analizador para que el campo body sea poblado con la data que viene en la solicitud:

app.use(express.json()); // for parsing application/json
app.use(express.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded

Con esto ya estamos casi listos, y es que nos falta indicar en el formulario la ruta a la que será enviada la data del mismo. En mi ejemplo estoy usando /ruta, por lo tanto la data debe ser enviada a:

http://localhost:3000/ruta

En el formulario escribimos el siguiente atributo:

<form name="formulario" action="http://localhost:3000/ruta" method="POST">
...
</form>

De esta forma, el navegador sabrá que los datos del formulario deben ser enviados a la ruta indicada en el atributo action, usando el método indicado en el atributo method.

Una forma en la que se puede ver el código sería la siguiente:

// importamos los módulos necesarios
const express = require('express');
const path = require('path');
const mime = require('mime');

//creamos una instancia de express
const app = express();

// puerto donde queremos que escuche nuestro servidor
const port = 3000;

// middleware para proceso de data
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// escribimos la función que creará nuestra cabecera para archivos estáticos
const setHeadersOnStatic = (res, path, stat) => {
  const type = mime.getType(path);
  res.set('content-type', type);
}

// creamos el objeto con las opciones para archivos estáticos
const staticOptions = {
  setHeaders: setHeadersOnStatic
}

// usamos las opciones en el método static()
app.use(express.static(path.join(__dirname, 'public'), staticOptions));

// middleware para procesar el formulario
app.post('/ruta', (req, res, next) => {
  const data = req.body;
  console.log(data);
  res.status(200).json({
    mensaje: 'Datos recibidos',
    data
  });
});

// levantamos nuestro servidor en el puerto seleccionado
app.listen(port, () => {
  console.log(`Servidor iniciado en el puerto: ${port}`);
});

Como puedes ver, en ningún momento se hace uso del módulo http de Node, ya que todo ese trabajo lo hace Express por nosotros.

HTTP

Por supuesto, todo esto lo puedes hacer sin Express, y para un servidor que sólo sirve archivos estáticos, no es mucho el código por escribir. Sin embargo, manejar las solicitudes puede convertirse en una pesadilla si no se tiene la paciencia y el conocimiento adecuados. Es una de las razones por la cuales se prefiere usar un framework (como Express) que funcione sobre el módulo http de Node, para que haga todo el trabajo pesado.

Ya tu tenías una parte avanzada para manejar las solicitudes GET y POST a una ruta de tu archivo, usaremos esto mismo y verás que puede ser sencillo esta parte tan básica de tu servidor HTTP con Node.

Igualmente usaremos el módulo mime para establecer las cabeceras adecuadas cuando se sirve un archivo estático. Tu función webServer puede verse de la siguiente forma:

function webServer(req, res) {
  if(req.method === 'GET'){
    const fileRequested = path.join(__dirname, 'public', req.url);
    fs.readFile(fileRequested, (err, data) => {
      if(err) {
        res.writeHead(404);
        res.end(JSON.stringify(err));
        return;
      }
      const mimeType = mime.getType(fileRequested);
      const headers = {
        'content-type': mimeType
      };
      res.writeHead(200, header);
      res.end(data);
    });
  }
  if(req.method === 'POST') {
    req
      .on('data', data => {
        dataString += data;
      })
      .on('end', () => { 
        const templateString = `los datos que enviaste por POST como string son: ${dataString}`
        console.log(templateString);
        const headers = {
          'content-type': 'text/plain'
        };
        res.writeHead(201, headers);
        res.end(templateString);
      });
  }
}

Podemos observar algunos aspectos importantes:

  1. Usamos path.join() y le pasamos como argumentos la ruta __dirname, el nombre de la carpeta public y el nombre del archivo solicitado en req.url
  2. Se establece la cabecera content-type de acuerdo al archivo servido en una solicitud GET
  3. Se usa el método readFile() del módulo fs de Node, para leer el contenido del archivo solicitado.
  4. Para la respuesta a una solicitud POST, se establece una cabecera fija de tipo text/plain ya que se responde con un texto plano. Obviamente esto lo puedes cambiar a gusto de acuerdo a lo que necesites responder.

Por último, tu código usando sólo el módulo http de Node, para un servicio muy sencillo podría verse de la siguiente forma:

// importamos los módulos necesarios
const http = require('http');
const mime = require('mime');
const path = require('path');
const fs = require('fs');

// establecemos el puerto de escucha de nuestro servidor
const port = 3000;

// creamos la función que manejará las solicitudes
function webServer(req, res) {
  if(req.method === 'GET'){
    const fileRequested = path.join(__dirname, 'public', req.url);
    fs.readFile(fileRequested, (err, data) => {
      if(err) {
        res.writeHead(404);
        res.end(JSON.stringify(err));
        return;
      }
      const mimeType = mime.getType(fileRequested);
      const headers = {
        'content-type': mimeType
      };
      res.writeHead(200, headers);
      res.end(data);
    });
  }
  if(req.method === 'POST') {
    req
      .on('data', data => {
        dataString += data;
      })
      .on('end', () => {
        const templateString = `los datos que enviaste por POST como string son: ${dataString}`
        console.log(templateString);
        const headers = {
          'content-type': 'text/plain'
        };
        res.writeHead(201, headers);
        res.end(templateString);
      });
  }
}

// instanciamos el servidor
const server = http.createServer(webServer);

// levantamos el servidor en el puerto establecido
server.listen(port, () => {
  console.log(`Servidor escuchando en el puerto: ${port}`);
});

Parte del código anterior es tomado de How to serve static files.

Con esto tenemos la misma funcionalidad básica que hemos creado anteriormente con Express, pero en este caso sólo usando el módulo http de Node y el módulo mime para los tipos de archivos.

Espero que esto resuelva tu duda.

10
  • Muchas gracias por tu respuesta, Si, estaba bastante perdido, estaba siguiendo un curso y de repente empezaron a usar Express para servir los archivos estáticos, en realidad soy un novato, y estoy tratando de hacer un pequeño proyecto personal, pero me cuesta entender la documentación oficial, por eso trato de apoyarme en libros o cursos. Por ejemplo, estuve buscando el evento 'data' en la documentación y me costo encontrarlo, por fin vi que estaba en el modulo stream, eso no lo entendí, es del módulo stream y se usa en las peticiones http ?
    – JulianProg
    Commented el 24 nov. 2019 a las 20:33
  • Sucede que la Clase http.ClientRequest exitende de la Clase stream. Es por ello que emite el evento data. Espero que eso aclare to duda. Saludos Commented el 24 nov. 2019 a las 20:40
  • Hola Mauricio, disculpa que soy yo de nuevo, resulta que estoy tratando de hacer esto con Express, ya que me recomendaron que comenzara con express de una vez. te pregunto... hay una forma de responder al cliente sin mostrar la respuesta en la vista? me expico, veo que cuando se hace res.status(200).json({ mensaje: 'Datos recibidos', data }); o también res.send(); esto que se envía se muestra directamente en el cliente y sustituye la vista actual por esa respuesta. si solo quisiera usar los valores devueltos en la respuesta (sin mostrarlos en la vista) como podría hacer?
    – JulianProg
    Commented el 22 dic. 2019 a las 16:29
  • @JulianProg Eso lo debes controlar en la parte del frontend. Cuando dices: si solo quisiera usar los valores devueltos en la respuesta, de esta parte no se encarga Express. De esto se encarga tu lógica de frontend. Podrías usar desde Express el concepto de plantillas. Una muy popular es ejs, la cual puedes crear con los datos requeridos y enviarla al cliente como vista ya preparada. Saludos Commented el 22 dic. 2019 a las 17:47
  • Estoy usando ajax en cliente, pero no he encontrado la forma. como tengo esta linea en el formulario .html : <form name="formulario" id="formulario" action="localhost:3000/validar" method="POST"> no se ejecuta la funcion que tengo para que la peticion se haga desde ajax y no desde el formulario.html.
    – JulianProg
    Commented el 22 dic. 2019 a las 18:09
0

Solo establece la ruta publica de este modo

const path = require('path')
app.use(express.static(path.join(__dirname, 'public')))
2
  • 1
    No me funciona amigo, agregué lo que me dijiste y quite el app.use que tenia anteriormente pero sigue igual.
    – JulianProg
    Commented el 23 nov. 2019 a las 2:51
  • 1
    deberias usar los metodos de definicion de ruta que trae express como get() o post() asi no te lias tanto validando el tipo de metodo en el que viene la peticion
    – Unknow
    Commented el 23 nov. 2019 a las 3:57
-1

Yo trataria lo siguiente, saca el archivo .html del folder public y lo pones en el mismo folder que node.js, cerciorate que el link para el archivo css in el archivo .html este precedido por un / como /style.css, el link de las imagenes como (nombre del folder de imagenes)/nombre.jpg.

Puedes cambiar res.writeHead(200,{'Content-Type' : 'text/html'}) a res.sendFile(__dirname + "/(el nombre de tu archivo html).html");

1
  • Hola, aunque yo no he sido el del negativo, te invito a leer Cómo responder, si bien tu respuesta la veo válida (ya que es una solución que funciona), aparte de no ser óptima, no es lo que el OP desea. La idea de separar los archivos públicos de los que no lo son, es para evitar accesos no deseados a los archivos que manejan la aplicación. Por lo tanto, es siempre preferible crear una carpeta diferente para almacenar los archivos que no tienen nada que ver con la lógica del programa y así no mezclar las cosas. Saludos. Commented el 24 nov. 2019 a las 12:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.