Cloudflare Workers

Examples

Wrangler

Cloudflare Workers requires our entire worker code to be bundled into a single file.

Cloudflare uses the term "worker code" to denote server code that is run on its edge infrastructure.

We recommend using Wrangler v2 (the v2 uses esbuild under the hood).

vite-plugin-cloudflare

We can also use vite-plugin-cloudflare which enables us to simply use $ vite build and $ vite dev to build and develop our worker code (including HMR support!).

Example: GitHub > Aslemammad/vite-plugin-cloudflare > examples/vite-plugin-ssr/.

Extend 1MB limit

The bundle size of our worker should not exceed 1MB, but we can request sizes of up to 100MB and beyond:

Cloudflare Pages

We can also use Cloudflare Pages to deploy our vite-plugin-ssr app.

To deploy our SSR worker, we use a Cloudflare Pages Function.

⚠ Cloudflare Pages Functions is in beta.

Example:

See also:

Development

For a significantly faster development experience, we recommend, whenever possible, using Vite's development server instead of wrangler (or an Express.js server).

This means:

  • We skip wrangler / Cloudflare Workers altogether while developing our app.
  • We use wrangler dev to preview our worker.
  • We use wrangler publish to deploy our worker to Cloudflare Workers.

See the setup of the examples.

Universal fetch()

When using Node.js for development and Cloudflare Workers for production, we may need a fetch() function that works in both environments.

But libraries such as node-fetch or cross-fetch usually don't work with Cloudflare Workers.

What we can do is to define a fetch function at pageContext.fetch that works in all environments. The trick is to add a different fetch() implementation to pageContextInit at renderPage(pageContextInit).

Example: /examples/cloudflare-workers-react-full#universal-fetch.