Cursos Empresas Blog Live Conf Precios

Manejo de archivos estáticos

Clase 11 de 43 • Curso de Express.js 2018

Clase anteriorSiguiente clase

Contenido del curso

Bienvenida e introducción

1
¿Dónde aprender Express.js actualizado?
00:21
2
Lo que aprenderás sobre Express.js
01:51
3
¿Qué es express y para qué sirve?
01:34
4
Creando tu primer servidor
04:56
5
Express application generator
05:24

Template Engines y archivos estáticos

6
Qué es template engine y cómo crearlo
13:38
7
Implementando un template engine
05:42
8
Usando Pug como template engine
07:47
9
Usando Handlebars como template engine
00:27
10
Creando nuestro layout de productos usando Pug
12:20
11
Manejo de archivos estáticos
04:39

Creando un API Restful

12
Anatomía de una API RESTful e implementación CRUD
13:38
13
Implementando nuestra capa de Servicios
16:55
14
Recapitulando el proyecto
13:06
15
Request object
01:32

Conectando Express.js con servicios externos

16
Conexión a Mongodb en Express.js
00:41
17
Conectando nuestros servicios con mongo DB
16:07
18
Implementando acciones CRUD en MongoDB
06:46
19
Configurar una cuenta en Amazon AWS
01:22

Middlewares: En el medio del request

20
Qué es un middleware y qué tipos existen
01:47
21
Manejo de errores usando un middleware
09:36
22
Validación de datos usando un middleware
03:06
23
Implementando Sentry para el manejo de log de errores
01:14
24
Qué es Joi y Boom y cómo configurar Joi
08:06
25
Configurando Boom y nuestra página 404
14:47
26
Middlewares populares
02:34

Autenticación en Express.js

27
JSON Web Tokens
03:44
28
Configuración y uso de Passport.js
16:09
29
Asegurando nuestra API e identificando rutas sensibles
05:57

Testing

30
Creando tests para nuestros endpoints
13:34
31
Creando tests para nuestros servicios
10:56
32
Creando tests para nuestras utilidades
03:02
33
Agregando coverage para ver la calidad de nuestras pruebas
00:35
34
Debugging e inspect
07:13

Deployment

35
Buenas prácticas para el despliegue en producción
03:36
36
npm script
05:01
37
Añadiendo manejo de cache y seguridad con helmet
09:47
38
Cómo usar las variables de entorno para diferente ambientes
01:06
39
Habilitando CORS en producción
01:09
40
Cómo funciona y por qué es importante el uso de HTTPS
01:08
41
Desplegando con Now y detectando vulnerabilidades con npm audit
07:16
42
Automatizar el chequeo de vulnerabilidades con snyk
00:52
43
Conclusiones
01:46

Escuelas

Desarrollo Web
English Academy
Marketing Digital
Inteligencia Artificial y Data Science
Ciberseguridad
Liderazgo y Habilidades Blandas
Diseño de Producto y UX
Contenido Audiovisual
Desarrollo Móvil
- Fundamentos de Desarrollo Móvil
- Desarrollo Nativo Android con Kotlin
- Desarrollo Nativo iOS con Swift
- Desarrollo Multiplataforma con React Native
- Desarrollo Multiplataforma con Flutter
- Arquitectura y Patrones de Diseño Móvil
- Integración de APIs y Persistencia Móvil
- Testing y Despliegue en Móvil
- Diseño UX/UI para Móviles
Diseño Gráfico y Arte Digital
Programación
Negocios
- Fundamentos de Negocios y Emprendimiento
- Estrategia y Crecimiento Empresarial
- Finanzas Personales y Corporativas
- Inversión en Mercados Financieros
- Ventas, CRM y Experiencia del Cliente
- Operaciones, Logística y E-commerce
- Gestión de Proyectos y Metodologías Ágiles
- Aspectos Legales y Cumplimiento
- Habilidades Directivas y Crecimiento Profesional
- Diversidad e Inclusión en el Entorno Laboral
- Herramientas Digitales y Automatización para Negocios
Blockchain y Web3
Recursos Humanos
Finanzas e Inversiones
Startups
Cloud Computing y DevOps

Platzi y comunidad

Platzi Business
Live Classes
Lanzamientos
Executive Program
Trabaja con nosotros
Podcast

Recursos

Manual de Marca

Soporte

Preguntas Frecuentes
Contáctanos

Legal

Términos y Condiciones
Privacidad
Tyc promociones

