Integración de Webpack con Express

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

Clase anteriorSiguiente clase

ENRIQUE NIETO MARTINEZ

student•

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

Javier Fuentes Mora

teacher•

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

Jorge Humberto Nemogá Pinzón

student•

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.

Omar Flores Grimontt

student•

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

Juan Carlos García Esquivel

student•

La línea 19 quedaria asi

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

Solo faltaron dos puntos después de localhost

OQO Digital

student•

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

Jorge Humberto Nemogá Pinzón

student•

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.

Diego Alejandro Zacarias

student•

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

Antonio Luis Gil Rodríguez

student•

rusbel bermúdez rivera

student•

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

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

Cristian Fabian Tovar

student•

uuyy que paso aquí??

Daniel Esteves

student•

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

Cristian Fabian Tovar

student•

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 :)

Enrique Devars

teacher•

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

Juan Castro

teacher•

Estos recursos te pueden ayudar:

Luis Lira

student•

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

Wilson Marino Pablo Mendez

student•

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

Edwin García

student•

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í.

Joaquin Mayer

student•

¿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

JUAN SILVA

student•

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

<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)

Integración de Webpack con Express

Primeros pasos

¡Vamos a renovar este curso!

Introducción y presentación del curso

¿Qué es Server Side Rendering?

Babel, Express y React

Creación del proyecto base

Configuración de ESLint con Webpack

Preparación de Webpack, Babel, PostCSS y Assets

Usando Plugins y vendor file en Webpack

Integración de Webpack con Express

Integración de Express con React

Servir React con Express

Agregando variables de sass desde webpack

Aplicando history y creando rutas para el servidor

Haciendo initialState accesible y configurando Redux DevTools

Aplicar Server Side Rendering

Definiendo la función main para renderizado desde el servidor

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

Assets require hook

Hydrate y estado de Redux desde Express

Trabaja con entornos de desarrollo y producción

Configurando nuestro servidor para producción

Configurando el frontend y webpack para producción

Compresión de Assets

Hashes

Cierre del Curso