How to use getLoadContext on local dev react-router dev?

[kevinxh]

Hi folks!

We have a custom express server and we use the @react-router/express package to serve our react router app with our own capabilities. like

import { createRequestHandler } from '@react-router/express';
import express, { type Express } from 'express';
import { RouterContextProvider, type ServerBuild } from 'react-router';
import { correlationIdContext } from './contexts.js';

process.env.NODE_ENV = process.env.NODE_ENV ?? 'production';

export const createServer = (build: ServerBuild): Express => {
    const app = express();
    app.disable('x-powered-by');

    app.use(
        createRequestHandler({
            build,
            mode: process.env.NODE_ENV,
            getLoadContext: () => {
                // add context here
            },
        })
    );
    return app;
};

We'd love to have the server capabilities also running on local development when we run react-router dev, but it seems like there is no way to hook into the react router dev server's handleRequest call, so we are unable to add middlewares or add context via getLoadContext during dev.

I understand that we can use vite's middlewareMode to run our own dev server instance, and move away from the CLI command react-router dev.

Is this the recommended approach? If not, how can we make getLoadContext work for local development?

Are we losing any functionalities by not using react-router dev?

Thank you for your time and guidance!

[rossipedia]

You must use a custom server to provide getLoadContext. It's not supported when using react-router dev or @react-router/serve.

Is this the recommended approach?

Yup 👍

Are we losing any functionalities by not using react-router dev?

No. react-router dev is a very thin wrapper around @react-router/express.