Reconocimientos

Reconocimientos

Top 40 Mejores EdTech del mundo · 2024

Primera Startup Latina admitida en YC · 2014

Primera Startup EdTech · 2018

CEO Ganador Medalla por la Educación T4 & HP · 2024

CEO Mejor Emprendedor del año · 2024

De LATAM conpara el mundo

Youtube Instagram LinkedIn TikTok Facebook X (Twitter)Threads

Julio J Yépez

student•

Guillermo Rodas

teacher•

Luis Daniel Becerra Avellaneda

student•

Juan Diego Silva Garcia

student•

José Heriberto López Ruiz

student•

Alejandro González Reyes

student•

Alejandro González Reyes

student•

lucas cartisano

student•

Victor Araya Romero

student•

Gerardo Manuel Reyes Fernández

student•

Gerardo Manuel Reyes Fernández

student•

Alejandro González Reyes

student•

Alejandro González Reyes

student•

Erik Elyager

student•

Matias Sebastian Perez

student•

Cristian Camilo Cucunubá

student•

Cristian Camilo Cucunubá

student•

Emmanuel Rodríguez

student•

Gerardo Manuel Reyes Fernández

student•

Alejandro Sanabria

Team Platzi•

Gerardo Manuel Reyes Fernández

student•

Wilson Castro Gil

student•

Carlos Enrique Ramírez Flores

student•

Francisco Javier Suarez Verdugo

student•

Francisco Garcia [C6]

student•

jorge llanque

student•

Si el método para usar middlewares en Express es app.use(), ¿significa entonces que Express también maneja las rutas como si fueran middlewares?

Exactamente! Practicamente todo en Express es un middleware!

Por si no logran descargar la carpeta public del sistema de archivos de Platzi, el repositorio del curso esta en Github y esta ordenado en ramas.

Y para los que odiamos los espacios en blanco en VSCODE y lo tenemos configurado para quitar esos espacios automáticamente al guardar, ponemos:

&nbsp;

Me estaba volviendo loco tratando de poner el espacio, porque nunca funcionaba. Y hasta que usé tu sugerencia me funcionó. ¿Sabes si se trata de alguna configuración del VSCode que se pueda cambiar? Gracias.

Un aporte para la clase

const express = require('express')
// Modulo nativo para trabajar con rutas de directorioss 
const path = require('path')
const app = express()

// Registrar middleware de archivoes estáticos

// Al asociarles una ruta, generamos automáticamente un acceso directo a dicho directorio. De esta forma podemos acceder a este material desde cualquier parte del proyecto sin preocuparnos por la ubicación donde nos econtremons, solo hace falta declarar /static/nombreArchivo.ext
app.use('/static', express.static(path.join(__dirname, 'public')))

// Requerir mis módulos de ruta
const productsRouter = require('./routes/products')

// Establecer el directorio de las vistas
app.set('views', path.join(__dirname, 'views'))
// Asociar al motor de plantillas los archivos con extensión .pug
app.set('view engine', 'pug')

// Registrar un router en express
app.use('/products', productsRouter)

const server = app.listen(3000, function () {
  console.log(`Server Listening in http://localhost:${server.address().port}`)
})

// Exportar mi instancia del servidor. Buenas Prácticas para testing o requerir en otros modulos.
module.exports = server

No cabe duda que los libros que leí acerca de Express para realizar aplicaciones MEAN, me ha servido de mucho. Probaré el siguiente año en buscar algún trabajo que requiera desarrolladores en este tipo de herramientas

Eso de que express es muy inteligente y sabe lo que queremos hacer no me cierra, como funciona app.use? que es? cuales son los parametros obligatorios y opcionales? de que tipo pueden ser? cuales son los valores por defecto? Acá no aclara mucho, solo puedo copiar y pegar, no me explica para que pueda entender y aplicar a mi criterio, deja muchas cosas en el aire el curso

Como puedes leer aquí, en la documentación, verás que un app.use utiliza como parametros obligatorios un path y al menos un callback (que pueden ser funciones middleware, una serie de funciones middlewares o un arreglos de éstos). Esto quiere decir que Express montará una función middleware sobre un path especifico, esto es, la función middleware que agregues, se ejecutará cuando estes navegando y la barra de direcciones indique la base del path que colocaste en el app.use. Por ejemplo, en el caso de esta clase, el profe usa: app.use("/static", express.static(path.join(__dirname, "public"))), lo que le indica a express que cuando le indiques que algo está en /static/... , éste buscará en la carpeta public.

