Integración de Webpack con Express

**Error con Dev Middleware **

• ValidationError: Invalid options object. Dev Middleware has been initialized using an options object that does not match the API schema.
• options has an unknown property ‘hot’. These properties are valid:
  object { mimeTypes?, writeToDisk?, methods?, headers?, publicPath?, serverSideRender?, outputFileSystem?, index? }
  -ValidationError: Invalid options object. Dev Middleware has been initialized using an options object that does not match the API schema.
• options has an unknown property ‘port’. These properties are valid: object { mimeTypes?, writeToDisk?, methods?, headers?, publicPath?, serverSideRender?, outputFileSystem?, index? }

Con la instalación de:

 npm install webpack-dev-middleware webpack-hot-middleware react-hot-loader

Con la siguiente configuración en el package.json

"dependencies": {
    "@babel/register": "^7.12.1",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "md5": "^2.3.0",
    "nodemon": "^2.0.6",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-hot-loader": "^4.13.0",
    "react-redux": "^7.2.1",
    "react-router-dom": "^5.2.0",
    "redux": "^4.0.5",
    "webpack": "^5.4.0",
    "webpack-dev-middleware": "^4.0.0",
    "webpack-hot-middleware": "^2.25.0"
  },
 "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/plugin-transform-runtime": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.5",
    "@babel/runtime": "^7.12.5",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "css-loader": "^4.3.0",
    "eslint": "^7.13.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.21.5",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^1.3.0",
    "node-sass": "^4.14.1",
    "sass-loader": "^10.0.5",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  }

Colocar el siguiente codigo en el server.js

if (config.env === 'development') {
  console.log('Development config');
  const webpackConfig = require('../../webpack.config');
  const webpackDevMiddleware = require('webpack-dev-middleware');
  const webpackHotMiddleware = require('webpack-hot-middleware');
  const compiler = webpack(webpackConfig);
  const { publicPath } = webpackConfig.output;
  const serverConfig = { serverSideRender: true, publicPath };

  app.use(webpackDevMiddleware(compiler, serverConfig));
  app.use(webpackHotMiddleware(compiler));

}

Con el codigo en el .babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    // para que acepte async/ await
    "@babel/plugin-transform-runtime",
    "react-hot-loader/babel"
  ]
}

Me sale el siguiente mensaje

Server running on port: 3000
(node:22292) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
webpack built 9eb60c02b6e910dda0fd in 4787ms

Al parecer todo funciona bien solamente no se si ese mensaje afecte a futuro si alguien ha logrado solucionarlo agradecería que me ayudaran, gracias de antemano

La calidad respecto curso anterior, es muy elevada muchas felicidades al profesor

Me gustaría que nos mostraran ejemplos de como funcionaría el proyecto sin estos paquetes para ver que problema estamos solucionando exactamente

Les paso la instalación

npm i webpack-dev-middleware webpack-hot-middleware -D

Se genera un error a la hora de compilar con nodemon

npm run start:dev 

Mi solucion

webpack.config.js

<code>const path = require('path');
const webpack = require('webpack');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: ['./src/frontend/index.js', 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true'],
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader'
          }
        ]
      },
      {
        test: /\.(s*)css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(png|gif|jpg)$/,
        use: [
          {
            'loader': 'file-loader',
            options: {
              name: 'frontend/assets/[hash].[ext]'
            }
          }
        ]
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebPackPlugin({
      template: './public/index.html',
      filename: './index.html',
    }),
    new MiniCssExtractPlugin({
      filename: 'frontend/assets/[name].css',
    }),
  ],
};

server.js

/* eslint-disable global-require */
import express from 'express';
import dotenv from 'dotenv';
import webpack from 'webpack';

dotenv.config();

const { ENV, PORT } = process.env;
const app = express();

if (ENV === 'development') {
  console.log('Development config');
  const webpackConfig = require('../../webpack.config');
  const webpackDevMiddleware = require('webpack-dev-middleware')
  const webpackHotMiddleware = require('webpack-hot-middleware');
  const compiler = webpack(webpackConfig);
  // const serverConfig = { port: PORT, hot: true };
  const serverConfig = { serverSideRender: true };

  app.use(webpackDevMiddleware(compiler, serverConfig));
  app.use(webpackHotMiddleware(compiler));

}


