Use Cloudflare Workers Sites

A guide on how to publish a Routify static site to a Cloudflare Worker. Note this is a community written guide with contributions from Géminis Estudio & Aleš Vaupotič.

Prerequisites

• You have already configured Wrangler for your project.
• (OPTIONAL) I like to install Wrangler as a dev dependency (npm i -D @cloudflare/wrangler) and add the commands to package.json so that I don’t have to globally install Wrangler:

"scripts": {
      "dev": "run-p routify nollup",
...
      "wrangler:publish": "wrangler publish",
      "wrangler:preview": "wrangler preview --watch"
   },

Configure Wrangler to use __app.html as index entrypoint

Cloudlare Workers Sites expects the entrypoint to be index.html, and Routify outputs __app.html. We can use the mapRequestToAsset function to remedy this:

  /* workers-site/index.js */

  /**
   * You can add custom logic to how we fetch your assets
   * by configuring the function `mapRequestToAsset`
   */
  // options.mapRequestToAsset = handlePrefix(/^/docs/)
  options.mapRequestToAsset = (request) => {
    const url = new URL(request.url);
    url.pathname = `/__app.html`;
    return mapRequestToAsset(new Request(url, request));
  };