En el emocionante mundo del desarrollo web, crear un Servidor HTTP Básico en Node.js utilizando Express es un paso crucial para aquellos que buscan construir aplicaciones web robustas y eficientes. Express, un framework minimalista y flexible para Node.js, facilita enormemente la creación de servidores y la gestión de rutas. En este blog post, te guiaré a través del desarrollo paso a paso y la puesta a punto de una aplicación de portafolio básica utilizando Express y Node.js, basándome en el archivo server.js y la estructura de proyecto proporcionados.

Te recomiendo que revises mi blog entero, actualmente tengo más de 150 aplicaciones de libre distribución que te podrían servir, aplicaciones en PHP, Javascript, Python, Node JS, así como tutoriales de que te podrían servir.

Video Explicativo

Introducción a Express y Node.js

Express simplifica el proceso de construcción de aplicaciones web y APIs en Node.js. Al ofrecer un conjunto de herramientas y características que permiten manejar solicitudes HTTP y rutas de manera más intuitiva, Express se convierte en el aliado perfecto para desarrolladores que buscan eficiencia y claridad en sus proyectos.

Configuración Inicial del Proyecto

Antes de sumergirnos en el código, asegurémonos de tener instalado Node.js. Luego, crea un nuevo directorio llamado proyecto-portafolio y navega a él en tu terminal. Ejecuta npm init -y para crear un nuevo archivo package.json, el cual almacenará la configuración y las dependencias de nuestro proyecto.

Instalación de Express

Dentro del directorio de tu proyecto, ejecuta npm install express para añadir Express como una dependencia. Esto creará el directorio node_modules donde se almacenan las bibliotecas necesarias para tu proyecto, incluyendo Express.

Estructura del Proyecto

La estructura de tu proyecto es crucial para mantener un desarrollo organizado. Para este proyecto, tienes un directorio src que contiene tu servidor server.js y un directorio views para tus archivos HTML. Además, el directorio public aloja recursos estáticos como CSS, JavaScript, e imágenes, los cuales son esenciales para dar estilo y funcionalidad a tu portafolio.

Desarrollo del Servidor con Express

El corazón de nuestra aplicación es el archivo server.js. Aquí, importamos Express y configuramos nuestro servidor para servir archivos estáticos y manejar rutas específicas para las páginas de inicio y “acerca de”.

1. Importar Express y Crear la Aplicación: Al inicio de server.js, importamos Express y creamos una instancia de la aplicación:

const express = require('express');
const app = express();

Servir Archivos Estáticos: Usamos express.static para servir nuestros recursos estáticos desde el directorio public. Esto permite que tu aplicación acceda a imágenes, archivos CSS y JavaScript:

app.use(express.static('public'));

Configurar Rutas: Definimos rutas para las páginas de inicio y “acerca de”. Cada ruta utiliza res.sendFile para enviar el archivo HTML correspondiente al cliente:

// Ruta para la página de inicio
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/views/home.html');
});

// Ruta para la página about
app.get('/about', (req, res) => {
    res.sendFile(__dirname + '/views/about.html');
});

Iniciar el Servidor: Finalmente, hacemos que nuestro servidor escuche en el puerto especificado, permitiendo que los usuarios accedan a nuestra aplicación a través de la web:

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Servidor escuchando en el puerto ${PORT}`);
});

Ejecución y Pruebas

Para arrancar tu servidor, ejecuta node src/server.js desde la terminal. Abre tu navegador y visita http://localhost:3000 para ver tu página de inicio, y navega a http://localhost:3000/about para acceder a la página “acerca de”.

Repositorio del sistema de Servidor HTTP en Node.js

Conclusión

Felicidades, has construido con éxito un Servidor HTTP Básico en Node.js utilizando Express. Este servidor no solo maneja solicitudes HTTP y sirve archivos estáticos, sino que también establece las bases para aplicaciones web más complejas y dinámicas. A medida que avanzas, puedes explorar más características de Express, como el uso de middleware avanzado, la creación de APIs RESTful, y la integración con bases de datos para enriquecer tus aplicaciones web.

Para desarrollos a medida me puedes contactar en el siguiente enlace de contacto