Eso es todo. Cualquier cosa, no dudes en consultar!!

Si estás usando angular

Generar el proyecto con el comando express --no-view nombre-proyecto

Tu carpeta dist requiere ser renombrada a public y sustituir la carpeta public que existe en express por esta

Estas líneas funcionan para no tener que necesitar el hash location strategy

app.use('*', function (res, res){
    res.sendFile(path.resolve('public/index.html'))
    }
);

Este código se coloca al final de tus rutas para que no omita tus rutas de api.

Éste código le dice a express que toda ruta no declarada en tu api la maneje angular

const fs = require('fs')

function markdownEngine(filePath, options, callback) {
  fs.readFile(filePath, function (err, content) {
    if (err) {
      callback(err)
    }
    const rendered = getRenderedContent(content, options)
    return callback(null, rendered)
  })
}

function getRenderedContent(content, options) {
  const keys = getKeysFromOptions(options)
  let contentString = content.toString()
  for (let key of keys) {
    contentString = contentString.replace(new RegExp(`^#{1} ${key}`, 'gi'), `<h1>${options[key]}</h1>`)
    contentString = contentString.replace(new RegExp(`^(#){2} ${key}`, 'gi'), `<h2>${options[key]}</h2>`)
    contentString = contentString.replace(new RegExp(`- ${key}`, 'gi'), `<li>${options[key]}</li>`)
    contentString = contentString.replace(new RegExp(`__${key}__`, 'gi'), `<b>${options[key]}</b>`)
  }
  return contentString
}

function getKeysFromOptions(options) {
  const { settings, _locals, ...objectKeys } = options
  return Object.keys(objectKeys)
}

module.exports = markdownEngine

He intentado hacer el reto, pero es evidente que me hace falta conocimiento en Expresiones Regulares. Tengo una propuesta, haber si me pueden asesorar. Me he quedado en los #, ##, ### no logro escribir la expresion regular para localizarlos y poder reemplazarlos

Te recomiendo regex101 para evaluación de expresiones regulares y por supuesto este curso en Platzi.

Yo hice esta expresión regular que hace match cuando encuentra de uno hasta seis "#" consecutivos. No sé si sea lo que buscas pero te puede servir de base. Vela aquí.

No entiendo para que sirve:

app.use('/static', express.static(path.join(__dirname, "public")))

Lo borré y el proyecto da el mismo resultado

Es un middleware para ayudarte a crear una ruta de acceso inmediato a todos tus archivos estáticos como imágenes o scripts. Así puedes acceder a ellos desde cualquier archivo en tu proyecto sin importar la ubicación en donde estés, simplemente utilizando el prefijo que definas en este caso ** /static/nombre-archivo**

Te recomiendo que revises el llamado a las rutas de las imágenes en el layout y footer porque si no existe el middleware las imagenes no tienen que servir.

Cabe mencionar que existen dos aclaraciones (porque me he encontrado con los casos), sobre la indexación de nuestros directorios. path.join(__dirname, '/app') o path.resolve(__dirname, '/app') join concatena con el argumento previo

path.join('/a', '/b') 
// Outputs '/a/b'

path.join('/foo', 'bar', 'baz/asdf');
// Returns: '/foo/bar/baz/asdf'

resolve resolverá los argumentos como un path absoluto, a partir del directorio actual

path.resolve('/foo/bar', './baz');
// Returns: '/foo/bar/baz'

path.resolve('/foo/bar', '/tmp/file/');
// Returns: '/tmp/file'

path.resolve('wwwroot', 'static_files/png/', '../gif/image.gif');
// If the current working directory is /home/myself/node,
// this returns '/home/myself/node/wwwroot/static_files/gif/image.gif'

Esto sirve también para los archivos de producción que salen de angular o react con webpack o vue?
Para levantarlos dentro de la misma instancia?

Si Gerar, sirve para los archivos de producción que entrega por ejemplo webpack

Genial!! .
Gracias @alesanabriav.

Great, let´s go for the challenge

Excelente clase! Me gustan mucho este tipo de clases practicas y sencillas!

Muchas gracias por la clase instructor Guillermo, me agrado bastante la forma en cómo se emplea Bulma y Pug para lograr estos resultados.

La clase practica es excelente, gracias

Excelente clase! Me gustan mucho este tipo de clases practicas y sencillas!