Configurando webpack para producción

Clase 14 de 22 • Curso de Server Side Render con Express

Clase anteriorSiguiente clase

Jaume Parrot Altisent

student•

Hola, no soy capax de cargar las imagenes de fuera de nuestro proyecto,

ni tampoc el stado de redux:

Antes de iba. El probado de hacer un copu&paste, del código del profesor, y nada. Si alguien me pudiera aydar, se lo agraceria un monton. Graciac

Emanuel Catriquil

student•

Hola! Aparentemente es un problema con las dependencias. Me paso lo mismo y reemplace el package.json que había hecho por el que te podes descargar en la seccion de archivos y enlaces. Le das a npm i, después npm run build y después node src/server, si todo anda bien en el puerto 3001 deberías ver la app con imágenes y sin errores

Jaume Parrot Altisent

student•

Correcto, el problema es la version del hemet, ahorra utilizo la misma version del curso, y me funciona

Anibal Moises Garcia Moy

student•

yo utilicé esta configuración del contentSecurityPolicy

else {
  app.use(express.static(`${__dirname}/public`));
  app.use(helmet());
  app.use(
    helmet.contentSecurityPolicy({
      directives: {
        'default-src': ["'self'"],
        'script-src': ["'self'", "'sha256-lKtLIbt/r08geDBLpzup7D3pTCavi4hfYSO45z98900='"],
        'img-src': ["'self'", 'http://dummyimage.com'],
        'style-src-elem': ["'self'", 'https://fonts.googleapis.com'],
        'font-src': ['https://fonts.gstatic.com'],
        'media-src': ['*'],
      },
    }),
  );
  app.use(helmet.permittedCrossDomainPolicies());
  app.disable('x-powered-by');
}```

Cesar Andres Ardila Buitrago

student•

Muchas gracias Anibal, este funciona con la ultima version de helmet.

Victor Baruch Pazaran Jaimes

student•

muchas gracias, igual me funciono, aunque tuve que cambiar la clave sha por la que me aparecia en el error

Julia Suárez

student•

No es mejor mantener un webpack.config.js y un webpack.config.dev.js en vez de llenar el webpack de condicionales?

Matthias Ignacio Clein Espinoza

student•

Antes de empezar este curso terminé el nuevo curso de Webpack, así que también creo que era mejor opción generar dos archivos de webpack.config.

Erick Avila Rojas

student•

Es todo un tema el usar Helmet ya que para el momento en que estoy tomando el curso la versión es 4.2.0 y cambiaron cosas que no funcionan con la manera en que se dicta en la clase. . Después de revisar documentación existen configuraciones extras que hay que hacer para que el middleware no agregue el header por default y bloquee la implementación que se está manejando hasta ahora. Dejo una copia de lo que hice. .

. De esta manera se agregan varias sentencias que permiten que el proyecto funcione como hasta ahora se a programado en la Escuela de JS. Cabe señalar que los hash necesarios para escapar los scripts inline que se maneja en el html y unos que uso en css para la fuente varían de acuerdo a su código. Estos los pueden copiar de los mensajes de error que arroja Chrome o buscar un generador de hash con el algoritmo sha256. . Con esto logré que funcionara en Chrome, Firefox y Opera. En Safari aún no lo logro porque alguno de los middlewares que usa Helmet choca con la configuración SSL del navegador. Si alguien tiene solución a ese problema agradecería nos lo compartiera. .

PD. Intenté poner el código inline para que se pudiera copiar pero las políticas de Platzi borran mi comentario porque dice que tiene enlaces a sitios no seguros…

. PD2. El comentario de arriba se supondría sería un h1, pero creo no funciona el markdown al igual que los saltos de línea.

Fredy Sarmiento

student•

me gusta lo que voy aprendiendo, pero hay mucho por aprender a veces siento que estoy perdido y vuelvo a retomar. la cuestión esta en la voluntad y la disciplina de cada uno, vamos con toda

Rulo Code

student•

Para no tener que estar cambiando el archivo .env podemos ponermos en modo production desde el script

&quot;build&quot;: &quot;ENV=production webpack-cli --config webpack.config.js&quot;,

Luis Lira

student•

En algunos casos habrá a personas que nos les funcionará el script de esta manera, pero pueden hacerlo usando esta librería de npm https://www.npmjs.com/package/cross-env

Alfredo Mauricio Aguirre Catucuago

student•

Para la fecha que estoy tomando el curso, aun hay problemas con la configuración, pero el problema mas grande es el CACHE del navegador. Adicional a eso incluí una línea de código extra y todo fluye bien después de borrar el cache. Código que va luego de usar helmet:

  app.use(
    helmet({
      contentSecurityPolicy: false,
    }),
  );

Andres Caro

student•

Solucione el problema del webpack cambiandolo de verción ya que la veción actual no deja realizar el cambio

 npm i webpack-cli@3.3.10

tambien cambie el build por sugerencia de un compañero

"build": "ENV=production webpack-cli --config webpack.config.js",```

