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 

app.js (Versión Minimalista - Sin CSS complejo)

javascript
const express = require('express');
const app = express();
const PORT = 3000;

// ============ MIDDLEWARE ============
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// ============ DATOS DE EJEMPLO ============
let productos = [
    { id: 1, nombre: 'Laptop', precio: 1000 },
    { id: 2, nombre: 'Mouse', precio: 25 },
    { id: 3, nombre: 'Teclado', precio: 50 }
];

// ============ RUTA PRINCIPAL ============
app.get('/', (req, res) => {
    // Generar tabla de productos
    let tablaProductos = '<table border="1" cellpadding="8" cellspacing="0" style="width:100%;">';
    tablaProductos += '<tr style="background-color:#f0f0f0;"><th>ID</th><th>Nombre</th><th>Precio</th></tr>';
    
    productos.forEach(producto => {
        tablaProductos += `
            <tr>
                <td>${producto.id}</td>
                <td>${producto.nombre}</td>
                <td>$${producto.precio}</td>
            </tr>
        `;
    });
    
    tablaProductos += '</table>';
    tablaProductos += `<p><strong>Total productos: ${productos.length}</strong></p>`;
    
    // HTML completo sin CSS complejo
    const html = `
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>Mi Tienda</title>
            <style>
                body {
                    font-family: Arial, sans-serif;
                    max-width: 800px;
                    margin: 50px auto;
                    padding: 20px;
                }
                .form-group {
                    margin-bottom: 15px;
                }
                input {
                    width: 100%;
                    padding: 8px;
                    margin-top: 5px;
                }
                button {
                    padding: 8px 15px;
                    background-color: #007bff;
                    color: white;
                    border: none;
                    cursor: pointer;
                }
                button:hover {
                    background-color: #0056b3;
                }
                hr {
                    margin: 20px 0;
                }
            </style>
        </head>
        <body>
            <h1 style="text-align:center;">🛒 Mi Tienda</h1>
            
            <hr>
            
            <h2>📝 Agregar Producto</h2>
            <form action="/crear-producto" method="POST">
                <div class="form-group">
                    <label>Nombre:</label>
                    <input type="text" name="nombre" required>
                </div>
                <div class="form-group">
                    <label>Precio:</label>
                    <input type="number" name="precio" step="0.01" required>
                </div>
                <button type="submit">Agregar</button>
            </form>
            
            <hr>
            
            <h2>📦 Productos</h2>
            ${tablaProductos}
            
            <hr>
            
            <h2>🔌 API</h2>
            <ul>
                <li><a href="/api/productos">GET /api/productos</a> - Ver todos (JSON)</li>
                <li><a href="/api/productos/1">GET /api/productos/1</a> - Ver producto ID 1</li>
            </ul>
            
            <p><strong>Ejemplo POST:</strong> <code>curl -X POST http://localhost:3000/api/productos -H "Content-Type: application/json" -d '{"nombre":"Tablet","precio":300}'</code></p>
        </body>
        </html>
    `;
    
    res.send(html);
});

// ============ RUTAS API ============

// GET - Obtener todos los productos
app.get('/api/productos', (req, res) => {
    res.json({
        success: true,
        cantidad: productos.length,
        productos: productos
    });
});

// GET - Obtener un producto específico
app.get('/api/productos/:id', (req, res) => {
    const id = parseInt(req.params.id);
    const producto = productos.find(p => p.id === id);
    
    if (!producto) {
        return res.status(404).json({ error: 'Producto no encontrado' });
    }
    
    res.json(producto);
});

// POST - Crear nuevo producto (API)
app.post('/api/productos', (req, res) => {
    const { nombre, precio } = req.body;
    
    if (!nombre || !precio) {
        return res.status(400).json({ error: 'Faltan datos' });
    }
    
    const nuevoProducto = {
        id: productos.length + 1,
        nombre: nombre,
        precio: parseFloat(precio)
    };
    
    productos.push(nuevoProducto);
    res.status(201).json(nuevoProducto);
});

