0

Este es mi codigo de javaScript, estoy utilizando el modulo http, como puedo anadir mi archivo css la tengo en la ruta assets\css\index.css

const http = require("http");
//const path = require("path");
const fs = require('fs').promises;

const host = 'localhost';
const port = 8000;

const requestListener = function (req, res) {
    fs.readFile(__dirname + "/index.html" )
        .then(contents => {
            res.setHeader("Content-Type", "text/html");
            res.writeHead(200);
            res.end(contents);
        })
};



const server = http.createServer(requestListener);
server.listen(port, host, () => {
    console.log(`'app funcionando en el puerto 8000 http://${host}:${port}`);
});

al momento de ejcutarlo solo tengo el html, sin nada de estilos.

1

1 respuesta 1

0

Para hacerlo de la forma que estás haciendolo, debes identificar el tipo de archivo solicitado y trabajar sobre los headers, el css lo invocas desde el html de la siguiente manera ej:

<link rel="stylesheet" href="styles.css">

Entonces cuando se llame a "/", lo primero agregará el content-type: text/html, cuando el html intenta llamar al archivo css, detecta que la url hace un match con .css y agrega el header correspondiente y así consecutivamente, en el ejemplo también está hecho para que funcionen archivos .js, y está programado para que tanto los js como los css estén dentro de una carpeta de nombre "public" que debe estar en el mismo lugar que el index.html.

Código server.js

const http = require("http");
const path = require("path");
const fs = require("fs");

const host = "localhost";
const port = 8000;

const HTML_CONTENT_TYPE = "text/html";
const CSS_CONTENT_TYPE = "text/css";
const JS_CONTENT_TYPE = "text/javascript";

const PUBLIC_FOLDER = path.join(__dirname, "public");

const requestListener = function (req, res) {
  const { url } = req;
  let statusCode = 200;
  let contentType = HTML_CONTENT_TYPE;
  let stream;

  // si estamos pidiendo la ruta principal, devolvemos el contenido del index.html
  if (url === "/") {
    stream = fs.createReadStream("index.html");
  } else if (url.match(".css$")) {
    // para los archivos CSS
    contentType = CSS_CONTENT_TYPE;
    stream = fs.createReadStream(`${PUBLIC_FOLDER}${url}`);
  } else if (url.match(".js$")) {
    // para los archivos JavaScript
    contentType = JS_CONTENT_TYPE;
    stream = fs.createReadStream(`${PUBLIC_FOLDER}${url}`);
  } else {
    // si llegamos aquí, es un 404
    statusCode = 404;
  }

  // escribimos las cabeceras de la respuesta dependiendo de la request
  res.writeHead(statusCode, { "Content-Type": contentType });
  // si tenemos un stream, lo enviamos a la respuesta
  if (stream) stream.pipe(res);
  // si no, devolvemos un string diciendo que no hemos encontrado nada
  else return res.end("Not found");
};

const server = http.createServer(requestListener);
server.listen(port, host, () => {
  console.log(`'app funcionando en el puerto 8000 http://${host}:${port}`);
});

La otra opción es utilizar express, lo cual simplifica mucho el trabajo, para esto tu código debería quedar algo así:

//Lo utilizaremos para la ruta del index y el static del public
const path = require("path");
const express = require("express");

//Nuestro server será manejado ahora por express
const app = express();
const host = "localhost";
const port = 8000;

//Definimos la carpeta public como estática, ahora podemos poner en ella lo necesario, css, js, imagenes, etc.
app.use(express.static("public"));

//Definimos ruta utilizando express
app.get("/", function (req, res) {
//Enviamos el index.html al browser.
    res.sendFile(path.join(__dirname + "/index.html"));
});

//Escuchamos server
app.listen(port, host, () => {
  console.log(`'app funcionando en el puerto 8000 http://${host}:${port}`);
});

Aquí también está escrito de forma tal que en el mismo lugar que el "index.html" tengamos una carpeta "public" con el archivo .css adentro.

Y también debemos invocar el archivo css desde el index.html como indico al principio de la respuesta.

Espero te sea de ayuda, cualquier cosa estoy a las ordenes.

Tu Respuesta

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