I tried just copying the HTML file as a string and returning that

but don't think that works... browser is having trouble loading the JS

@User I did the exact thing you're trying to do, last week. lemme put together an example

here's a half-pseudocode example:

ts
export const onRequestGet: PagesFunction<{}> = async ({ request, env, next, data }) => {
    // Get api data and page at same time
    let apiData = fetch(`INSERT API URL/whatever`).then(res => res.json());
    let pageData = await next();
    let [api, page] = await Promise.all([apiData, pageData]);

    return new HTMLRewriter().on("head", new HeadHandler(api, env)).transform(page);
};

class HeadHandler {
    private api: any;

    constructor(api: any) {
        this.api = api;
    }

    comments(comment: Comment) {
        if (comment.text.trim() !== "INJECT_META_TAGS") { return; }

        // Append twitter meta tags
        comment.after(`<meta property="twitter:card" content="summary">`, { html: true });
        comment.after(`<meta property="twitter:title" content="${this.api.title}">`, { html: true });
        comment.after(`<meta property="twitter:description" content="${this.api.description}">`, { html: true });
    }
}

Then, I just put

<!-- INJECT_META_TAGS -->

in the head of my page, and the HTMLRewriter will insert the tags after it

you can substitute out the

await next()

with however you're getting the HTML for the page, if you're not just intercepting the request/using middleware.

*if you do want to intercept, then name the file

index.ts

, then calling

next()

will return a

Promise<Response>

for index.html

That’s about what i was gonna send @pencilflip ^^

gotcha thanks for the example

i think there's some deeper issue with what i'm trying to do though...

when I do

yarn build

and then

npx wrangler pages dev build

(for my CRA app), only the home page gets rendered

if i go to any other page, like

localhost:3000/test

, it doesn't render

even if the test page just looks like this

function Test() {
  return <div>Test</div>;
}

Your function needs to intercept all requests:

functions/[[path]].js

is what i believe the file name needs to be to route everything to it

i see the problem with no functions folddr

I think you need it. My understanding was that by default, it would show a 404. I could be wrong

at least, that's how I've been building all my pages

you typically would have

[[path]].ts

which would catch all pages, then try to get it to serve

index.html

server sees

/index.html

but browser sees

/whatever-path-you-went-to

or you do

[path].ts

to only catch 1-depth "routes", then 404 everything deeper, such was

/whatever/path

Is there an SDK for Pages Functions that can be installed to properly resolve types while doing local dev?

I believe

@cloudflare/workers-types

exports a

PagesFunction

type which can be used. Is there anything else you need?

oh awesome! would it also have

HTMLRewriter

?

I also had another quick question around how the route matching works -- are the only available options

[path].ts

and

[[path]].ts

at the time being? we'd ideally like to do some type of regex matching to filter this down to a smaller set of routes.

Though, taking a step back the reason we'd like to do this is because we're assuming there's a performance cost with having every request be intercepted by a function -- are there any resources that can help me learn what the potential performance impact of this would be vs. hitting the CDN directly to fetch our static site on Cloudflare Pages?

It does, yep!

Mostly, yep. The full docs can be found at https://developers.cloudflare.com/pages/platform/functions. For anything more complex like a regex match, you'd probably be better off matching the entire folder and then handling the requests manually yourself.

The perf impact of hitting a Function vs hitting the assets on Pages should be effectively zero. Maybe a millisecond or two, but Pages also uses Workers behind the scenes for most (if not all) interactions with your assets which are techncially stored in KV

Today there is a "cost" (not monetary yet) in terms of your functions account limit (100k/day etc.), but in the future, that limit won't apply to requests that just hit static assets, and only to functions that do something

That's amazing! Thanks so much for the helpful replies 🙂