mauricio garcia

student•

Hola a todos. Al aplicar SSR y deshabilitar javascript debería seguir funcionando todo tal cual?

José María Cuevas Ramírez

student•

No, ya que la aplicación depende completamente de JavaScript para funcionar.

John Botero

student•

La idea de SSR es renderizar el html de la página mientras termina la carga del js, no es funcional hasta que termine.

Carlos Alfonso Garcia Rivera

student•

se ve bastante simple el proceso de enviar a produccion, mi pregunta es, ¿al servidor solo tendre que subir lo que esta en la carpeta public?

Laura Camila Pregonero

student•

Configuracion Webpack

Juan Esteban Galvis

student•

Me esta cargando el JS pero no el CSS 🙁 dejo pantallazo por si alguno sabe como solucionarlo:

César Palma

student•

// This disables the contentSecurityPolicy middleware but keeps the rest. app.use( helmet({ contentSecurityPolicy: false, }) );

Irungaray Agustin

student•

Para que el aviso de Node al iniciar el servidor sea aún mas específico puede ser así:

app.listen(port, (err) => {
    if (err) console.log(err)
    else console.log(`Servidor corriendo en modo ${env} en http://localhost:${port}`)
})

Beto Martinez

student•

Se me cargaron dos Apps en el mismo body jajajaja

Luis Carlos Kristen Ospitia

student•

