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