Skip to main content
4 de 4
se añadieron 14 caracteres en el cuerpo
Dev 200
  • 5.5k
  • 7
  • 47
  • 91

Para servir de CSS y JavaScript a un archivo HTML debes de seguir estos tres pasos:

1 - Crear el documento HTML

<html>
    <head>
        <meta></meta>
        <title></title>
    </head>
    <body>
    </body>
</html>

2 - Incluir tus archivos CSS y JavaScript

 <html>
        <head>
            <meta></meta>
            <title></title>
        </head>
        <link rel="stylesheet" type="text/css" href="css.css">
        <body>
        </body>
        <script src="javascript.js"></script>
</html>

3 - Configura tu Script de nodejs

crearServer.js:

// Incluimos los módulos necesarios

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

// Hacemos nuestra peticion HTTP
http.createServer((request, response)=> {

// Creamos la variable que guardara la url de la petición HTTP
    let filePath = request.url;

// Por defecto sera / , debemos agregarle nuestro index.html, solo en la 
// primera petición

    if (filePath == '/') {
        filePath = '/index.html';
    }

// Seguido añadiremos la ruta de donde esta nuestro archivo y por ende 
// nuestra carpeta de la pagina web.
// Para cada petición arrojara:
//  =>  C:/usuario/carpeta/paginaWeb\index.html
//  =>  C:/usuario/carpeta/paginaWeb\css.css
//  =>  C:/usuario/carpeta/paginaWeb\javascript.js

    filePath = __dirname+filePath;

// Obtenemos la extensión del los archivos
    let fileExtension = path.extname(filePath);

// Declaramos la extensión por defecto
    let contentType = 'text/html';

// Filtramose el tipo de contenido
    switch (fileExtension) {
        case ".css":
            contentType = "text/css";
        break;
        case ".js":
            contentType = "text/javascript";
        break;
        case ".html":
            contentType = "text/html";
        default:
            contentType = "text/html";
    }

// Hacemos la lectura del archivo

   fs.readFile(filePath,{encoding:"UTF-8"}, (error,content)=>{
       if(!error) {

// Escribimos la cabecera y pasamos el tipo de contenido

           response.writeHead(200, {"Content-Type": contentType});
           response.write(content);
           response.end();
       } else {

 // Si hay error lo mostramos

           response.writeHead(404, {"Content-Type": "text/html"});
           response.write("error file");
           response.end();
       }
       })

// Configuramos la escucha de las peticiones a un puerto determinado

   }).listen(port);

4 - Versión modular

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

let crearServidor = (puerto) => {
    http.createServer((request, response)=> {
        let filePath = request.url;
        if (filePath == '/') {
          filePath = '/index.html';
        }
        filePath = __dirname+filePath;
        fileExtension= path.extname(filePath);
        switch (fileExtension) {
            case ".css":
                contentType = "text/css";
            break;
            case ".js":
                contentType = "text/javascript";
            break;
            case ".html":
                contentType = "text/html";
            default:
                contentType = "text/html";
        }
        fs.readFile(filePath,{encoding:"UTF-8"}, (error,content)=>{
            if(!error) {
                response.writeHead(200, {"Content-Type": contentType});
                response.write(content);
                response.end();
            } else {
            response.writeHead(404, {"Content-Type": "text/html"});
            response.write("error file");
            response.end();
            }
        })
    }).listen(puerto);
};

crearServidor(8888);

4 - Pon el servidor en marcha desde la consola de nodejs

C:\ruta\dela\web\>node crearServidor.js

5 - Visita en tu navegador el servidor

localhost:8888

6 - Servidor en Marcha

Dev 200
  • 5.5k
  • 7
  • 47
  • 91