0

Estoy creando un servidor en node.js, con los siguientes elementos:

Carpeta
    index.html
    js.js
    css.css

HTML:

<html>
<head></head>
<link rel="stylesheet" type="text/css" href="css.css">
<body>
<h1> Mi  Primer  Web  Node </h1>
</body>
<script src="javascript.js"></script>
</html>

JS:

alert("Soy javascript");

CSS:

body {
    background-color: blue;
}

h1 {
    color:red;
}

Usando el siguiente codigo:

createServer.js:

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

http.createServer((request, response)=> {

           let filePath = request.url;
    if (filePath == '/') {
        filePath = __dirname+'/index.html';
    }
    fileExtension= path.extname(filePath);

        fs.readFile(filePath,{encoding:"UTF-8"}, (error,content)=>{
            fileType = path.extname(filePath);
            if(!error) {
                switch (fileType) {
                    case ".css":
                        response.writeHead(200, {"Content-Type": "text/css"});
                        response.write(content);
                    break;
                    case ".js":
                        response.writeHead(200, {"Content-Type": "text/javascript"});
                        response.write(content);
                    break;
                    default:
                        response.writeHead(200, {"Content-Type": "text/html"});
                        response.write(content);
                }
                response.end();
            } else {
                response.writeHead(404, {"Content-Type": "text/html"});
                response.write("error file");
                response.end(error);
            }
        })
    }).listen(3999);

Quisiera que se cargara el HTML y a la vez el código JavaScript y la hoja de estilo CSS que tiene incluidas (servir).

Cuando pongo en marcha el servidor aparece bien el index.html, pero los archivos JavaScript y CSS cuando lo reviso por consola, tienen en su código fuente el mismo código que el archivo index.html.

¿Como puedo cargar a cada archivo su respectivo contenido?, es decir: ¿Como puedo poner en marcha el servidor y servile CSS y JavaScript?

2 respuestas 2

2

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

1

O puedes usar express que hace todo esto por ti ;-)

const express = require("express");
const path = require("path");

const app = express();
app.use(express.static(path.join(__dirname, "client")));
app.set("port", (process.env.PORT || 8080));
app.listen(app.get("port"));

Y aqui tienes todos tus ficheros html, js y css en la carpeta client

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.