Hot Module Replacement con Webpack y Express

Curso de Server Side Render o SSR con React.js

Contenido del curso

No sé dónde empezar

Fundamentos de SSR

Crea tu primer app con SSR

Bonus

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0016:45

Hot Module Replacement con Webpack y Express

Curso de Server Side Render o SSR con React.js

Clase 15 de 17

Clase 15 / 17

Recursos

Activar Hot Module Replacement con Webpack en un servidor Express te permite recargar tu aplicación React al instante mientras desarrollas, sin sacrificar el server-side rendering. Es la pieza que convierte tu motor casero en algo parecido a Create React App o Next.js, ideal si estás construyendo tu propio stack de SSR.

La idea es simple: inyectamos el compilador de Webpack dentro de Express usando middlewares, y dejamos que detecte cambios en caliente. Así obtienes una recarga rápida en desarrollo y un build optimizado en producción, todo desde el mismo servidor.

¿Qué dependencias necesitas para configurar Hot Module Replacement?

Antes de tocar código, instala las piezas que conectan Webpack con Express. Cada una cumple un rol específico dentro del flujo de desarrollo.

webpack-hot-middleware: habilita el Hot Module Replacement y mantiene la conexión viva con el navegador [02:15].
webpack-dev-middleware: activa el servidor en modo desarrollo usando el compilador de Webpack directamente.
react-dev-utils: añade una capa de error visible en el navegador y permite abrir el navegador automáticamente al iniciar.

Instálalas como dependencias de desarrollo y ya tienes la base para construir el middleware que orquesta todo.

¿Qué es un middleware en Express? Es una función que intercepta una petición antes de que llegue a tu servidor. Se ejecuta primero y puede modificar la respuesta, redirigir o, como en este caso, inyectar el compilador de Webpack.

¿Cómo crear el middleware de Webpack para tu servidor?

Dentro de tu carpeta server, crea un directorio middlewares y un archivo webpack-middleware.ts. Ahí vas a importar Webpack, el hot middleware (renombrado como WHM por brevedad), el dev middleware, el ErrorOverlayMiddleware y openBrowser, ambos de react-dev-utils [04:30].

La función que exportes debe hacer tres cosas en orden:

Abrir el navegador en la URL del servidor usando template strings con el puerto que viene de tu archivo de configuración.
Crear el compilador de Webpack pasándole la configuración del cliente (webpack.config.client).
Devolver un arreglo de middlewares listos para que Express los aplique.

El compilador de Webpack es clave porque expone hooks que te permiten reaccionar cuando termina de compilar o cuando falla. Es la misma pieza que usan internamente herramientas como Create React App.

¿Qué opciones lleva el Hot Module Replacement?

Al WHM le pasas el compilador y un objeto de opciones. Estas son las que importan:

log: usa console.log para que veas los eventos en la terminal.
path: define la ruta donde se expone el servicio, típicamente /__webpack-hmr.
heartbeat: cada cuántos milisegundos el servidor escucha cambios. Un valor de 200 ms funciona bien.

El webpack-dev-middleware recibe el compilador con dos opciones extra: serverSideRender en true y writeToDisk en true, para que los archivos se escriban a disco y la lectura sea más rápida [07:50].

¿Cómo ajustar la configuración de Webpack del cliente?

El middleware solo funciona si tu webpack.config.client.js está preparado para recibir actualizaciones en caliente. Hay dos ajustes obligatorios.

El primero es activar el HotModuleReplacementPlugin que viene incluido en Webpack. Lo declaras solo cuando estás en modo desarrollo, usando una condición sobre process.env.NODE_ENV. Si no es producción, haces plugins.push(new webpack.HotModuleReplacementPlugin()).

El segundo ajuste toca las entries. Webpack necesita saber qué script cliente debe inyectar para escuchar los cambios. Tomas el arreglo de entradas y usas entries.shift() con el string del cliente del hot middleware (que apunta al mismo path que configuraste, por ejemplo /__webpack-hmr con opciones de timeout y reload).

¿Por qué usar shift y no push para las entries? Porque el cliente del Hot Module Replacement debe cargarse antes que el bundle de tu app. shift lo coloca al inicio del arreglo y garantiza que la conexión se establezca primero.

También deja configurado el devServer con hot: true, port, y historyApiFallback: true por si manejas routing en el cliente.

¿Cómo diferenciar desarrollo y producción en el servidor?

En el index de tu servidor, importa el webpackMiddleware y crea una variable isDev basada en process.env.NODE_ENV !== 'production'. Con eso decides qué hacer:

Si isDev es true: aplicas app.use(webpackMiddleware()) y dejas que Webpack maneje todo desde memoria y disco.
Si isDev es false: expones la carpeta build estática como lo hacías antes.

La diferencia es enorme. En producción tú haces el build del cliente manualmente y el servidor lo sirve. En desarrollo, Webpack lo compila al vuelo y lo recarga sin reiniciar nada [12:40].

¿Cómo confirmar que el Hot Module Replacement funciona?

Corre yarn dev, espera a que abra el navegador y revisa la consola. Debe aparecer el mensaje Hot Module Replacement Connected. Para probarlo, edita un componente, por ejemplo cambia el texto de un Hero de "Helix Eye" a "Helix", guarda y observa cómo el cambio aparece sin recargar la página completa.

Con esto cierras el ciclo del Platzi Engine: arrancaste enviando HTML como template, agregaste JavaScript y prefetching, y terminaste con un servidor de desarrollo que recarga al instante. Es, básicamente, un mini clon de Next.js construido pieza por pieza.

¿Ya intentaste integrar Hot Module Replacement en tu propio motor de SSR? Cuéntame en los comentarios qué dependencias usaste y dónde te trabaste.

// webpack.config.client.js
const { HotModuleReplacementPlugin } = require('webpack');
const path = require('path');
const dotenv = require('dotenv');
const nodeExternals = require('webpack-node-externals');

dotenv.config();

const mode = process.env.NODE_ENV ?? 'production';
const isDev = process.env.NODE_ENV !== 'production';

let entries = ['./src/app/index.tsx'];
let plugins = [];

if (isDev) {
  entries.unshift(
    'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=200&overlay=false',
  );
  plugins.push(new HotModuleReplacementPlugin());
}

module.exports = {
  name: 'client',
  target: 'web',
  entry: entries,
  mode,
  devtool: isDev ? 'eval-source-map' : undefined,
  stats: 'errors-only',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'client.bundle.js',
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.(tsx|ts)?$/,
        use: {
          loader: 'swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true,
                minify: !isDev,
              },
            },
          },
        },
        exclude: /node_modules/,
      },
      {
        test: /\.ico$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
            },
          },
        ],
      },
    ],
  },
  plugins,
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  devServer: {
    hot: true,
    port: process.env.PORT || 3600,
    open: true,
    historyApiFallback: true,
  },
};

//webpack.config.server.js
const path = require('path');
const dotenv = require('dotenv');
const nodeExternals = require('webpack-node-externals');

dotenv.config();

const mode = process.env.NODE_ENV ?? 'production';
const isDev = process.env.NODE_ENV !== 'production';
const PORT = process.env.PORT;

module.exports = {
  name: 'server',
  entry: './src/server/index.ts',
  mode,
  target: 'node',
  externalsPresets: { node: true },
  externals: [nodeExternals()],
  stats: 'errors-only',
  node: {
    __dirname: false,
  },
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'index.js',
    publicPath: '/',
    clean: false,
  },
  module: {
    rules: [
      {
        test: /\.(tsx|ts)?$/,
        use: {
          loader: 'swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true,
                minify: !isDev,
              },
            },
          },
        },
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
};

// src/server/middlewares/webpackMiddleware.ts

import webpack from 'webpack';
import whm from 'webpack-hot-middleware';
import wdm from 'webpack-dev-middleware';
import errorOverlay from 'react-dev-utils/errorOverlayMiddleware';
import openBrowser from 'react-dev-utils/openBrowser';

// @ts-ignore
import webpackClientConfig from '../../../webpack.config.client.js';

import { config } from '../config';

export const webpackMiddleware = () => {
  openBrowser(`http://localhost:${config.PORT}`);

  const compiler = webpack(webpackClientConfig);

  return [
    whm(compiler, { log: console.log, path: '/__webpack_hmr', heartbeat: 200 }),
    wdm(compiler, { serverSideRender: true, writeToDisk: true }),
    errorOverlay(),
  ];
};

// src/server/index.ts

import express, { Express, Request, Response } from 'express';

import { config } from './config';
import { render } from '../render';
import { webpackMiddleware } from './middlewares/webpackMiddleware';

const app: Express = express();

const isDev = process.env.NODE_ENV !== 'production';

