A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Integraci贸n de Webpack con Express

7/22
Recursos

Aportes 57

Preguntas 11

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

**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 鈥榟ot鈥. 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 鈥榩ort鈥. 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 鈥榟ot鈥. 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.

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:

鈥渉tml-webpack-plugin鈥:聽鈥淾3.2.0鈥

Para actualizar una forma puede ser:

  • Se debe borrar esa linea (鈥渉tml-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 鈥渉tml-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 鈥榚xpress鈥;
import dotenv from 鈥榙otenv鈥;
import webpack from 鈥榳ebpack鈥;

dotenv.config();

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

if (ENV === 鈥榙evelopment鈥) {
console.log(鈥楧evelopment config鈥);
const webpackConfig = require(鈥欌/鈥/webpack.config鈥);
const webpackDevMiddleware = require(鈥榳ebpack-dev-middleware鈥)
const webpackHotMiddleware = require(鈥榳ebpack-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: 鈥榚xpress鈥 });
});

app.listen(PORT, (err) => {
if (err) console.log(err);
else console.log(鈥楽erver 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!!!

驴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