app.get('*', (req, res) => {
  res.send({ hello: 'express' });
});

app.listen(PORT, (err) => {
  if (err) console.log(err);
  else console.log('Server running on port 3000');
});

Para los que no se les actualizan automáticamente los cambios efectuados en los componentes de React agregar el siguiente codigo al final del archivo src/frontend/index.:

if (module.hot) {
  module.hot.accept();
}

En la documentación de webpack-dev-middleware no aparece hot : true y mucho menos con el port: PORt como una opción valida para inicializar el modulo, en realidad aparece q1ue la forma màs comùn como se inicializa es unicamente con: webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath,
})
Le saqué este par de valores y compilo sin problemas, pero bueno, habrá que ver más adelante si no rompe algo por haberlos sacado, pero en principio, no debería andarle a nadie con esas opciones para el serverConfig. Si a ti te anda, por favor hazmelo saber.

Documentación

Integración de Webpack con Express

Para poder integrar webpack con express debemos instalar las siguientes dependencias

npm install webpack-dev-middleware webpack-hot-middleware react-hot-loader

Luego debemos agregar el código siguiente a el archivo de configuración del servidor.

import webpack from 'webpack';

if (process.env.ENV === 'development') { //Verifying if its on dev mode

	// requiring all the dependencies
  const webpackConfig = require('../../webpack.config');
  const webpackDevMiddleware = require('webpack-dev-middleware');
  const webpackHotMiddleware = require('webpack-hot-middleware');

	//creating a webpack compiler with our configurations
  const compiler = webpack(webpackConfig); //executing webpack with its configurations
  const serverConfig = { port: process.env.PORT, hot: true }; //declaring the port and enabling hot reload in dev server

	//adding the middlewares into the server
  app.use(webpackDevMiddleware(compiler, serverConfig)); //Middleware to compile all the files and put it on the server
  app.use(webpackHotMiddleware(compiler)); //Middleware to enable hot reload
}

Después debemos agregar unas líneas extras en nuestra configuración de webpack

Primero agregamos un nuevo plugin:

const webpack = require('webpack')

plugins: [
	new webpack.HotModuleReplacementPlugin(),
]

Luego, alteramos nuestro entry principal y agregamos en que modo se encontrara el servidor:

