在静态站点上提供非生成的文件

Question

I am deploying a statically generated site using Nuxt on Cloudflare workers. It works great so far.

I generate most of my static files on generate, however, there are scenarios where I cannot generate a file, for instance, when an order has been made, I cannot generate the /order/82781 route. How can I use .htaccess to serve the, I guess index.html file?, if it doesn't exist, so vue/nuxt will take over, and send a request to find the order?

Location is: /my-account/orders/{some_id}

I have tried with this htaccess inside /my-account/orders directory:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

But that doesn't work. If I visit the URL directly I get this error:

could not find my-account/orders/wc_order_sp8DykeTNqMMO/index.html in your content namespace

Answer 1

It sounds like there are parts of your site that are not totally static. An "htaccess" file gives directions to Apache web server to handle requests dynamically, but you are not using Apache, you are using Workers. In Workers, we "configure" the web server by writing JavaScript. The good news is that unlike htaccess -- which is restricted to a narrow feature set -- in JavaScript, you can do just about anything!

When you generated your Workers Sites project with wrangler generate , it created a file called workers-site/index.js . This file was copied from a template , but you are free to edit it to add dynamic features to your site.

It sounds like what you want to do is make sure /my-account/orders/* always serves the same HTML file. Let's program that in JavaScript.

In your index.js , you'll see a comment like this:

  /**
   * You can add custom logic to how we fetch your assets
   * by configuring the function `mapRequestToAsset`
   */
  // options.mapRequestToAsset = handlePrefix(/^\/docs/)

This handlePrefix function is defined at the bottom of the file . It's actually there as an example. The example code modifies path names by stripping off a prefix.

You want to do something similar but not quite the same: You want to match paths starting with /my-account/orders/ , and then you want to remove the rest. So you could write a function like this:

function stripOrderNumber(prefix) {
  return request => {
    let url = new URL(request.url)
    if (url.pathname.startsWith("/my-account/orders/")) {
      // Treat as if the order number weren't given.
      url.pathname = "/my-account/orders/"

      // Update the Request object with the modified URL.
      request = new Request(url, request)
    }

    // Invoke default handling from here.
    // (`mapRequestToAsset` is imported from '@cloudflare/kv-asset-handler'
    // at the top of this file.)
    return mapRequestToAsset(request)
  }
}

Now go back up to the commented line and change it to:

  /**
   * You can add custom logic to how we fetch your assets
   * by configuring the function `mapRequestToAsset`
   */
  options.mapRequestToAsset = stripOrderNumber

Deploy your updated worker, and now /my-account/orders/* should be mapped to /my-account/orders/index.html !