Provide ability to extend vite-plugin-cloudflare

[aron-cf]

I've been tasked with figuring out how we integrate the cloudflare/sandbox-sdk with the Cloudflare
Vite plugin. Particularly the ability to run a Vite dev server within a sandbox while retaining
all the functionality of the host Vite dev server.

A sandbox can be exposed via a worker in development using a custom hostname in the form:

http://<port>-<sandbox_id>-<token>.localhost:<port>

Routing requests to the sandbox touches a number of pieces.

1. Request routing. All requests with that host should be routed to the worker.
2. HTML file and static asset serving for those hosts should also be routed to the worker.
3. Websocket upgrades should also be routed to the worker, even when using the vite-hmr protocol.

Theres a more comprehensive overview described in this internal document. But for now TLDR; it would be very useful to be able to extend the Cloudflare plugin (particularly access to miniflare) so that we can register our own middleware in the stack and handle Sandbox specific details.

This would let us iron out the user interface for working with Sandboxes without having to alter the implementation of the plugin significantly.

The proposal here is to provide the ability to register additional Vite plugins via an experimental.additionalPlugins config option. These plugins get access to the PluginContext in the same way as the internal plugins.

This would allow us to explore different implementations before proposing a final integration.

A plugin would look something like:

import { cloudflare, createPlugin, type PluginContext } from "@cloudflare/vite-plugin";
import { defineConfig } from "vite";

const myPlugin = createPlugin("my-plugin", (ctx: PluginContext) => ({
  async configureServer(server) {
    server.middlewares.use(async (req, res, next) => {
      if (/* match sandbox route */) {
        return ctx.miniflare.dispatchFetch(req);
      }
      next();
    })
  }
}));

defineConfig({
  plugins: [react(), cloudflare({
    experimental: {
      additionalPlugins: [myPlugin]
    }
  })]
});

There is a full example of a vite-sandbox in this pull request cloudflare/sandbox-sdk#434.

Currently the entire PluginContext is exposed, but it may be more prudent to expose a limited interface. I think primarily access to the resolved configs and miniflare are the most critical.

I have added a basic test on top of the existing static one to verify it is wired up correctly. I'm happy to refactor that as needed.

---

• Tests
  • Tests included/updated
• Public documentation
  • Cloudflare docs PR(s):
  • Documentation not necessary because:

[changeset-bot]

⚠️ No Changeset found

Latest commit: 5a15f98

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[pkg-pr-new]

create-cloudflare

npm i https://pkg.pr.new/create-cloudflare@12743

@cloudflare/kv-asset-handler

npm i https://pkg.pr.new/@cloudflare/kv-asset-handler@12743

miniflare

npm i https://pkg.pr.new/miniflare@12743

@cloudflare/pages-shared

npm i https://pkg.pr.new/@cloudflare/pages-shared@12743

@cloudflare/unenv-preset

npm i https://pkg.pr.new/@cloudflare/unenv-preset@12743

@cloudflare/vite-plugin

npm i https://pkg.pr.new/@cloudflare/vite-plugin@12743

@cloudflare/vitest-pool-workers

npm i https://pkg.pr.new/@cloudflare/vitest-pool-workers@12743

@cloudflare/workers-editor-shared

npm i https://pkg.pr.new/@cloudflare/workers-editor-shared@12743

wrangler

npm i https://pkg.pr.new/wrangler@12743

commit: ab3d5ea

[aron-cf]

Closed in favor of just supporting Sandbox SDK directly. This was implemented in #12794