https://github.com/alexmacarthur/vite-plugin-proxy-page

A Vite plugin for projecting your application onto a remote page during development.
https://github.com/alexmacarthur/vite-plugin-proxy-page

local-development proxy spa vite

Last synced: 17 days ago
JSON representation

A Vite plugin for projecting your application onto a remote page during development.

• Host: GitHub
• URL: https://github.com/alexmacarthur/vite-plugin-proxy-page
• Owner: alexmacarthur
• License: mit
• Created: 2022-09-10T04:14:29.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2023-06-09T15:53:09.000Z (over 1 year ago)
• Last Synced: 2024-10-12T02:50:12.753Z (about 1 month ago)
• Topics: local-development, proxy, spa, vite
• Language: TypeScript
• Homepage: https://macarthur.me/posts/project-local-spa-onto-production-page
• Size: 41 KB
• Stars: 28
• Watchers: 3
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vite-plugin-proxy-page

A Vite plugin for developing an application in the context of a remote page.

## What's the Problem?

It's an increasingly common pattern to independently develop small applications outside of the context in which 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 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. To avoid issues with the [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react) and similar plugins that deal with JSX, make sure it's the **first** plugin registered in the array.

```js

// 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. By default, this script tag will be injected just before the closing `