Mocky Balboa and React Router

How to use Mocky Balboa with React Router.

Supported versions

≥ 7.0.0

Installation

pnpm

pnpm add -D @mocky-balboa/react-router

npm

npm install -D @mocky-balboa/react-router

yarn

yarn add -D @mocky-balboa/react-router

Usage

Dev mode

In dev mode, you need to ensure the Vite config is setup for SSR mode in your react-router.config.{ts,js}:

TypeScript

// react-router.config.js
import type { Config } from "@react-router/dev/config";

export default {
  ssr: true,
} satisfies Config;

JavaScript

// react-router.config.js
/** @type {import('@react-router/dev/config').Config} */
export default {
  ssr: true,
};

You then need to add the Vite plugin to vite.config.{ts,js}

TypeScript

// vite.config.ts
import { defineConfig } from "vite";
import mockyBalboa from "@mocky-balboa/react-router";

export default defineConfig({
  plugins: [mockyBalboa()],
});

JavaScript

// vite.config.js
import { defineConfig } from "vite";
import mockyBalboa from "@mocky-balboa/react-router";

export default defineConfig({
  plugins: [mockyBalboa()],
});

For plugin options, see the API reference.

Build and serve

Build your React Router application using the standard react-router build command. Ensure you've setup the React Router config and Vite plugin as described above in the dev mode section.

pnpm

pnpm react-router build

npm

npm react-router build

yarn

yarn react-router build

Now serve your React Router application using the mocky-balboa-react-router command.

pnpm

pnpm mocky-balboa-react-router

npm

npm mocky-balboa-react-router

yarn

yarn mocky-balboa-react-router

Run mocky-balboa-react-router --help for usage options or see below for all options.

Usage: mocky-balboa-react-router [options] [dist-dir]

Starts a Node.js http server powered by Express for your React Router application as well as the necessary mocky-balboa servers

Arguments:
  dist-dir                          Path to the directory where your React Router application is built (default: "build")

Options:
  -p, --port [port]                 Port to run the server on (default: "3000")
  --websocket-port [websocketPort]  Port to run the WebSocket server on (default: "58152")
  -h, --hostname [hostname]         Hostname to bind the server to (default: "0.0.0.0")
  -t, --timeout [timeout]           Timeout in milliseconds for the mock server to receive a response from the client (default: "5000")
  --https                           Enable https server. Either https or http server is run, not both. When no --https-cert and --https-key are provided, a self-signed
                                    certificate will be automatically generated.
  --https-cert [certPath]           Optional path to the https certificate file
  --https-ca [caPath]               Optional path to the https Certificate Authority file
  --https-key [keyPath]             Optional path to the https key file
  -b, --basename [basename]         Change this based on your React Router config, `basename` option. They should match. (default: "/")
  --help                            display help for command

API reference

API reference