Deploying to Cloudflare Workers.

For a much improved DX, instead of directly using Cloudflare Workers, we recommend using Deploy > Cloudflare Pages > Full-stack.

Examples

• React: /examples/cloudflare-workers-react/
• React + SSR Streaming: /examples/cloudflare-workers-react-full/
• Vue: /examples/cloudflare-workers-vue/

Wrangler

Cloudflare Workers requires your 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

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

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

vite-plugin-ssr was the previous name of Vike.

Extend 1MB limit

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

• Cloudflare Workers > Larger Scripts
• Cloudflare Workers > Limits > Worker Size

Cloudflare Pages

You can also use Cloudflare Pages to deploy your Vike app.

To deploy your SSR worker use a Cloudflare Pages Function.

Example:

• 2022.04 GitHub > Immortalin/vite-plugin-ssr-cloudflare-pages-demo

vite-plugin-ssr was the previous name of Vike.

See also:

• Wrangler 2.0 — a new developer experience for Cloudflare Workers

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:

• Skip wrangler / Cloudflare Workers altogether while developing your app.
• Use wrangler dev to preview your worker.
• Use wrangler publish to deploy your worker to Cloudflare Workers.

See the setup of the examples.

Universal fetch()

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

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

What you 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.