Cloudflare Docs
Pages
Visit Pages on GitHub
Set theme to dark (⇧+D)

Advanced mode

In some cases, the built-in file path based routing and middleware system is not desirable for existing applications. You may already have a Worker that is fairly complex and/or would be tedious to splice it up into Pages' file-based routing system. For these cases, Pages offers developers the ability to define a _worker.js file in the output directory of your Pages project.

When using a _worker.js file, the entire /functions directory is ignored – this includes its routing and middleware characteristics. Instead, the _worker.js file is deployed as is and must be written using the Module Worker syntax. If you have never used Module syntax, refer to the JavaScript modules blog post to learn more. Using Module Workers enables JavaScript frameworks to generate a Worker as part of the Pages output directory contents.

Your custom Module Worker will assume full control of all incoming HTTP requests to your domain. Because of this, your custom Worker is required to make and/or forward requests to your project’s static assets.

_worker.js
export default {
async fetch(request, env) {
const url = new URL(request.url);
if (url.pathname.startsWith('/api/')) {
// TODO: Add your custom /api/* logic here.
return new Response('Ok');
}
// Otherwise, serve the static assets.
// Without this, the Worker will error and no assets will be served.
return env.ASSETS.fetch(request);
},
}
// Note: You would need to compile your TS into JS and output it as a _worker.js file. We don't read _worker.ts
interface Env {
ASSETS: Fetcher;
}
export default {
async fetch(request: Request, env: Env) {
const url = new URL(request.url);
if (url.pathname.startsWith('/api/')) {
// TODO: Add your custom /api/* logic here.
return new Response('Ok');
}
// Otherwise, serve the static assets.
// Without this, the Worker will error and no assets will be served.
return env.ASSETS.fetch(request);
},
}

The env.ASSETS.fetch() function will allow you to send the user to a modified path which is defined through the url parameter. env is the object that contains your environment variables and bindings. ASSETS is a default Function binding that allows communication between your Function and Pages' asset serving resource. fetch() calls to Pages' asset-serving resource and serves the requested asset.

Then after placing your _worker.js file in your output directory, deploy your project normally through your git integration.