vite-plugin-proxy-page

A Vite plugin for developing an SPA in the context of a deployed production page.

What's the Problem?

It's an increasingly common pattern to independently develop small applications outside of the context of where they'll live. For example, an interactive calculator might be built with Vite's out-of-the-box development server, and then be published where it'll be used on the pages of an enterprise CMS -- pages that have their own set of styles, UI quirks, and other characteristics. If you're not careful, you could have unexpected interference with how your little application looks or works.

This plugin swaps out your local index.html file for a public page of your choosing. You'll get the UI, styles, and other assets just as if you were on the actual page, but still get to keep the snappy developer experience of a typical Vite setup.

Installation

npm install vite-plugin-proxy-page

Setup

Import the plugin and initialize it your plugins array:

// vite.config.js

import { proxyPage } from "vite-plugin-proxy-page";

export default defineConfig({
  plugins: [
    proxyPage({
      // Options go here.
    }),
  ],
  // ...remaining configuration
});

At the very least, you'll need to specify a remote page you'd like to proxy, as well as which local entry point Vite should inject onto the page.

// vite.config.js

import { proxyPage } from "vite-plugin-proxy-page";

export default defineConfig({
  plugins: [
    proxyPage({
+     remoteUrl: "https://vite-proxy-demo.netlify.app/some-page",
+     localEntryPoint: "./local-dev.tsx",
    })
  ],
 // ...remaining configuration
});

At this point, if your target page has a node to which you can mount and your local-dev.tsx file is targeting it, you're ready to go. However, if you want to inject a new node onto a certain part of the page, you can use the rootNode options:

// vite.config.js

import { proxyPage } from "vite-plugin-proxy-page";

export default defineConfig({
  plugins: [
    proxyPage({
      remoteUrl: "https://vite-proxy-demo.netlify.app/some-page",
      localEntryPoint: "./local-dev.tsx",
+     rootNode: {
+       id: "app",
+       prependTo: "main" // Optional. If left empty, the body will be used.
+     }
    })
  ],
 // ...remaining configuration
});

Using this example, a new <div id="app"></div> node will be prepended to the <main></main> element on the page.

Options

Contributions

File an issue or make a PR!