El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Sirviendo Archivos Estáticos

Siguiente ►
►

En esta lección, aprenderemos cómo servir archivos estáticos (como HTML, CSS, JavaScript, imágenes, etc.) utilizando Node.js. Los archivos estáticos son aquellos que no cambian en el servidor y se envían tal cual al cliente.

Conceptos Clave

  1. Archivos Estáticos: Archivos que no cambian en el servidor y se envían directamente al cliente.
  2. Servidor HTTP: Un servidor que maneja solicitudes HTTP y envía respuestas HTTP.
  3. Módulo fs: Módulo de Node.js para interactuar con el sistema de archivos.
  4. Módulo path: Módulo de Node.js para trabajar con rutas de archivos y directorios.

Paso a Paso para Servir Archivos Estáticos

  1. Configuración del Proyecto

Primero, crea un nuevo directorio para tu proyecto y navega a él:

mkdir static-files-server
cd static-files-server

Inicializa un nuevo proyecto de Node.js:

npm init -y

  1. Instalación de Dependencias

Para este ejemplo, no necesitamos instalar ninguna dependencia adicional. Usaremos los módulos http, fs y path que vienen integrados con Node.js.

  1. Estructura del Proyecto

Crea la siguiente estructura de directorios y archivos:

static-files-server/
│
├── public/
│   ├── index.html
│   ├── style.css
│   └── script.js
│
└── server.js

  1. Creación de Archivos Estáticos

Crea un archivo index.html en el directorio public:

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Static Files Server</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Welcome to the Static Files Server</h1>
    <script src="script.js"></script>
</body>
</html>

Crea un archivo style.css en el directorio public:

/* public/style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    text-align: center;
    padding: 50px;
}

Crea un archivo script.js en el directorio public:

// public/script.js
console.log('Hello from script.js');

  1. Creación del Servidor HTTP

Crea un archivo server.js en el directorio raíz del proyecto:

// server.js
const http = require('http');
const fs = require('fs');
const path = require('path');

const server = http.createServer((req, res) => {
    // Construir la ruta del archivo
    let filePath = path.join(__dirname, 'public', req.url === '/' ? 'index.html' : req.url);

    // Extensión del archivo
    let extname = path.extname(filePath);

    // Tipo de contenido por defecto
    let contentType = 'text/html';

    // Verificar la extensión del archivo y establecer el tipo de contenido
    switch (extname) {
        case '.js':
            contentType = 'text/javascript';
            break;
        case '.css':
            contentType = 'text/css';
            break;
        case '.json':
            contentType = 'application/json';
            break;
        case '.png':
            contentType = 'image/png';
            break;
        case '.jpg':
            contentType = 'image/jpg';
            break;
        case '.wav':
            contentType = 'audio/wav';
            break;
    }

    // Leer el archivo
    fs.readFile(filePath, (error, content) => {
        if (error) {
            if (error.code == 'ENOENT') {
                // Página no encontrada
                fs.readFile(path.join(__dirname, 'public', '404.html'), (error, content) => {
                    res.writeHead(404, { 'Content-Type': 'text/html' });
                    res.end(content, 'utf-8');
                });
            } else {
                // Algún error del servidor
                res.writeHead(500);
                res.end(`Server Error: ${error.code}`);
            }
        } else {
            // Éxito
            res.writeHead(200, { 'Content-Type': contentType });
            res.end(content, 'utf-8');
        }
    });
});

const PORT = process.env.PORT || 5000;
server.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

  1. Ejecutar el Servidor

Para ejecutar el servidor, usa el siguiente comando:

node server.js

Abre tu navegador y navega a http://localhost:5000. Deberías ver la página HTML que creaste.

Ejercicio Práctico

Ejercicio 1: Servir una Imagen

  1. Añade una imagen al directorio public.
  2. Modifica el archivo index.html para incluir la imagen.
  3. Asegúrate de que la imagen se sirva correctamente cuando accedas a la página en el navegador.

Solución

  1. Añade una imagen llamada image.jpg al directorio public.
  2. Modifica el archivo index.html:
<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Static Files Server</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Welcome to the Static Files Server</h1>
    <img src="image.jpg" alt="Sample Image">
    <script src="script.js"></script>
</body>
</html>
  1. Reinicia el servidor y navega a http://localhost:5000. Deberías ver la imagen en la página.

Conclusión

En esta lección, aprendiste cómo servir archivos estáticos utilizando Node.js. Ahora puedes servir HTML, CSS, JavaScript y otros tipos de archivos desde tu servidor Node.js. En la próxima lección, aprenderemos sobre enrutamiento en Node.js para manejar diferentes rutas y solicitudes de manera más eficiente.

◄ Anterior
◄
Siguiente ►
►

Curso de Node.js

Módulo 1: Introducción a Node.js

Módulo 2: Conceptos Básicos

Módulo 3: Sistema de Archivos y E/S

Módulo 4: HTTP y Servidores Web

Módulo 5: NPM y Gestión de Paquetes

Módulo 6: Framework Express.js

Módulo 7: Bases de Datos y ORMs

Módulo 8: Autenticación y Autorización

Módulo 9: Pruebas y Depuración

Módulo 10: Temas Avanzados

Módulo 11: Despliegue y DevOps

Módulo 12: Proyectos del Mundo Real

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados