dev.setupMiddlewares
type SetupMiddlewaresServer = {
sockWrite: (
type: string,
data?: string | boolean | Record<string, any>,
) => void;
environments: EnvironmentAPI;
};
type SetupMiddlewares = Array<
(
middlewares: {
unshift: (...handlers: RequestHandler[]) => void;
push: (...handlers: RequestHandler[]) => void;
},
server: SetupMiddlewaresServer,
) => void
>;
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.
sockWrite
sockWrite allows middleware to send some message to HMR client, and then the HMR client will take different actions depending on the message type.
For example, if you send a 'static-changed' message, the page will reload.
rsbuild.config.ts
export default {
dev: {
setupMiddlewares: [
(middlewares, server) => {
if (someCondition) {
server.sockWrite('static-changed');
}
},
],
},
};
Sending content-changed and static-changed have the same effect. Since content-changed has been deprecated, please use static-changed instead.
environments
environments includes Rsbuild's environment API, which allows you to get the build outputs information for a specific environment in the server side.
rsbuild.config.ts
export default {
dev: {
setupMiddlewares: [
(middlewares, server) => {
middlewares.unshift(async (req, _res, next) => {
const webStats = await server.environments.web.getStats();
console.log(webStats.toJson({ all: false }));
next();
});
},
],
},
};
