CursosEmpresasBlogLiveConfPrecios

Integración de Webpack con Express

Clase 9 de 22 • Curso de Server Side Render con Express 2019

Contenido del curso

Primeros pasos

  • 1
    ¡Vamos a renovar este curso!

    ¡Vamos a renovar este curso!

    00:42 min
  • 2
    Introducción y presentación del curso

    Introducción y presentación del curso

    01:16 min
  • 3
    ¿Qué es Server Side Rendering?

    ¿Qué es Server Side Rendering?

    05:58 min
  • 4
    Babel, Express y React

    Babel, Express y React

    02:58 min
  • 5
    Creación del proyecto base

    Creación del proyecto base

    11:15 min
  • 6
    Configuración de ESLint con Webpack

    Configuración de ESLint con Webpack

    06:22 min
  • 7
    Preparación de Webpack, Babel, PostCSS y Assets

    Preparación de Webpack, Babel, PostCSS y Assets

    05:06 min
  • 8
    Usando Plugins y vendor file en Webpack

    Usando Plugins y vendor file en Webpack

    09:15 min
  • 9
    Integración de Webpack con Express

    Integración de Webpack con Express

    Viendo ahora

Integración de Express con React

  • 10
    Servir React con Express

    Servir React con Express

    07:05 min
  • 11
    Agregando variables de sass desde webpack

    Agregando variables de sass desde webpack

    05:04 min
  • 12
    Aplicando history y creando rutas para el servidor

    Aplicando history y creando rutas para el servidor

    08:26 min
  • 13
    Haciendo initialState accesible y configurando Redux DevTools

    Haciendo initialState accesible y configurando Redux DevTools

    07:19 min

Aplicar Server Side Rendering

  • 14
    Definiendo la función main para renderizado desde el servidor

    Definiendo la función main para renderizado desde el servidor

    10:16 min
  • 15
    Aplicando la función main para renderizado desde el servidor y creación del string de HTML

    Aplicando la función main para renderizado desde el servidor y creación del string de HTML

    06:20 min
  • 16
    Assets require hook

    Assets require hook

    03:00 min
  • 17
    Hydrate y estado de Redux desde Express

    Hydrate y estado de Redux desde Express

    07:45 min

Trabaja con entornos de desarrollo y producción

  • 18
    Configurando nuestro servidor para producción

    Configurando nuestro servidor para producción

    04:18 min
  • 19
    Configurando el frontend y webpack para producción

    Configurando el frontend y webpack para producción

    08:19 min
  • 20
    Compresión de Assets

    Compresión de Assets

    07:28 min
  • 21
    Hashes

    Hashes

    14:42 min
  • 22
    Cierre del Curso

    Cierre del Curso

    01:29 min
