3-Web de Lista de Libros- Estáticos (public)

Cómo Usar la Carpeta Public en Node.js para Archivos Estáticos

Cuando desarrollas aplicaciones web con Node.js y Express, es común necesitar servir archivos estáticos como CSS, JavaScript e imágenes. La carpeta public es el lugar ideal para almacenar estos recursos. En este post, te mostraré cómo configurarla correctamente.

Paso 1: Crear la Estructura de Carpetas

Primero, organiza tus archivos estáticos en una carpeta llamada public con subcarpetas para cada tipo de recurso:

text
Copy
Download
mi-app/
├── node_modules/
├── public/         ← Carpeta para archivos estáticos
│   ├── css/        ← Estilos CSS
│   ├── js/         ← Scripts JavaScript
│   └── images/     ← Imágenes
├── views/
│   └── index.ejs   ← Plantillas EJS
├── app.js          ← Archivo principal
├── package.json
└── .gitignore

 Inicializar el proyecto

bash

npm init --yes

npm init -y

Express - El framework web

bash

npm install express

Morgan - Logger para desarrollo

bash

npm install morgan

npm install nodemon

Motor de plantillas

bash

npm install ejs



npm install


npm start


Métodos para Iniciar el Proyecto

a) npm run dev (Recomendado para desarrollo)

bash

npm run dev

  • Cómo funciona: Ejecuta el script "dev" definido en tu package.json

  • Requisito: Debes tener Nodemon instalado y configurado en package.json:

  • json

"scripts": {

  "dev": "nodemon app.js"

  • }

c) npm start (Para producción)

bash

npm start

  • Configuración típica:

  • json

"scripts": {

  "start": "node app.js"

}



Paso 2: Configurar Express para Servir Archivos Estáticos

En tu archivo app.js, usa el middleware express.static para indicarle a Express que sirva los archivos de la carpeta public:

javascript
Copy
Download
const express = require('express');
const path = require('path');

const app = express();

// Middleware para archivos estáticos
app.use(express.static(path.join(__dirname, 'public')));


// Configuración de EJS
app.set('views', path.join(__dirname, 'views')); // Define la carpeta de vistas
app.set('view engine', 'ejs'); // Establece EJS como motor de plantillas

// Ruta principal que renderiza index.ejs
app.get('/', (req, res) => {
  res.render('index', { titulo: 'Mi App Web' }); // Pasa datos a la vista
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Servidor en http://localhost:${PORT}`);
});

Con esto, Express automáticamente servirá cualquier archivo dentro de public bajo la ruta raíz (/).

Paso 3: Enlazar Archivos Estáticos en tus Vistas

Ahora puedes enlazar tus archivos CSS, JS e imágenes directamente en tus plantillas (como index.ejs):

html
Copy
Download
Run
<!DOCTYPE html>
<html>
<head>
    <title><%= titulo %></title>
    <link rel="stylesheet" href="/css/styles.css">  <!-- Archivo CSS -->
</head>
<body>
    <h1>Bienvenido a <%= titulo %></h1>
    <p>Ahora con archivos estáticos</p>
    <script src="/js/app.js"></script>  <!-- Archivo JS -->
</body>
</html>

Notas Importantes:

  • Rutas: Al usar express.static, los archivos en public/css/styles.css se acceden via /css/styles.css.

  • Orden de middlewares: Siempre coloca express.static antes de las rutas dinámicas para evitar conflictos.

  • Optimización: Para producción, considera usar un CDN o middleware de compresión para archivos estáticos.

¡Y eso es todo! Con esta configuración, tu aplicación Node.js podrá servir archivos estáticos de manera eficiente.

¿Tienes dudas o sugerencias? ¡Déjalas en los comentarios!


git remoto agregar origen https://github.com/SaulSoteloSuastegui/node-libros.git git rama -M principal 

git push -u origen principal

3. Verificar el origin actual

Para confirmar qué URL está asociada a origin, ejecuta:

bash

git remote -v

1. Resetear todos los archivos añadidos con git add:

bash

git reset


Comentarios

Publicar un comentario

Entradas más populares de este blog

9-Nuestra Primera Plantilla con EJS

Imagen
  Creando Nuestra Primera Plantilla con EJS y Express   5- EXPRESS            |           V 6- MIDDLEWARE            |           V 7- express.static            |           V 8- Motor de plantilla            |           V      9-Plantilla mi-app/ ├── public/ # Archivos estáticos (opcional) │ ├── css/ │ │ └── style.css │ ├── js/ │ │ └── app.js │ └── images/ │ └── logo.png ├── views/ # Carpeta para las plantillas EJS (obligatoria) │ ├── index.ejs # Vista principal │ └── partials/ # Fragmentos reutilizables (opcional) │ ├── header.ejs │ └── footer.ejs ├── app.js # Archivo principal de la aplicación └── package.json # Configuración del proyecto En este post, aprenderemos...
Leer más

6-Middleware?

Imagen
  Middleware en Node.js con Express: Guía Definitiva      5- EXPRESS            |           V 6-MIDDLEWARE ¿Qué es un Middleware? mi-app/ ├ app.js └── package.json El middleware son  funciones intermedias  que procesan las solicitudes ( req ) y respuestas ( res ) en tu aplicación Express. Actúan como "puentes" entre la recepción de una petición y el envío de la respuesta final. 🔧 Tipos de Middleware 1.  Middleware de Aplicación Se ejecutan en  todas las rutas : javascript Copy Download app . use ( ( req , res , next ) => { console . log ( 'Middleware global' ) ; next ( ) ; // ¡No olvides next()! } ) ; 2.  Middleware de Ruta Específicos para ciertas rutas: javascript Copy Download app . get ( '/ruta' , ( req , res , next ) => { console . log ( 'Middleware solo para /ruta' ) ; next ( ) ; } ) ; 3.  Middleware de Terceros Paquetes externos como  body-...
Leer más

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