vite-plugin-multiserver

A Vite plugin to launch multiple servers for the same app.

Why?

This plugin was created for rare use-cases where one would want to spin up multiple versions of the same page, both for development and testing. The same could be achieved using the command-line or multiple Vite configs, but the idea was to keep the setup simple.

Installation

On NodeJS or Bun you can install from npm

npm install vite-plugin-multiserver

On Deno you can install using JSR

deno add jsr:@idleberg/vite-plugin-multiserver

Usage

Let's start with a basic example where we spin up a server for the main website and a second one for an iFrame embedded by that page. The idea is that both are part of the same application, but we want to be able to test cross-origin messaging.

import { defineConfig } from "vite";
import multiServer from "vite-plugin-multiserver";

export default defineConfig({
	// The main server for our application.
	server: {
		open: "/",
		port: 7001,
	},
	plugins: [
		// This server hosts the iFrame route, embedded by the page above.
		multiServer({
			open: "/iframe",
			port: 7002,
		}),
	],
});

API

multiServer(options)

Options

[!TIP] The options can be provided as both, a single options object or an array of many.

The default options are currently a subset of the Vite server options:

• allowedHosts
• cors
• headers
• host
• https
• open
• port
• proxy
• strictPort

Additionally, you can override some of Vite's top-level options:

• overrides.base
• overrides.cacheDir
• overrides.clearScreen
• overrides.customLogger
• overrides.define
• overrides.envDir
• overrides.envPrefix
• overrides.mode
• overrides.publicDir
• overrides.root

Related

• vite-plugin-multiple: Allow multiple Vite to run simultaneously

License

This work is licensed under The MIT License.