Mocky Balboa and SvelteKit

How to use Mocky Balboa with SvelteKit.

Supported versions

≥ 2.0.0

Installation

pnpm

pnpm add -D @mocky-balboa/sveltekit

npm

npm install -D @mocky-balboa/sveltekit

yarn

yarn add -D @mocky-balboa/sveltekit

Usage

Dev mode

In dev mode, all you need to do is enable the Vite plugin in your vite.config.{ts,js}

TypeScript

// vite.config.ts
import { defineConfig } from "vite";
import { sveltekit } from "@sveltejs/kit/vite";
import mockyBalboa from "@mocky-balboa/sveltekit";

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

JavaScript

// vite.config.js
import { defineConfig } from "vite";
import { sveltekit } from "@sveltejs/kit/vite";
import mockyBalboa from "@mocky-balboa/sveltekit";

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

For plugin options, see the API reference.

Build and serve

Ensure you are using the @sveltejs/adapter-node adapter. This adapter builds a handler function that is passed to the express server as middleware on the mocky-balboa-sveltekit CLI tool.

TypeScript

// svelte.config.js
import adapter from "@sveltejs/adapter-node";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),

  kit: {
    adapter: adapter(),
  },
};

export default config;

JavaScript

// svelte.config.js
import adapter from "@sveltejs/adapter-node";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),

  kit: {
    adapter: adapter(),
  },
};

export default config;

Build your SvelteKit application using the standard vite build command.

pnpm

pnpm vite build

npm

npm vite build

yarn

yarn vite build

Now serve your SvelteKit application using the mocky-balboa-sveltekit command.

pnpm

pnpm mocky-balboa-sveltekit

npm

npm mocky-balboa-sveltekit

yarn

yarn mocky-balboa-sveltekit

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

Usage: mocky-balboa-sveltekit [options] [dist-dir]

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

Arguments:
  dist-dir                          Path to the directory where your SvelteKit 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
  --help                            display help for command

API reference

API reference

Mocking requests

By default SvelteKit will perform SSR (server-side rendering) and CSR (client-side rendering) for the initial page load. For subsequent navigation, only CSR is performed. When it comes to mocking the requests for server-side rendering, you will also need to mock the client-side requests, unless you disable CSR.