The examples set
wrangler.toml#node_compat
totrue
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 the1MB
limit. There is work-in-progress to remove the need for Node.js shims, see #445.
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).
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/
.
The bundle size of our worker should not exceed 1MB, but we can request sizes of up to 100MB and beyond:
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:
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:
wrangler
/ Cloudflare Workers altogether while developing our app.wrangler dev
to preview our worker.wrangler publish
to deploy our worker to Cloudflare Workers.See the setup of the examples.
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.