That's an old file, you don't need it anymore 🙂

Hi folks, Newbie to the CloudFlare stack. I have a react app that I want to convert to SSR for perf reasons. Rewriting the app in next.js or remix is not an option. So, I want to dynamically write the

index.html

that hosts the react app. My plan is to use

functions/index.js

and write this html response dynamically. This will allow me to pump more __initial__ HTML. The react app would then hydrate from existing html on the page instead of creating the HTML. This shall lead to perf improvements. Wrt to this, I have the following qs: - How can I make requests from

functions/index.js

to my backend api? -

functions/[index.js]

needs to write the

<script/>

tag in the html response

HEAD

. For that, I need to copy the output of

webpack

when I run build (webpack fingerprints my static js assets) and put that in the HTML response inside my

functions/index.js

. Does

functions/index.js

have a

FileReader

to scan the static assets in the project?

- to make calls to some service just use

fetch

- functions don't have access to file system, you can, however, import HTML into your function, look here https://developers.cloudflare.com/pages/platform/functions/module-support/, note that you can only import HTML, bin, wasm or JS/TS. Probably also json but I haven't tried that. To rewrite your head element in you would use HTMLRewriter https://developers.cloudflare.com/workers/runtime-apis/html-rewriter#selectors

I've got a question of my own. I'm trying to use HTMLRewriter as sort of templating engine a little, since my pages aren't that complicated. The thing I'm trying to do is to inject some HTML in a HTMLRewriter handler

on

N number of times. I would expect the next

on

handler to catch it and wire the logic to my handler, but it does not. Does HTMLRewriter not include dynamically injected content by previous handlers? I also tried to just manipulate the HTML in the working handler but I get

[mf:err] GET /: RuntimeError: memory access out of bounds

when I try to manipulate freshly injected content, for example from this code:

element(element) {
    this.results.forEach((result, i) => {
        const newDetails = element.after(descriptionTemplate, { html: true });
        newDetails.setAttribute('id', result.id);
    })
}

thanks

I went to port my site which was in a Worker using raw fetch and Response over to a Hano app in Pages but I lost the env variable scope. Does anyone know if that is available in the ctx variable or how I can access env so that I can pull my templates from R2 which functioned as a raw Worker but now in Hano I am not sure how to bring it back into scope so I can ref env.MY_BUCKET ?

In hono, it's

env

on the context, if you named it

ctx

, it should be

ctx.env.MY_BUCKET

There's an example here on their website, with Typescript: https://hono.dev/getting-started/cloudflare-workers#bindings

Thank you! I tried to do anonymous function but didn't have all those details on how to ref it.

Hmmm the build keeps on failing on the

type Bindings = {

not expecting Bindings

Like it would need a prefixing struct classifier or something but that didn't work either

Thanks @GeorgeTailor for your reply. Based on that, Here's my very simple

functions/index.js

import html from "../dist/index.html";

export function onRequestGet(context) {
  console.log("Request received", context.params.index);
  var newHtml = new HTMLRewriter()
  .on('title', {
    element: (element) => {
      element.setInnerContent('New Title!');
    },
  })
  .transform(html);

  return new Response(newHtml, {
    headers: { "content-type": "text/html" },
  });
}

but I am getting the following error:

[mf:err] GET /8592f5ff-305b-4587-bdc7-985689f17922: TypeError: Cannot read properties of undefined (reading 'pipeTo')    at HTMLRewriter.transform (/Users/rajatmittal/.nvm/versions/node/v16.18.0/lib/node_modules/wrangler/node_modules/@miniflare/html-rewriter/src/rewriter.ts:75:26)    at onRequestGet

I think the issue I am having the docs look like typescript and I am coding in JS maybe

type isn't a keyword it is recognizing

Yeah, that's just a TypeScript thing

Yeah I don't want to switch over to TypeScript yet lol

HTMLRewriter runs on ReadableStreams rather than just text/strings - although that error definitely isn't ideal

Hopefully I can just pass it as a regular object

type

would disappear when transpiled to JS, it serves no purpose and isn't a keyword in JS

If you're not using TS, you don't need it at all

try this one:

import html from "../dist/index.html";

export function onRequestGet(context) {
  console.log("Request received", context.params.index);
  const res = new Response(html, {
    headers: { "content-type": "text/html" },
  });

  return new HTMLRewriter()
  .on('title', {
    element: (element) => {
      element.setInnerContent('New Title!');
    },
  })
  .transform(res);
}

I see. I was feeding the ReWriter a string literal whereas it expects raw HTML

it expects a ReadableStream as @kian mentioned

You are saying if I am using JS that it will inherit env without passing the bindings struct?

The bindings isn't a struct, it's just telling TypeScript what exists on your

env

for auto-complete and typechecking

It'll have the same bindings if that's there or not

Somehow messing up here since c.text() is no longer a function and I don't see any of my console.log() entries >_<

app.get("/", async (c, next) => {
    var vdata = await getTpls(c.env);
    console.log('ENV: '+c.env);
    console.log('VDATA: '+vdata);

    return c.text(Mustache.render(vdata.index, vdata, vdata));
});

Is this Hono middleware?

getTpls needs the c.env so it can get my templates from R2

It's just a function I made