Aplicar hashes al nombre de nuestros builds

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

Jhon Esteban Herrera

student•

const { WebpackManifestPlugin } = require('webpack-manifest-plugin');

plugins: [
    isDev ? () => {} : new WebpackManifestPlugin(),
  ],

Cristofher Jumbo Jimenez

student•

Muy bueno bro, el que pone el profesor ya no sirve para construir

john fredy quimbaya orozco

student•

Muchas gracias, me sirvió mucho

Maria Elizabeth Minero Alvarenga

student•

El principal beneficio de aplicar hashes es que el nombre cambia cada vez que desplegamos con cambios hechos, entonces nuestros usuarios siempre van a tener la ultima versión que lancemos por qué el navegador va a considerarlos archivos distintos y no van a tener caché.

Cesar Andres Ardila Buitrago

student•

Para los que tengan problemas con la versión 3.0.0 el plugin no tiene default export entonces debemos importarlo asi:

const { WebpackManifestPlugin } = require('webpack-manifest-plugin');

Heber Emmanuel Estrada Lujan

student•

es correcto, con importarlo ya no sale el error de que ManifestPlugin no es un constructor. gracias

Gerson Montenegro

student•

Al intentar hacer el build se me formó un lío. Estoy usando últimas versiones de todo, excepto de webpack-manifest-plugin, pues sigue siendo la misma del curso. Se presenta el siguiente error:

TypeError: Cannot read property 'length' of undefined
    at /Users/XXXXXXX/PlatziVideo-feature-router-redux/node_modules/webpack-manifest-plugin/lib/plugin.js:128:39

En ese punto ocurre la siguiente validación:

var isEntryAsset = asset.chunks.length > 0;

Resulta que el objeto asset ya no tiene (sabrá Mandrake por qué) la propiedad chunks. Ahora es así:

{
  type: 'asset',
  name: 'assets/app-7dd9eca0e982cb818b05.js',
  size: 200404,
  chunkNames: [ 'main' ],
  chunkIdHints: [],
  auxiliaryChunkNames: [],
  auxiliaryChunkIdHints: [],
  emitted: false,
  comparedForEmit: false,
  cached: true,
  info: {
    immutable: true,
    fullhash: '7dd9eca0e982cb818b05',
    javascriptModule: false,
    minimized: true,
    related: {
      license: 'assets/app-7dd9eca0e982cb818b05.js.LICENSE.txt',
      gziped: 'assets/app-7dd9eca0e982cb818b05.js.gz'
    }
  },
  filteredRelated: 2
}

Así que pensé que ahora sería el array llamado chunkNames, razón por la cual reemplacé dicha propiedad:

var isEntryAsset = asset.chunkNames.length > 0;

Y listo, el build empezó a funcionar perfectamente. Ahora ya tengo mi manifest.json:

{
  "main.css": "/assets/app-7dd9eca0e982cb818b05.css",
  "main.js": "/assets/app-7dd9eca0e982cb818b05.js",
  "assets/logo-platzi-video-BW2.png": "/assets/7104263cc7ae188d7e1275934c32a378.png",
  "assets/play-icon.png": "/assets/9a1e4bf4f3cb0556c15a96c17808dbf7.png",
  "assets/remove-icon.png": "/assets/1baf6f54be269d1d45a5ebb09a788ded.png",
  "assets/plus-icon.png": "/assets/82e73f0c9de0d9e64a4f7eb6917fe799.png",
  "assets/user-icon.png": "/assets/5a89d07e023cabc9bd46b8ef3e33b9c3.png",
  "assets/google-icon.png": "/assets/87fee39f3ffc377fa871d31587cc532c.png",
  "assets/twitter-icon.png": "/assets/0103ef81347edc3344acec319325eb81.png"
}

Claro, esto en una versión final de un proyecto exigirá una de dos:

Crear un script postinstall para parchear el archivo usando alguna herramienta de consola.
Usar patch-package para crear el respectivo parche a la dependencia. ...pero eso ya es arena de otro costal.

Gerson Montenegro

student•

Por cierto, aquí hablamos de seguir usando la última versión estable del paquete webpack-manifest-plugin

Omar Moreno

student•

Muchas gracias por tu aportación! :D me pasaba lo mismo

Julia Suárez

student•

Sinceramente el uso de un monton de condicionales en un solo archivo de configuracion de webpack me parece una mala practica pues a medida que agregas cosas se empieza a volver un spaguetti, estaba buscando si existe alguna alternativa (ademas de usar archivos completamente separados para produccion y para desarrollo) y me encontre con esta guia en donde explican que puedes tener 3 archivos, uno de common (comun para desarrollo y produccion) uno para la configuracion especifica de solo produccion y otro de desarrollo con cosas especificas de desarrollo https://webpack.js.org/guides/production/

Jesus Adrian Berrio Valdes

student•

Yo la primera vez tomé este curso no entendí nada, ahora quiero lanzar mi pagina y no se como, tengo que regresar a ver los videos pero ahora si entiendo

Diego Camino Reinoso

student•

¿Por qué es una buena práctica agregar hashes a los nombres de nuestros archivos?

Tlacaelel León Villaseñor

student•

para el cache del navegador, imaginate que haces build de tu app y existe una version 1 por asi decirlo de tu app.js y app.css, despues decides hacer una modificacion en estilos o en alguna funcion, cuando vuelvas a hacer build vas a volver a generar un app.js y un app.css. El problema viene cuando el navegador los carga, por que el navegador suele verificar si los archivos que pide ya los tiene, entonces puede pasar que el navegador al ver que ya tiene los archivos no los actualiza y no se ven reflejados los cambios. usar Hash en produccion te permite obligar al navegador a que baje los archivos cada vez que cambian, por que cada vez que haces build el hash cambia y el navegador identifica que es un archivo diferente.

Diego Camino Reinoso

student•

Muchas gracias por la respuesta! ahora todo me queda mucho más claro!

Julia Suárez

student•

De nuevo agrega paquetes magicamente sin explicar su beneficio o el problema que resuelve, aqui esta la documentacion de que es el manifest de webpack https://webpack.js.org/concepts/manifest/

José Daniel Navarrete Díaz

student•

ERROR: Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-aJk8FS/5kyfiEeueBXFdhKH3WWsxSNW4Z25doaSoJJQ='), or a nonce ('nonce-...') is required to enable inline execution.

Antonio Mendiola Farías

student•

Hola josdanind.

No especificas en qué momento te sale ese error, ni compartes tu código. Pero es el mismo que tuve clases atrás.

En el archivo server.js modifica la función renderApp de tal forma que dónde especificas las políticas del 'Content-Security-Policy' permitas las fuentes desde dónde se obtienen las imágenes, los videos, las fuentes y los scripts. Algo asi:

Sólo sustituye el hash por el que te aparece en el error en Chrome ‘sha256-aJk8FS/5kyfiEeueBXFdhKH3WWsxSNW4Z25doaSoJJQ=’

Saludos!

José Daniel Navarrete Díaz

student•

Muchas gracias, estaba cerca a esa solución pero le estaba mandando 'Content-Security-Policy' desde el HTML.

Nicolas Esteban Manograsso

student•

Instale el paquete webpack-manifest-plugin con la version 3.0.0 y tengo el siguiente error

TypeError: ManifestPlugin is not a constructor

Para solucionarlo cambié un poco el webpack.config.js como dice la doc del paquete

const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
/.../
	plugins: [
    	isDev ? () => {} : new WebpackManifestPlugin(),
  ],

Espero que sirva :D

Jose Daniel Molina

student•

Porqué es importante el archivo manifest.json?

Daniel Felipe Merchan Fuquen

student•

Tampoco lo entendía, pero consulté en este enlace y aprendí que nos funciona para inyectar manualmente nuestros archivos generados por Webpack. Porque en otros casos habitualmente usamos html-webpack-plugin el cual hace este proceso por nosotros y como eliminamos este plugin en clases pasadas debemos encontrar otra forma de hacer está tarea.

Jair Balcazar Cobeña

student•

Cual es el beneficio de utilizar hashes en los nombres de los archivos, considero que se debió mencionar en la clase.

Carlos Sampol

Team Platzi•

Luis Carlos Kristen Ospitia

student•

yp tengo un problema que debe ser una chorrada pero no encuentro donde solucionarlo, y es que el build se me genera, los tamaños son los adecuados a la clase, todo perfecto pero cuando inicio el node src/server solo me muestra el index.html no me carga la aplicación, ya revise las rutas de webpack y todo, me crea hashes me hace todo pero al lanzarla en producción no me va, ya configure el .env con la configuración de producción, a alguien mas le ha pasado? o alguien que me pueda aconsejar?

Luis Carlos Kristen Ospitia

student•

adjunto codigo de webpack.config.js

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');

require('dotenv').config();

const isDev = (process.env.ENV === 'development');
const entry = ['./src/frontend/index.js'];

if (isDev) {
  entry.push('webpack-hot-middleware/client?path=/__webpack_hmr&amp;timeout=2000&amp;reload=true');
}

module.exports = {
  entry,
  mode: process.env.ENV,
  output: {
    path: path.resolve(__dirname, 'src/server/public'),
    filename: isDev ? 'assets/app.js' : 'assets/app-[hash].js',
    publicPath: '/',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: &quot;babel-loader&quot;,
        }
      },
      {
        test: /\.(s*)css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(png|gif|jpg)$/,
        use: [
          {
            'loader': 'file-loader',
            options: {
              name: 'assets/[hash].[ext]'
            }
          }
        ]
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
  },
  plugins: [
    isDev ? new webpack.HotModuleReplacementPlugin() :
      () =&gt; { },
    isDev ? () =&gt; { } :
      new CompressionWebpackPlugin({
        test: /\.js$|\.css$/,
        filename: '[path].gz',
      }),
    isDev ? () =&gt; { } :
      new ManifestPlugin(),
    new MiniCssExtractPlugin({
      filename: isDev ? 'assets/app.css' : 'assets/app-[hash].css',
    }),
  ],
};

María Paz Muñoz Parra

student•

Hola Luis, me pasa igual, ¿lograste solucionarlo? En consola me sale el error

Refused to apply style from 'https://localhost:4000/assets/app-....css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Kevin Enrique Ponce Rodriguez

student•

Buenas Noches, es necesario que la librería de webpack-manifest-plugin tenga que estar en las dependencias de development?? Es que no me da error pero no me genera el manifest.json. La versión que tengo es la 3.0.0

Cristofher Jumbo Jimenez

student•

El manifest.json lo tiene que crear uno normalmente, pero ahora te comento cuando termine el video :)

Adonys Santos Jiménez

student•

Llevo días intentando solucionar lo siguiente

Este error está en la rama dev de mi repo https://github.com/adonyssantos/platzi-video-frontend/tree/dev

Al cargar la App en modo producción ( npm run start) ocurre el siguiente error:

!image

También el botón de plus para agregar un video a myList no funciona:

!image

Además el formulario de Login no funciona:

!image

Creo que si se soluciona el error 1 es muy probable que se quite el error 2 y 3.

Carlos Alfonso Garcia Rivera

student•

¿todas estas configuraciones son necesarias para optimizar el sitio o se pueden omitir?

María Paz Muñoz Parra

student•

Noto que mi manifest.json no incluye los archivos CSS, ¿me estará faltando algo?

{
  "main.js": "/assets/app-44021f2d14257fd21f3a.js",
  "vendors.js": "/assets/vendor-44021f2d14257fd21f3a.js",
  "assets/app-44021f2d14257fd21f3a.js.gz": "/assets/app-44021f2d14257fd21f3a.js.gz",
  "assets/vendor-44021f2d14257fd21f3a.js.LICENSE.txt": "/assets/vendor-44021f2d14257fd21f3a.js.LICENSE.txt",
  "assets/vendor-44021f2d14257fd21f3a.js.gz": "/assets/vendor-44021f2d14257fd21f3a.js.gz"
}

José Marquínez

student•

¿Por qué la lectura de nuestro manifest.json se hace de forma síncrona? a través de: fs.readFileSync()

Ever Alfredo Sorto Ayala

student•

por que ocupo la función síncrona para leer el archivo readFileSync?

Jesus Adrian Berrio Valdes

student•

Porque leer un archivo es algo asincriono, es como si usara el await

Cristofher Jumbo Jimenez

student•

En typescript al momento de usar JSON.parse teneis que pasar el buffer a String. Ya que los tipos no son compatibles :/

Didier Zúñiga

student•

A mi me pasa lo mismo que a @inquietus en su comentario sobre el prefijo 1 en los assets, pero me pasa solo cuando aplico la configuración de splitChunks para generar el vendor, y solo me sucede con el CSS, he revisado y todo esta igual al que se hace en la clase.

{
  type: 'asset',
  name: 'assets/app-7dd9eca0e982cb818b05.js',
  size: 200404,
  chunkNames: [ 'main' ],
  chunkIdHints: [],
  auxiliaryChunkNames: [],
  auxiliaryChunkIdHints: [],
  emitted: false,
  comparedForEmit: false,
  cached: true,
  info: {
    immutable: true,
    fullhash: '7dd9eca0e982cb818b05',
    javascriptModule: false,
    minimized: true,
    related: {
      license: 'assets/app-7dd9eca0e982cb818b05.js.LICENSE.txt',
      gziped: 'assets/app-7dd9eca0e982cb818b05.js.gz'
    }
  },
  filteredRelated: 2
}

{
  "main.css": "/assets/app-7dd9eca0e982cb818b05.css",
  "main.js": "/assets/app-7dd9eca0e982cb818b05.js",
  "assets/logo-platzi-video-BW2.png": "/assets/7104263cc7ae188d7e1275934c32a378.png",
  "assets/play-icon.png": "/assets/9a1e4bf4f3cb0556c15a96c17808dbf7.png",
  "assets/remove-icon.png": "/assets/1baf6f54be269d1d45a5ebb09a788ded.png",
  "assets/plus-icon.png": "/assets/82e73f0c9de0d9e64a4f7eb6917fe799.png",
  "assets/user-icon.png": "/assets/5a89d07e023cabc9bd46b8ef3e33b9c3.png",
  "assets/google-icon.png": "/assets/87fee39f3ffc377fa871d31587cc532c.png",
  "assets/twitter-icon.png": "/assets/0103ef81347edc3344acec319325eb81.png"
}

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');

require('dotenv').config();

const isDev = (process.env.ENV === 'development');
const entry = ['./src/frontend/index.js'];

if (isDev) {
  entry.push('webpack-hot-middleware/client?path=/__webpack_hmr&amp;timeout=2000&amp;reload=true');
}

module.exports = {
  entry,
  mode: process.env.ENV,
  output: {
    path: path.resolve(__dirname, 'src/server/public'),
    filename: isDev ? 'assets/app.js' : 'assets/app-[hash].js',
    publicPath: '/',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: &quot;babel-loader&quot;,
        }
      },
      {
        test: /\.(s*)css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(png|gif|jpg)$/,
        use: [
          {
            'loader': 'file-loader',
            options: {
              name: 'assets/[hash].[ext]'
            }
          }
        ]
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
  },
  plugins: [
    isDev ? new webpack.HotModuleReplacementPlugin() :
      () =&gt; { },
    isDev ? () =&gt; { } :
      new CompressionWebpackPlugin({
        test: /\.js$|\.css$/,
        filename: '[path].gz',
      }),
    isDev ? () =&gt; { } :
      new ManifestPlugin(),
    new MiniCssExtractPlugin({
      filename: isDev ? 'assets/app.css' : 'assets/app-[hash].css',
    }),
  ],
};

{
  "main.js": "/assets/app-44021f2d14257fd21f3a.js",
  "vendors.js": "/assets/vendor-44021f2d14257fd21f3a.js",
  "assets/app-44021f2d14257fd21f3a.js.gz": "/assets/app-44021f2d14257fd21f3a.js.gz",
  "assets/vendor-44021f2d14257fd21f3a.js.LICENSE.txt": "/assets/vendor-44021f2d14257fd21f3a.js.LICENSE.txt",
  "assets/vendor-44021f2d14257fd21f3a.js.gz": "/assets/vendor-44021f2d14257fd21f3a.js.gz"
}

Aplicar hashes al nombre de nuestros builds

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