tengo un problema y es que en development me va como una nave, pero me hace el build bien y cuando lo lanzo con Node, no me va, en el source de la pagina tampoco aparece que haya cargado nada, solo un (index)

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Platzi Video&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;```

Elvis Saavedra

student•

A alguien más le falla si intenta cargar la página de un video? al navegar me funciona, si recargo la página me sale erro

TypeError [ERR_INVALID_CALLBACK]: Callback must be a function. Received {
  '$$typeof': Symbol(react.element),
  type: [Function: Redirect] {
    propTypes: {
      push: [Function],
      from: [Function],
      to: [Function: bound checkType]
    }
  },
  key: null,
  ref: null,
  props: { to: '/404' },
  _owner: null,
  _store: {}
}

Nelson Cadenas

student•

Excelente clase!!!! Tengo una inquietud, al momento de hacer la prueba deshabilitando Javascript del navegador y verificar si está funcionando el SSR, la aplicación se me despliega correctamente (obviamente para que la app me tome este cambio actualizo la app desde el navegador con F5). El detalle está cuando presiono los botones de la app, por ejemplo, el botón de play o el botón de agregar el video a mis favoritos. En el primer caso no me reproduce el video, solo una página que dice no encontrado y en blanco sin estilos. En el segundo caso, no me agrega el video a la lista de favoritos. Pregunto, esto es un comportamiento normal de la aplicación cuando se está haciendo el testeo del SSR (app sin un uso de javascript), porque a simple vista solamente me está desplegando la página principal de la app, pero están fallando todas las funcionalidades de la misma. Igualmente pasa con los formularios de login y register, al presionar los botones de enviar ambos formularios hacen refresh y listo, no hace el simulacro de inicio de sesión, solo se recargan en blanco.

Ezequiel

student•

La reproducción de video, login y register no están implementadas en el proyecto, así que es normal que pase eso. Lo de agregar favoritos si debería funcionar. Chequea si hiciste clone de la rama correcta que es la de feature/router-redux

mauricio garcia

student•

tengo el msmo problema, pudiste saber la razon?

Jose Daniel Molina

student•

Estoy trabajando a la par del curso con otro proyecto para aplicarle SSR... Hice el HotModuleReplacement con exito, y también estoy renderizando la app desde el server. El problema es el siguiente, mi app no maneja Redux sino que funciona con una API. Al momento de deshabilitar el javascript para probar el SSR se queda en el loader y no me muestra nada más. Yo lo atribuyo a que hay una llamada API y de ahí depende que se muestren items... Dejo imagenes para que se den una idea. Muchas gracias por cualquier ayuda :D

Esta es la app normal, cada imagen se obtiene de la API.

Y esta es la app cuando deshabilito javascript

Luis Lira

student•

Para eso lo que podrías hacer es que todo el llamado de la API lo hagas desde el server también, para esto puedes usar axios, y con la información que la API te regrese es con lo que crearás el template que se enviará al cliente desde el servidor.

Jose Daniel Molina

student•

Entonces, al parecer estoy en lo correcto? es por la llamada a la API...

Tomaré en cuenta tu consejo, muchas gracias :D

Eduardo Garcia Garcia

student•

Alguien sabes como configurar los CORS en el Server?? Quiero mandar a llamar una pagina dentro de un iframe y me marca errores de CORS, ¿existe alguna configuración dentro del Server que me recomienden para evitar este bloqueo?

MARTIN RAMIREZ RAMIREZ

student•

no encuentro como validar que nuestra aplicacion mande error de lado del servidor al momento de llamar a window?

else {
  app.use(express.static(`${__dirname}/public`));
  app.use(helmet());
  app.use(
    helmet.contentSecurityPolicy({
      directives: {
        'default-src': ["'self'"],
        'script-src': ["'self'", "'sha256-lKtLIbt/r08geDBLpzup7D3pTCavi4hfYSO45z98900='"],
        'img-src': ["'self'", 'http://dummyimage.com'],
        'style-src-elem': ["'self'", 'https://fonts.googleapis.com'],
        'font-src': ['https://fonts.gstatic.com'],
        'media-src': ['*'],
      },
    }),
  );
  app.use(helmet.permittedCrossDomainPolicies());
  app.disable('x-powered-by');
}```

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Platzi Video&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;```

TypeError [ERR_INVALID_CALLBACK]: Callback must be a function. Received {
  '$$typeof': Symbol(react.element),
  type: [Function: Redirect] {
    propTypes: {
      push: [Function],
      from: [Function],
      to: [Function: bound checkType]
    }
  },
  key: null,
  ref: null,
  props: { to: '/404' },
  _owner: null,
  _store: {}
}

Configurando webpack para producción

Conocimientos necesarios para aplicar SSR

Lo que aprenderás sobre server side render

Presentación del proyecto del curso y sus herramientas

¿Qué es Server Side Rendering?

Preparando entorno para aplicar SSR

Actualizando dependencias en NPM

Creación del servidor en Express

Usando Nodemon y Dotenv

Integración de Webpack con Express

Integración de Express con React

Servir React con Express

Abstrayendo React Router, creando history y haciendo initialState más accesible

Aplicar Server Side Rendering

Definición de la función principal para realizar el renderizado desde el servidor

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 webpack para producción

Optimización del Build

Aplicar hashes al nombre de nuestros builds

Buenas prácticas de Server Side Render

Vendorfiles en Webpack: definiendo cacheGroups

Vendorfiles en Webpack: generando el vendorfile

Configuración de ESLint

Alternativas al SSR con Express

Cómo implementar Next.js

Cómo usar Gatsby.js

Cuando usar cada una de las herramientas presentadas