Deploying to Cloudflare Pages instead of Worker Sites?

[Boscop]

The doc says:

Would it be possible to deploy to Cloudflare Pages instead of Worker Sites? :)

[9oelM]

@Boscop hey thanks for the issue. Let me have a look within this month.

[DylanRJohnston]

According to the cloudflare docs it's actually pretty simple. You just delegate the request to a new Env binding ASSETS. https://developers.cloudflare.com/pages/functions/advanced-mode/#set-up-a-function.

I wrote a small interop method to achieve this

pub fn fetch_assets(env: &worker::Env, req: worker::Request) -> worker::Result<worker::Response> {
    let assets = js_sys::Reflect::get(self, &JsValue::from("ASSETS"))?;
    if assets.is_undefined() {
        return Err("ASSETS is not defined on Env".into());
    }

    let fetch =
        js_sys::Reflect::get(&assets, &JsValue::from("fetch"))?.dyn_into::<js_sys::Function>()?;

    Ok(fetch
        .call1(&assets, req.inner())?
        .dyn_into::<web_sys::Response>()?
        .into())
}

Then when constructing the router

    .leptos_routes(leptos_cloudflare::generate_route_list(App))
    .get("/static/*", |req, ctx| fetch_assets(&ctx.env, req))
    .post_async("/api/:fn_name", leptos_cloudflare::handle_server_fns)
    .run(req, env)
    .await

[DylanRJohnston]

Actually after more investigation you actually don't want to do this as you'll be charged for fetching the static assets as any invocation of the worker counts. Instead you want a _routes.json as outlined in the docs. For example,

{
  "version": 1,
  "include": ["/*"],
  "exclude": ["/pkg/*"]
}

Then you don't need any routing for assets within the worker router and all fetching of static assets will be free.

On a purely static project, Pages offers unlimited free requests. However, once you add Functions on a Pages project, all requests by default will invoke your Function. To continue receiving unlimited free static requests, exclude your project’s static routes by creating a _routes.json file.

[DylanRJohnston]

This is an example of what the output of the build directory looks like when using pages.

Where the _worker.js is the shim from the cloudflare docs.

import * as imports from "./index_bg.js";
export * from "./index_bg.js";
import wkmod from "./index_bg.wasm";
import * as nodemod from "./index_bg.wasm";

if (typeof process !== "undefined" && process.release.name === "node") {
  imports.__wbg_set_wasm(nodemod);
} else {
  const instance = new WebAssembly.Instance(wkmod, {
    "./index_bg.js": imports,
  });
  imports.__wbg_set_wasm(instance.exports);
}

imports.start?.();

export default {
  fetch: imports.fetch,
  scheduled: imports.scheduled,
  queue: imports.queue,
};

Although I should probably change the name of the client side bundle in pkg from index so it's not so easy to confuse it with the server side index.