website about rectangles
Cloudflare's wrangler CLI can be used to preview a production build locally. To start a local server, run:
npm run serve
Then visit http://localhost:8787/
Cloudflare Pages are deployable through their Git provider integrations.
If you don't already have an account, then create a Cloudflare account here. Next go to your dashboard and follow the Cloudflare Pages deployment guide.
Within the projects "Settings" for "Build and deployments", the "Build command" should be npm run build
, and the "Build output directory" should be set to dist
.
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.
By default, the Cloudflare pages adaptor does not include a public/_routes.json
config, but rather it is auto-generated from the build by the Cloudflare adaptor. 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 adaptor will not auto-generate the routes config and instead use the committed one within the public
directory.