Search
Docs Menu
API
Get Started

Full-stack

The vike-cloudflare package enables zero-configuration deployment to Cloudflare Pages.

It will deploy prerendered routes as static files, and dynamic routes as Pages Functions.

Instead of using vike-cloudflare you can manually integrate Cloudflare Pages yourself, see Deploy > Cloudflare Workers > Cloudflare Pages.

You can use Bati to scaffold a Vike app that uses Cloudflare Pages with vike-cloudflare.

Without a server

// vite.config.js
 
import { pages } from "vike-cloudflare";
 
export default {
  plugins: [pages()]
}

With a server

vike-cloudflare currently supports Hono and HatTip

HatTip also requires the installation of @hattip/adapter-cloudflare-workers

// vite.config.js
 
import { pages } from "vike-cloudflare";
 
export default {
  plugins: [pages({
    server: {
      kind: "hono", // or "hattip"
      entry: "hono-entry.ts" // entrypoint of the server
    }
  })]
}

Static

By pre-rendering your pages, you can remove the need for a production server. You can then deploy your app to any static host, such as Cloudflare Pages.

Static hosts always expect one .html file per URL. This means you need to pre-render all your pages, regardless of render mode. For example, if you have SPA pages, then you also need to pre-render them which will generate .html files with an empty <body>.

You can choose between following deploy strategies:

  • Build locally and upload dist/client/ to Cloudflare Pages.
  • Let a GitHub action build and upload dist/client/ to Cloudflare Pages.
  • Let Cloudflare Pages build your app.

The $ vite build command generates dist/client/ containing all static assets.

If you let Cloudflare Pages build your app, note that Vike requires Node.js >=12.19.0 and you may need to change Cloudflare Pages' default Node.js version.

You can try out your production build locally with $ vite preview, or any other tool such as $ serve dist/client/.

If you don't deploy your app at your domain root https://my-domain.com, but at https://my-domain.com/somewhere/nested instead, then change your app's Base URL.

Examples

Example of using Vike with Cloudflare Pages with a Cloudflare worker: