dev.setupMiddlewares

  • Type:
type SetupMiddlewaresServer = {
  sockWrite: (
    type: string,
    data?: string | boolean | Record<string, any>,
  ) => void;
  environments: EnvironmentAPI;
};

type SetupMiddlewaresFn = (
  middlewares: {
    unshift: (...handlers: RequestHandler[]) => void;
    push: (...handlers: RequestHandler[]) => void;
  },
  server: SetupMiddlewaresServer,
) => void;

type SetupMiddlewares = SetupMiddlewaresFn | SetupMiddlewaresFn[];
  • Default: undefined

Provides the ability to execute a custom function and apply custom middleware.

See Dev Server - Middleware for more information.

Execution order

The order among several different types of middleware is: unshift => internal middleware => push.

rsbuild.config.ts
export default {
  dev: {
    setupMiddlewares: (middlewares, server) => {
      middlewares.unshift((req, res, next) => {
        console.log('first');
        next();
      });

      middlewares.push((req, res, next) => {
        console.log('last');
        next();
      });
    },
  },
};

Server API

In the setupMiddlewares function, you can access the server object, which provides some server APIs.

environments

Provides Rsbuild's environment API, see Dev server API - environments for more details.

rsbuild.config.ts
export default {
  dev: {
    setupMiddlewares: (middlewares, { environments }) => {
      middlewares.unshift(async (req, _res, next) => {
        const webStats = await environments.web.getStats();
        console.log(webStats.toJson({ all: false }));
        next();
      });
    },
  },
};

sockWrite

Sends some message to HMR client, see Dev server API - sockWrite for more details.

For example, if you send a 'static-changed' message, the page will reload.

rsbuild.config.ts
export default {
  dev: {
    setupMiddlewares: (middlewares, { sockWrite }) => {
      if (someCondition) {
        sockWrite('static-changed');
      }
    },
  },
};