Cloudflare Workers

Examples

The examples set wrangler.toml#node_compat to true which makes wrangler show a warning:

[WARNING] Enabling node.js compatibility mode for built-ins and globals. This
is experimental and has serious tradeoffs.

But we can safely ignore the warning (the only Node.js shims used are all robust). However, the Node.js shims add around 200KB-300KB to your worker code, which is significant considering the 1MB limit. There is work-in-progress to remove the need for Node.js shims, see #445.

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.