6.3-Servir Bootstrap CSS con express

 Tutorial: 3 formas de usar Bootstrap

Forma 1️⃣ CDN (más fácil, requiere internet)

html

<!-- public/index.html -->

<!DOCTYPE html>

<html>

<head>

    <!-- Solo copias el link de internet -->

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

    <button class="btn btn-primary">Hola</button>

</body>

</html>

javascript

// app.js - ¡Mínimo! Solo sirves tu HTML

const express = require('express');

const app = express();

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

app.listen(3000);

✅ Pros: Simple, no instalas nada
❌ Contras: Necesitas internet sí o sí

Forma 2️⃣ Descargar CDN + static (archivos físicos)

bash

# 1. Descargas Bootstrap manualmente de https://getbootstrap.com

# 2. Descomprimes y copias archivos a tu proyecto

Estructura:

text

mi-proyecto/

├── app.js

├── public/

│   ├── index.html

│   ├── css/

│   │   └── bootstrap.min.css  ← Copiado manualmente

│   └── js/

│       └── bootstrap.min.js   ← Copiado manualmente

javascript

// app.js

const express = require('express');

const app = express();

app.use(express.static('public'));  // ¡Solo esto basta!

app.listen(3000);

html

<!-- public/index.html - Rutas relativas -->

<link href="/css/bootstrap.min.css" rel="stylesheet">

<script src="/js/bootstrap.min.js"></script>

✅ Pros: No requiere npm, funciona sin internet
❌ Contras: Manual, difícil de actualizar, ocupa espacio

Forma 3️⃣ NPM + static (moderno y profesional)

bash

# 1. Instalas con npm

npm install bootstrap


# 2. Instalas express

npm install express

Estructura:

text

mi-proyecto/

├── app.js

├── node_modules/

│   └── bootstrap/

│       └── dist/

│           ├── css/bootstrap.min.css

│           └── js/bootstrap.min.js

└── public/

    └── index.html

javascript

// app.js - Mapeas las rutas

const express = require('express');

const app = express();


// Mapeo: lo que ponga en /css busca en node_modules/...

app.use('/css', express.static('node_modules/bootstrap/dist/css'));

app.use('/js', express.static('node_modules/bootstrap/dist/js'));

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


app.listen(3000);

html

<!-- public/index.html - Usas las rutas mapeadas -->

<link href="/css/bootstrap.min.css" rel="stylesheet">

<script src="/js/bootstrap.min.js"></script>

✅ Pros: Fácil actualizar (npm update), control de versiones, profesional
❌ Contras: Requiere Node.js y npm

📊 Comparativa rápida:

Característica

CDN

Descargar CDN

NPM + static

Instalación

Copiar link

Descargar zip

npm install

Internet necesario

✅ Sí

Solo descarga

Solo descarga

Actualizar versión

Cambiar link

Volver a descargar

npm update

express.static

❌ No

✅ Sí

✅ Sí

Complejidad

Muy baja

Baja

Media

Uso profesional

❌ No

❌ No

✅ Sí

🎯 ¿Cuál elegir?

  • CDN: Para pruebas rápidas, tutoriales, prototipos

  • Descargar CDN: Cuando no puedes usar npm (proyectos muy simples)

  • NPM: Para proyectos reales y profesionales (recomendado)

Las 3 funcionan igual en el navegador 

Comentarios

Publicar un comentario

Entradas más populares de este blog

Cómo Iniciar un Proyecto Node.js

  Cómo Iniciar un Proyecto Node.js desde Cero: Guía Paso a Paso Solución 1: Cambiar la política de ejecución (recomendado) Abre PowerShell  como administrador . Ejecuta este comando para permitir la ejecución de scripts firmados: powershell Copy Download Set-ExecutionPolicy RemoteSigned - Scope CurrentUser Si estás comenzando con Node.js, esta guía te mostrará cómo configurar un proyecto básico con las herramientas esenciales. Paso 1: Inicializar el proyecto bash Copy Download npm init --yes Este comando crea automáticamente un archivo  package.json  con valores predeterminados. El  package.json  es el corazón de tu proyecto Node.js, donde se almacenan: Dependencias del proyecto Scripts personalizados Metadatos del proyecto (nombre, versión, descripción, etc.) Paso 2: Instalar dependencias esenciales Express - El framework web bash Copy Download npm install express Express es el framework web más popular para Node.js. Te permite: Crear rutas (endpoints)...
Leer más

6-Middleware?

Middleware en Node.js con Express: Guía Definitiva      5- EXPRESS            |           V 6-MIDDLEWARE . Middleware Clave Funciones que procesan requests antes de llegar a las rutas. por ejemplo app.use() es un método que monta middlewares (funciones intermedias) que se ejecutan antes de que lleguen a tus rutas. Explicación simple: javascript // SIN app.use() - La petición va directo a la ruta app . get ( '/productos' , ( req , res ) => {   res . send ( 'Productos' ); }); // CON app.use() - La petición pasa PRIMERO por el middleware app . use ( express . json ()); // ← Middleware global app . get ( '/productos' , ( req , res ) => {    // req.body YA fue procesado por express.json()   res . send ( 'Productos' ); }); Analogía para entenderlo: text Petición del cliente        ↓   ...
Leer más

5-Express--Curso de Node.js [ #05 Introducción a Express.js ]

Express: Dominando Servidores Web con Node.js y Express   5- EXPRESS            |           V 6-MIDDLEWARE mi-app/ ├app.js └── package.json 1. Introducción a Express Express es el framework web más popular para Node.js. Simplifica la creación de servidores HTTP con: ✔️ Enrutamiento intuitivo ✔️ Sistema de middleware potente ✔️ Manejo simplificado de requests/responses ✔️ Compatibilidad con múltiples motores de plantillas permiso solo para la sesión actual Ejecuta en PowerShell como Administrador: powershell Set-ExecutionPolicy - Scope Process - ExecutionPolicy Bypass Luego vuelve a ejecutar npm init -y . Este cambio solo dura mientras la ventana de PowerShell esté abierta. bash # Iniciar proyecto npm init -y npm install express 2. Servidor Básico en 4 Pasos Archivo: app.js javascript // 1. Importar Express const express = require ( 'express' ); // 2. Crear aplicación...
Leer más