Tomar examen

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • 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
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • 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
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

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
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads

      Comentarios

      ENRIQUE NIETO MARTINEZ

      ENRIQUE NIETO MARTINEZ

      student•
      hace 6 años
      Javier Fuentes Mora

      Javier Fuentes Mora

      teacher•
      hace 6 años
        Jorge Humberto Nemogá Pinzón

        Jorge Humberto Nemogá Pinzón

        student•
        hace 6 años
      Omar Flores Grimontt

      Omar Flores Grimontt

      student•
      hace 6 años
      Juan Carlos García Esquivel

      Juan Carlos García Esquivel

      student•
      hace 6 años
      OQO Digital

      OQO Digital

      student•
      hace 6 años
        Jorge Humberto Nemogá Pinzón

        Jorge Humberto Nemogá Pinzón

        student•
        hace 6 años
        Diego Alejandro Zacarias

        Diego Alejandro Zacarias

        student•
        hace 6 años
      Antonio Luis Gil Rodríguez

      Antonio Luis Gil Rodríguez

      student•
      hace 6 años
      rusbel bermúdez rivera

      rusbel bermúdez rivera

      student•
      hace 6 años
      Cristian Fabian Tovar

      Cristian Fabian Tovar

      student•
      hace 6 años
        Daniel Esteves

        Daniel Esteves

        student•
        hace 6 años
        Cristian Fabian Tovar

        Cristian Fabian Tovar

        student•
        hace 6 años
      Enrique Devars

      Enrique Devars

      teacher•
      hace 6 años
        Juan Castro

        Juan Castro

        teacher•
        hace 6 años
      Luis Lira

      Luis Lira

      student•
      hace 6 años
        Wilson Marino Pablo Mendez

        Wilson Marino Pablo Mendez

        student•
        hace 6 años
      Edwin García

      Edwin García

      student•
      hace 6 años
      Joaquin Mayer

      Joaquin Mayer

      student•
      hace 6 años
      JUAN SILVA

      JUAN SILVA

      student•
      hace 6 años

      Es el curso más frustrante de la escuela JS.

      Muy mala explicación es mas ni si quiera hubo explicación , ademas es frustrante que tenga tantos typos y no solo eso sino que los corrija hasta el siguiente video muchas veces te quedas en le otro video atorado y el no lo corrige hasta el siguiente video

      Es una demostración de la vida real. Como profesionales que deseamos ser o ya lo seamos, debemos estar atentos a ver un poco más adelante - sea viendo el siguiente video o proactivos con la documentación. Si nunca vemos como un profesional soluciona un typo difícilmente sabremos hacerlo en solitario.

      No tengo palabras para describir esta clase, así que usaré un meme.

      irZAnzzL_400x400.jpg

      La línea 19 quedaria asi

      contentBase: `http://localhost:${PORT}`

      Solo faltaron dos puntos después de localhost

      No me funcionaba porque no tenía instalado el webpack-hot-middleware npm install --save-dev webpack-hot-middleware

      Correcto. En el minuto 3.47 @sampol.90 indica que el paquete se intala previamente. Que nunca mostrará la instalación no significa que no paso. Igual así como hiciste está bien, ya debemos estar acostumbrados a instalar paquetes sin necesidad de tener que estar viendo el proceso de como instalar.

      en el minuto 3:47 habla del webpack-dev-middleware y en el minuto 4:18 habla sobre el webpack-hot-middleware "lo vamos a ignorar por ahora"

      Gracias @oqodigital, aunque eslint me dio un warning por instalar la dependencia como dev, no me quedo muy claro si deberia o no ser una dependencia de desarrollo

      Minuto 2:20 den pausa y modifiquen el package.json a

      "start:dev": "NODE_ENV=development nodemon src/server/index.js --exact babel-node "

      uuyy que paso aquí??

      ¡Hola Cristian! ¿Te ocurrió algún problema en el que podamos ayudarte?

      Si, mira básicamente el problema es en los próximos 4 videos (hasta Aplicando history y creando rutas para el servidor) la consola finaliza en failed, lo que sugiere que ignoremos todos los typos, hasta no llegar hasta esa clase, esto me resultó muy complicado, ya que tuve typos adicionales y no los pude detectar a tiempo, ya que todos los videos ignoré el resultado en consola. Mi inconformidad está en que al final significó más tiempo entre repetir los videos y releer código. Pero de resto todo bien ya resolví mi inquietud, Gracias :)

      ¿Cómo podría usar el HMR del lado del cliente?

      Estos recursos te pueden ayudar:

      • https://webpack.js.org/guides/hot-module-replacement/
      • https://thoughtbot.com/blog/setting-up-webpack-for-react-and-hot-module-replacement
      • https://www.nativescript.org/blog/deep-dive-into-hot-module-replacement-with-webpack-part-two-handling-updates
      • https://blog.carbonteq.com/webpack-with-hot-module-replacement/

      No sé si esto es comparable con lo que hace Next.js, pero no recuerdo que con Next necesitara taaanta configuración manual jaja igual está buena para aprender más cosas

      Exacto. Next.js no necesitaba tantas configuracions, plugins, etc.

      Les recomiendo que lean muy bien en la terminal lo errores que les dan. Duré un rato esperando a que el profe solucionara sus typos pensando que era culpa de él y que mi código estaba igual cuando me descaché yo en una mayúscula y en la terminal me decía que fileName no era una propiedad conocida, que tal vez habría querido decir filename. Todo el tiempo estuvo la solución ahí.

      ¿Puede ser que este trabajando con el proyecto sin Redux? Porque me esta dando este error

      <code> Uncaught Error: Expected the reducer to be a function. at a (<anonymous>:1:33683) at <anonymous>:1:33761 at <anonymous>:1:26192 at v (vendor.js:1) at l (vendor.js:1) at concat.reduceRight.r.instanceId (<anonymous>:1:28778) at Array.reduceRight (<anonymous>) at <anonymous>:1:28745 at l (vendor.js:1) at Module.<anonymous> (vendor.js:50)

      Y me fije en los archivos y no tiene la parte de Redux

      Aunque eslint dice que los paqueted de dev y Hot hay que instalarlos en la dependencia global y no de desarrollo, las librerias originales dicen que hay que instalar en devDependencies