Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aslemammad/vite-plugin-cloudflare
🔥 Easier and better experience writing Cloudflare workers in Vite
https://github.com/aslemammad/vite-plugin-cloudflare
cloudflare cloudflare-workers esbuild vite workers
Last synced: 2 days ago
JSON representation
🔥 Easier and better experience writing Cloudflare workers in Vite
- Host: GitHub
- URL: https://github.com/aslemammad/vite-plugin-cloudflare
- Owner: Aslemammad
- License: mit
- Created: 2021-12-15T19:02:40.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-01T20:08:16.000Z (over 1 year ago)
- Last Synced: 2024-05-02T05:21:18.175Z (5 months ago)
- Topics: cloudflare, cloudflare-workers, esbuild, vite, workers
- Language: TypeScript
- Homepage:
- Size: 2.59 MB
- Stars: 261
- Watchers: 6
- Forks: 9
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-cloudflare 🔥
Vite-plugin-cloudflare is a plugin for transforming & bundling cloudflare
workers with shimming [modern node
polyfills](https://github.com/Aslemammad/modern-node-polyfills) like `process`,
`os`, `stream` and other node global functions and modules using **Esbuild** and **Vite**!
- Universal Vite plugin
- Lightning builds
- Workers compatible build using shimming
- Fast development and HMR compatible reloads
- Builtin [Miniflare](https://miniflare.dev/) support
## Install
```
npm i --save-dev vite-plugin-cloudflare esbuild@latest
```
## Plugin
```ts
// vite.config.js
import { defineConfig } from "vite";
import vpc from "vite-plugin-cloudflare";
export default defineConfig({
plugins: [vpc({ scriptPath: "./worker/index.ts" })],
});
```
The plugin gets an options object with this type signature.
```ts
export type Options = {
// miniflare specific options for development (optional)
miniflare?: Omit;
// the worker file (required)
scriptPath: string;
// customize globals that need to polyfilled (process, setTimeout, ...)
polyfilledGlobals?: PolyfilledGlobals;
// customize mods (node's builtinModules) that need to polyfilled (utils, http, ...)
polyfilledModules?: PolyfilledModules;
// a fast-glob pattern for files who's changes should reload the worker (optional)
workerFilesPattern?: string | string[];
// enable modules (esm)
modules?: boolean;
};
```
Since this plugin works with Esbuild, options passed to the `esbuild` field of
your vite plugin will affect the worker result, unless they are not compatible
with the `BuildOptions` type of Esbuild.
## Development
You can start your Vite dev server and continue developing your applications. As
previously mentioned, this plugin integrates Miniflare with Vite, so you'd have
a nice experience writing your workers.
```
vite dev
```
## Build
When building, the plugin is going to start bundling your worker at the end of
the vite bundling phase and generates it into the `config.outDir` with the
`worker.js` file name.
```
vite build
```
Output:
```
vite v3.0.4 building for production...
✓ 6 modules transformed.
dist/assets/typescript.f6ead1af.svg 1.40 KiB
dist/index.html 0.44 KiB
dist/assets/index.2547d205.js 1.41 KiB / gzip: 0.72 KiB
dist/assets/index.d0964974.css 1.19 KiB / gzip: 0.62 KiB
🔥 [cloudflare] bundled worker file in 'dist/worker.js'
```
## Wrangler
Update your wrangler config to be compatible with the build, for instance,
here's a config that uses the `dist/worker.js` bundled worker file generated by
vite-plugin-cloudflare and serves the assets from the vite build:
```toml
# wrangler.toml
name = "vite-ssr-worker"
main = "./dist/worker.js"
compatibility_date = "2022-08-10"
[site]
bucket = "./dist/client"
```
> The values may change based on your build
## Skip Requests
Vite has some builtin middlewares that handle different types of requests from the
client, and in a Vite plugin, we can inject our middlewares along
vite ones.
Vite-plugin-cloudflare injects a middleware, that is responsible for handling
the worker, So every request from the client (browser) may come to your worker
first, before vite native middlewares. These requests can be assets,
transforms and other types of vite-related requests that should not be handled by
vite-plugin-cloudflare and instead, they should be handled by vite.
> This concern only occurs in dev mode, so no worries when building for production
Here's how we handle these type of requests in vite-plugin-cloudflare.
```ts
addEventListener("fetch", (event) => {
const { pathname } = new URL(url);
if (pathname.startsWith("/api")) {
event.respondWith(handleFetchEvent(event));
return;
}
event.respondWith(
new Response("", {
headers: {
"x-skip-request": "",
},
})
);
});
```
The `x-skip-request` header enforces vite-plugin-cloudflare to skip the response of the worker and passes the
request to the next vite middleware, so Vite would handle the request instead.
## Authors
| 
Mohammad Bagher |
| ------------------------------------------------------------------------------------------------------------------------------------------------ |
## Contributing
Feel free to create issues/discussions and then PRs for the project!
## Sponsors
Your sponsorship can make a huge difference in continuing our work in open source!