if (isDev) {
  app.use(webpackMiddleware());
}

if (process.env.NODE_ENV === 'development') {
  const [whm, wdm, errorOverlay] = webpackMiddleware();
  app.use(wdm);
  app.use(whm);
  app.use(errorOverlay);
}

app.use(express.static('dist'));

app.get('/galaxies', async (req: Request, res: Response) => {
  try {
    const response = await fetch(
      'https://images-api.nasa.gov/search?q=galaxies',
    );
    const data: any = await response.json();

    const items = data?.collection?.items || [];

    const initialProps = {
      galaxies: items.length > 0 ? items.slice(0, 10) : [],
    };

    const html = render(req.url, initialProps);
    res.send(html);
  } catch (error) {
    res.status(500).send('Error en el cosmos');
  }
});

app.use((req: Request, res: Response, next: any) => {
  res.setHeader(
    'Content-Security-Policy',
    "default-src 'self'; " +
      "script-src 'self' 'unsafe-inline' 'unsafe-eval'; " +
      "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; " +
      "font-src 'self' https://fonts.gstatic.com; " +
      "img-src 'self' data: https://i.imgur.com https://images-assets.nasa.gov; " +
      "connect-src 'self' http://localhost:* ws://localhost:* https://images-api.nasa.gov;",
  );
  next();
});

app.get('/{\*splat}', (req: Request, res: Response) => {
  if (req.url.includes('.')) {
    return res.status(404).end();
  }

  res.send(render(req.url));
});

app.use((err: any, res: Response) => {
  console.error('🌊 Alerta de naufragio:', err.message);
  res.status(500).send('Algo salió mal en la bodega del barco.');
});

app.listen(config.PORT, () => {
  console.log(`Listenting in http://localhost:${config.PORT}`);
});

// src/app/index.tsx

import React from 'react';
import { hydrateRoot } from 'react-dom/client';
import { App } from './containers/App';
import { StyleSheetManager } from 'styled-components';
import { BrowserRouter } from 'react-router-dom';
// import './assets/favicon.ico';

const container = document.getElementById('app')!;

const initialProps = window.__INITIAL_PROPS__;

hydrateRoot(
  container,
  <StyleSheetManager disableVendorPrefixes>
    <BrowserRouter>
      <App {...initialProps} />
    </BrowserRouter>
  </StyleSheetManager>,
);

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

// webpack.config.client.js
const { HotModuleReplacementPlugin } = require('webpack');
const path = require('path');
const dotenv = require('dotenv');
const nodeExternals = require('webpack-node-externals');

dotenv.config();

const mode = process.env.NODE_ENV ?? 'production';
const isDev = process.env.NODE_ENV !== 'production';

let entries = ['./src/app/index.tsx'];
let plugins = [];

if (isDev) {
  entries.unshift(
    'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=200&overlay=false',
  );
  plugins.push(new HotModuleReplacementPlugin());
}

module.exports = {
  name: 'client',
  target: 'web',
  entry: entries,
  mode,
  devtool: isDev ? 'eval-source-map' : undefined,
  stats: 'errors-only',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'client.bundle.js',
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.(tsx|ts)?$/,
        use: {
          loader: 'swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true,
                minify: !isDev,
              },
            },
          },
        },
        exclude: /node_modules/,
      },
      {
        test: /\.ico$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
            },
          },
        ],
      },
    ],
  },
  plugins,
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  devServer: {
    hot: true,
    port: process.env.PORT || 3600,
    open: true,
    historyApiFallback: true,
  },
};

//webpack.config.server.js
const path = require('path');
const dotenv = require('dotenv');
const nodeExternals = require('webpack-node-externals');

dotenv.config();

const mode = process.env.NODE_ENV ?? 'production';
const isDev = process.env.NODE_ENV !== 'production';
const PORT = process.env.PORT;

module.exports = {
  name: 'server',
  entry: './src/server/index.ts',
  mode,
  target: 'node',
  externalsPresets: { node: true },
  externals: [nodeExternals()],
  stats: 'errors-only',
  node: {
    __dirname: false,
  },
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'index.js',
    publicPath: '/',
    clean: false,
  },
  module: {
    rules: [
      {
        test: /\.(tsx|ts)?$/,
        use: {
          loader: 'swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true,
                minify: !isDev,
              },
            },
          },
        },
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
};

// src/server/middlewares/webpackMiddleware.ts