module.exports = {
	entry: ['./src/frontend/index.js', 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true'],
	mode: 'development'
}

Con esto habilitamos el hot reload en webpack y le mencionamos explícitamente que nos encontramos en un entorno de desarrollo

Para finalizar, alteramos el archivo .babelrc agregando la siguiente linea

{
"plugins": ["react-hot-loader/babel"]
}

entry points

    entry: ['./src/frontend/index.js', 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true'],

Si como yo tuvieron este error:

TypeError: Cannot add property htmlWebpackPluginAlterChunks, object is not extensible

Disparado justo en esta línea:

app.use(webpackDevMiddleware(compiler, webpackServerConfig));

Es porque estamos usando la última versión de webpack, que en este momento es la 5.2.0, cuando el profesor usa la 4.41.5.
Para solucionar este problema, lo que debemos hacer es actualizar el paquete html-webpack-plugin a su última versión, que en mi caso es la 4.5.0.

Los instalamos como dependencias de desarrollo

npm i webpack-hot-middleware  webpack-dev-middleware -D

Instalamos la dependencia de react-hot-loader

react-hot-loader

npm i react-hot-loader -S

Si tienen un error parecido a este:

Cannot find module 'react-hot-loader/babel

Instalen de la siguiente manera:

npm install react-hot-loader --save-dev

Si alguien tiene el siguiente error:
ValidationError: Invalid options object. Dev Middleware has been initialized using an options object that does not match the API schema.
options has an unknown property ‘hot’. These properties are valid:
object { mimeTypes?, writeToDisk?, methods?, headers?, publicPath?, serverSideRender?, outputFileSystem?, index? }
ValidationError: Invalid options object. Dev Middleware has been initialized using an options object that does not match the API schema.

En el archivo server.js remuevan las propiedades port y hot y agregen serverSideRender:

const serverConfig = {
    serverSideRender: true
  };

Es un verdadero problema las versiones de cada librería. Deberían tomar en cuenta que para el momento en que algunos tomamos este curso habrá nuevas versiones y esta configuración mostrada en clase no funcionará!

Hola Devs:
Aqui tienen:

'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true'

npm install webpack-dev-middleware webpack-hot-middleware --dev

Para evitar todos los errores de configuración debido a los cambios en los paquetes respecto de la publicación del curso les recomiendo que borren la carpeta nod_modules, bajen el archivo package.json en los enlaces de la clase y reinstalen todo usando el comando

npm install --save-exact

y así funcionará la configuración que propone el profesor.

No instalar la dependencias en modo dev , sino instalarlas globalmente :
npm install webpack-dev-middleware webpack-hot-middleware react-hot-loader

Leonidas me preparó muy bien para este curso.✌😉

A alguien mas le pasa que no se refresca automaticamente? ya revisé el codigo varias veces

Hola Devs:
Aqui tienen un poco de documentacion para complementar la espectacular explicacion del profesor:
WebpackHotMiddleware
WebpackDevMiddleware

Si alguno tiene problemas con los modulos de sass porque actualizaron a la ultima version de node, es recomendable usar el comando:

npm rebuild node-sass

interesante curso, estas son cosas que género en el día a día en mi trabajo, en mi caso utilizo una dependencia llamada webpack-merge con la cual puedo generar una configuración base y dicha configuración la puedo unir con otra ya sea para development o** producción**.

Creo que hay muchos términos que no se están explicando bien, o al menos dejar una lectura, son cosas que no están tampoco en el curso de webpack.

No paso de aquí, me sale este error y no encuentro la solución, alguna idea?

/node_modules/html-webp
ack-plugin/index.js:59
        compilation.hooks.htmlWebpackPluginAlterChunks = new SyncWaterfallHook(['chunks', 'objectWithPluginRef']);
                                                       ^

TypeError: Cannot add property htmlWebpackPluginAlterChunks, object is not extensible

Si su caso es como el mio que están haciendo este curso con otro proyecto de React, y sus archivos de react termina en .js, y no les funciona el Hot Reloading es porque Nodemon reinicia el servidor de Webpack que implementamos con Express cada vez que se modifica un archivo de Javascript.

Para solucionar esto solo debemos modificar nuestro script de desarrollo ignorando nuestra carpeta de Frontend.en nuestro package.json

"start:dev": "nodemon --ignore './src/Frontend/' src/server/index.js"

Muchísimas gracias profesor por esta clase, en verdad me ayudo enormemente a solucionar un problema del trabajo.

Excelente clase, me encanto que explicara para que sirve cada dependencia. Además de mostrar para que sirve cada configuración que hicimos.

Para que sirven los plugins de middleware y el hot middleware?

Definitivamente agregaré Webpack a la lista de cosas que debo estudiar a profundidad.

Hola desde 2023!

Actualmente, el HMR es automaticamente activado al insertar el

{  hot: true  }

Y paquetes como react-hot-loader estan deprecados debido a que ya no son necesarios.

Recomendado usar una versión abajo de node 14, salen muchos problemas, uso la 12.

Si tu actualización de webpack es mayor a la versión 5 deberás actualizar también la dependencia de html-webpack-plugin. (Si no lo actualizas generara errores)

En el código al clonar desde el repositorio que indica el profesor la versión indicada es:

“html-webpack-plugin”: “^3.2.0”

Para actualizar una forma puede ser:

• Se debe borrar esa linea (“html-webpack-plugin”: “^3.2.0”,) del package.json

• Ejecutar el comando: npm i

• npm i html-webpack-plugin -D

2/6/2021.

Los que tengan el siguiente error:

Intenten actualizar mini-css-extract-plugin a la última versión

npm install [email protected]

Y vuelvan a iniciar el servidor

npm run start:dev

Refrescan la página y debe compilar sin errores

lo de refrescar los cambios automaticos , no se puede hacer con webpack-dev-server? , o cual es la diferencia con webpack-dev-middleware? , en el curso de webpack se hace el refrescado directamente desde el archivo webpack

todo esta clase pa na porque no me refresca ni madres

el profesor instaló react-hot-loader, webpack-dev-middleware y webpack-hot-middleware usando --dev sin embargo esto ocasiona que se guarden como dependencies y no como devDependencies.
Esto no afecta en el funcionamiento del proyecto a futuro?

Para quienes presenten el siguiente error:

<Cannot add property htmlWebpackPluginAlterChunks, object is not extensible>

deben actualizar la dependencia del “html-webpack-plugin” de la siguiente manera

<npm i [email protected] -D>

para asi llevar el webpack-plugin a la version mas actualizada que es la 5.0.0

dejo el codigo con el que me funciono decistale todos los servicios de webpack y los volvi a instalar
/* eslint-disable global-require */
import express from ‘express’;
import dotenv from ‘dotenv’;
import webpack from ‘webpack’;

dotenv.config();

const { ENV, PORT } = process.env;
const app = express();

if (ENV === ‘development’) {
console.log(‘Development config’);
const webpackConfig = require(’…/…/webpack.config’);
const webpackDevMiddleware = require(‘webpack-dev-middleware’)
const webpackHotMiddleware = require(‘webpack-hot-middleware’);
const compiler = webpack(webpackConfig);
const serverConfig = { port: PORT, hot: true };

app.use(webpackDevMiddleware(compiler, serverConfig));
app.use(webpackHotMiddleware(compiler));

}

app.get(’*’, (req, res) => {
res.send({ hello: ‘express’ });
});

app.listen(PORT, (err) => {
if (err) console.log(err);
else console.log(‘Server running on port 3000’);
});

Me gusta como se dicta este curso, lo hace ver tan sencillo.

instalar las dependencias con la versión que se muestran en el video, las pueden ver en la sección de archivos y enlaces, y en webpack.config, a fecha 29/10/2020 se han actualizado y ya no funcionan las configuraciones que se muestran en el video

me sale este error alguien sabe que pueda ser?

ERROR in ./src/frontend/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\fist\kike\giphy\front\src\frontend\index.js: Support for the experimental syntax 'jsx' isn't currently enabled (144:17):

  142 | const store = createStore(reducer, initialState);
  143 | 
> 144 | ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('app'));
      |                 ^
  145 | 

wao!

Un proyecto creado con create-react-app puede tener este tipo de configuración? para poder tener Server Side Render

A ustedes no les ocurre que la bandera --save esta deprecada ? Por ende me instala las dependencias que tienen que ser de devDependencies en el objeto de dependencies.

El flag para entorno de desarrollo es --save-dev, al colocar solo --dev se guarda en las dependencias del proyecto, estoy en lo correcto? Porque Carlos solo escribe --dev

bye webpack-dev-server

Básicamente lo que hicimos fue que desde el servidor se use Webpack y se ejecute la app. Para eso se usan una serie de configuraciones y debemos tener especial cuidado para no romper la app.

Pueden probar lo que digo yendo al localhost:3000 y ahí estará la app. ¡¡¡GENIAL!!!

Info sobre los paquetes que estamos usando.

https://webpack.js.org/guides/development/#using-webpack-dev-server
https://webpack.js.org/guides/hot-module-replacement/

¿Si en mi proyecto utilizo create-react-app igualmente tendría que hacer todo este proceso verdad?

Y lo de configurar el webpack

Que hermoso quilombo se me armó! Todo por las versiones actualizadas, luego de una horita leyendo y revisando que onda, pude hacerle andar.

Honestamente odio webpack jajaj sé lo importante que es y veo todo lo que se puede hacer pero se me hace tan complicado 😪 y ya tomé el curso de Webpack y todo. Pero bueno funciono gracias al comentario de una compañera jaja

Good Class!

hahahaha sabia que iba a tener un error al usar typescript y splitting 😦

a mi me dio un error de que la carpeta node_modules/webpack_hot_middleware ya exisitia igual con el dev middleare, lo que hice fue borrar ambas carpetas y volver a instalar

Copy, paste and be happy

npm i webpack-dev-middleware webpack-hot-middleware -D

¿Qué es webpack-dev-middleware?
Es un middleware estilo express para ser usado con bundles de webpack que permite servir archivos emitidos de webpack. Solo debe ser usado para desarollo

¿Qué es Webpack Hot Middleware?
Webpack hot reloading usando Solamente webpack-dev-middleware. Permite hacer hot reloading sin usar dev-server de webpack

¡Gracias!

npm install webpack-dev-middleware webpack-hot-middleware --dev