// ============ RUTA DEL FORMULARIO ============

// POST - Crear producto desde el formulario
app.post('/crear-producto', (req, res) => {
    const { nombre, precio } = req.body;
    
    if (!nombre || !precio) {
        return res.status(400).send(`
            <h1>Error</h1>
            <p>Faltan datos</p>
            <a href="/">Volver</a>
        `);
    }
    
    const nuevoProducto = {
        id: productos.length + 1,
        nombre: nombre,
        precio: parseFloat(precio)
    };
    
    productos.push(nuevoProducto);
    res.redirect('/');
});

// ============ INICIAR SERVIDOR ============
app.listen(PORT, () => {
    console.log(`✅ Servidor en http://localhost:${PORT}`);
    console.log(`📱 Web: http://localhost:${PORT}`);
    console.log(`🔌 API: http://localhost:${PORT}/api/productos`);
});

Características de esta versión:

✅ Solo CSS básico para centrar y dar estilo mínimo
✅ Todo en un solo archivo - Sin plantillas EJS
✅ Formulario para crear productos
✅ Tabla de productos generada dinámicamente
✅ API REST completa (GET y POST)
✅ Código simple y fácil de entender

Instalación y ejecución:

bash
# 1. Crear carpeta
mkdir mi-tienda-simple
cd mi-tienda-simple

# 2. Crear package.json
npm init -y

# 3. Instalar express
npm install express

# 4. Crear archivo app.js y copiar el código

# 5. Ejecutar
node app.js

Lo que hace la aplicación:

  1. Página principal (/) - Muestra formulario + lista de productos

  2. Agregar producto - Envía POST a /crear-producto

  3. API REST:

    • GET /api/productos - Obtener todos

    • GET /api/productos/:id - Obtener uno

    • POST /api/productos - Crear vía API

Vista previa de la página:

text
🛒 Mi Tienda

📝 Agregar Producto
Nombre: [___________]
Precio: [___________]
[Agregar]

📦 Productos
ID | Nombre  | Precio
1  | Laptop  | $1000
2  | Mouse   | $25
3  | Teclado | $50

Total productos: 3

🔌 API
- GET /api/productos
- GET /api/productos/1

Esta es la versión más simple y funcional que puedes tener. Solo usa Express, HTML básico y un mínimo de CSS para centrar el contenido.

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

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 Comando: bash npm init -y Instalando dependencias. bash npm install express El error principal está en la etiqueta <a> : escribiste hreft en lugar de href . Además, hay un error en el cierre de la etiqueta <style> . Aquí está el código corregido: javascript const express = require ( 'express' ) ; const app = express ( ) ; const port = 3000 ; app . use ( express . urlencoded ( { extended : true } ) ) ; //Arreglo de productos let productos = [ { id : 1 , nombre : 'Coca-cola' , precio : 100 } , { id : 2 , nombre : 'pepsi' , precio : 90 } ] ; app . get ( '/' , ( req , res ) => { let lista = '' ; for ( let i = 0 ; i < productos . length ; i ++ ) { lista += ` ...
Leer más

8-Template Engines

¿Qué es un Motor de Plantillas?   5- EXPRESS            |           V 6- MIDDLEWARE            |           V  7- express.static            |           V 8-Motor de plantilla tu-proyecto/ ├── public/ # Carpeta para archivos estáticos │ ├── css/ │ │ └── styles.css │ ├── js/ │ │ └── script.js │ └── images/ │ └── logo.png ├── index.ejs # Plantilla EJS (en raíz) ├── app.js # Servidor Express └── package.json # Dependencias Un motor de plantillas es una herramienta que permite generar contenido HTML (u otros formatos) de manera dinámica, insertando datos en estructuras predefinidas. Esto facilita: pp . set ( 'view engine' , 'ejs' ) ; app . set ( 'views' , './templates' ) ; res . render ( 'index' ) ; // Buscará /home/usuario/proyecto/index.ejs Parámetros: Primer p...
Leer más