import webpack from 'webpack';
import whm from 'webpack-hot-middleware';
import wdm from 'webpack-dev-middleware';
import errorOverlay from 'react-dev-utils/errorOverlayMiddleware';
import openBrowser from 'react-dev-utils/openBrowser';

// @ts-ignore
import webpackClientConfig from '../../../webpack.config.client.js';

import { config } from '../config';

export const webpackMiddleware = () => {
  openBrowser(`http://localhost:${config.PORT}`);

  const compiler = webpack(webpackClientConfig);

  return [
    whm(compiler, { log: console.log, path: '/__webpack_hmr', heartbeat: 200 }),
    wdm(compiler, { serverSideRender: true, writeToDisk: true }),
    errorOverlay(),
  ];
};

// src/server/index.ts

import express, { Express, Request, Response } from 'express';

import { config } from './config';
import { render } from '../render';
import { webpackMiddleware } from './middlewares/webpackMiddleware';

const app: Express = express();

const isDev = process.env.NODE_ENV !== 'production';

if (isDev) {
  app.use(webpackMiddleware());
}

if (process.env.NODE_ENV === 'development') {
  const [whm, wdm, errorOverlay] = webpackMiddleware();
  app.use(wdm);
  app.use(whm);
  app.use(errorOverlay);
}

app.use(express.static('dist'));

app.get('/galaxies', async (req: Request, res: Response) => {
  try {
    const response = await fetch(
      'https://images-api.nasa.gov/search?q=galaxies',
    );
    const data: any = await response.json();

    const items = data?.collection?.items || [];

    const initialProps = {
      galaxies: items.length > 0 ? items.slice(0, 10) : [],
    };

    const html = render(req.url, initialProps);
    res.send(html);
  } catch (error) {
    res.status(500).send('Error en el cosmos');
  }
});

app.use((req: Request, res: Response, next: any) => {
  res.setHeader(
    'Content-Security-Policy',
    "default-src 'self'; " +
      "script-src 'self' 'unsafe-inline' 'unsafe-eval'; " +
      "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; " +
      "font-src 'self' https://fonts.gstatic.com; " +
      "img-src 'self' data: https://i.imgur.com https://images-assets.nasa.gov; " +
      "connect-src 'self' http://localhost:* ws://localhost:* https://images-api.nasa.gov;",
  );
  next();
});

app.get('/{\*splat}', (req: Request, res: Response) => {
  if (req.url.includes('.')) {
    return res.status(404).end();
  }

  res.send(render(req.url));
});

app.use((err: any, res: Response) => {
  console.error('🌊 Alerta de naufragio:', err.message);
  res.status(500).send('Algo salió mal en la bodega del barco.');
});

app.listen(config.PORT, () => {
  console.log(`Listenting in http://localhost:${config.PORT}`);
});

// src/app/index.tsx

import React from 'react';
import { hydrateRoot } from 'react-dom/client';
import { App } from './containers/App';
import { StyleSheetManager } from 'styled-components';
import { BrowserRouter } from 'react-router-dom';
// import './assets/favicon.ico';

const container = document.getElementById('app')!;

const initialProps = window.__INITIAL_PROPS__;

hydrateRoot(
  container,
  <StyleSheetManager disableVendorPrefixes>
    <BrowserRouter>
      <App {...initialProps} />
    </BrowserRouter>
  </StyleSheetManager>,
);

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

Fundamentos de SSR

Por qué React necesita server-side rendering

Problemas reales de las SPAs con JavaScript

Creación y Funcionamiento de una SPA con Create React App

CSR vs SSR: cómo el servidor pinta primero

Ventajas y desventajas del server-side rendering

Crea tu primer app con SSR

Proyecto Helix Eye: de CSR a SSR

Webpack para servidor Node con TypeScript

Servidor Express con TypeScript desde cero

Función template HTML dinámica en TypeScript

renderToString y StaticRouter en el servidor

Hidratación de React con hydrateRoot en SSR

Prefetching de API en el servidor con Axios

Inyectando initialProps del servidor a React

Cómo inyectar estilos de SSR sin flickering

Bonus

Hot Module Replacement con Webpack y Express

Tu motor SSR vs Next.js en práctica

Helix Eye como proyecto de portafolio

Hot Module Replacement con Webpack y Express

Progreso del curso

Fundamentos de SSR

Crea tu primer app con SSR

Bonus

Recursos

Recursos