Cloudflare Pages Adapter

Qwik City Cloudflare Pages adapter allows you to connect Qwik City to Cloudflare Pages.

Installation

To integrate the cloudflare-pages adapter, use the add command:

npm run qwik add cloudflare-pages

The adapter will add a new vite.config.ts within the adapters/ directory, and a new entry file will be created, such as:

└── adapters/
    └── cloudflare-pages/
        └── vite.config.ts
└── src/
    └── entry.cloudflare-pages.tsx

Additionally, within the package.json, the build.server and deploy scripts will be updated.

Production build

To build the application for production, use the build command, this command will automatically run npm run build.server and npm run build.client:

npm run build

Read the full guide here

Deploy to Cloudflare Pages

After installing the integration using npm run qwik add cloudflare-pages, the project is ready to be deployed to Cloudflare Pages.

Please refer to the Cloudflare Pages docs for more information on how to deploy your site.

Note that you will need a Cloudflare account in order to complete this step.

Advanced

Cloudflare Pages Entry Middleware

When the cloudflare-pages adapter is added, a new entry file will be created at src/entry.cloudflare-pages.tsx. Below is an example of using the built-in middleware within the entry file.

import {
  createQwikCity,
  type PlatformCloudflarePages,
} from '@builder.io/qwik-city/middleware/cloudflare-pages';
import qwikCityPlan from '@qwik-city-plan';
import { manifest } from '@qwik-client-manifest';
import render from './entry.ssr';
 
const fetch = createQwikCity({ render, qwikCityPlan, manifest });
 
export { fetch };

The compiled middleware will be built in the server/ directory. Such directory also contains an _worker.js file which implements the application's request handling as per the Cloudflare Pages Advanced Mode. The file simple re-exports the produced fetch handler as shown below.

import { fetch } from "../server/entry.cloudflare-pages";
export default { fetch };

• Cloudflare Pages Middleware Source
• Cloudflare Pages Advanced Mode
• Function Invocation Route Config

Cloudflare Pages Function Invocation Routes

Cloudflare Page's function-invocation-routes config can be used to include, or exclude, certain paths to be used by the worker functions. Having a _routes.json file gives developers more granular control over when your Function is invoked.

This is useful to determine if a page response should be Server-Side Rendered (SSR) or if the response should use a static-site generated (SSG) index.html file instead.

By default, the Cloudflare Pages adapter does not include a public/_routes.json config, but rather it is auto-generated from the build by the Cloudflare adapter. An example of an auto-generate dist/_routes.json would be:

{
  "include": ["/*"],
  "exclude": [
    "/_headers",
    "/_redirects",
    "/build/*",
    "/favicon.ico",
    "/manifest.json",
    "/service-worker.js",
    "/about"
  ],
  "version": 1
}

In the above example, it's saying all pages should be SSR'd. However, the root static files such as /favicon.ico and any static assets in /build/* should be excluded from the Functions, and instead treated as a static file.

In most cases the generated dist/_routes.json file is ideal. However, if you need more granular control over each path, you can instead provide you're own public/_routes.json file. When the project provides its own public/_routes.json file, then the Cloudflare adapter will not auto-generate the routes config and instead use the committed one within the public directory.

Context

You may access Cloudflare Page's environment variables in the endpoint method's platform param:

export const onRequest = async ({ platform }) => {
  const secret = platform.env['SUPER_SECRET_TOKEN'];
};

Additionally, you may import the RequestHandler and PlatformCloudflarePages types to have have type completions in your editor.

import { type RequestHandler } from '@builder.io/qwik-city';
import { type PlatformCloudflarePages } from '@builder.io/qwik-city/middleware/cloudflare-pages';
 
export const onGet: RequestHandler<PlatformCloudflarePages> = ({ platform }) => {
  //...
};