The optimization is, the bigger it gets, the more time it takes to parse and execute (not much, it's

HHockey Can you write a normal function that adds content to an existing static page or ...

G

GregBrimble•11/20/21, 10:13 PM

It's what HTMLRewriter was built for, but you can definitely do it yourself if you prefer:

response = await fetch()
text = await response.text()
text += '<h1>Hello</h1>'
return new Response(text)

response = await fetch()
text = await response.text()
text += '<h1>Hello</h1>'
return new Response(text)

response = await fetch()
text = await response.text()
text += '<h1>Hello</h1>'
return new Response(text)

response = await fetch()
text = await response.text()
text += '<h1>Hello</h1>'
return new Response(text)

HHockey Can you write a normal function that adds content to an existing static page or ...

I

itsmatteomanfOP•11/20/21, 10:13 PM

-> HTMLRewriter.

G

GregBrimble•11/20/21, 10:14 PM

HTMLRewriter will give you better performance.

I

itsmatteomanfOP•11/20/21, 10:14 PM

Also, note to everyone. The employee here is @gregbrimble, I'm not

G

GregBrimble•11/20/21, 10:15 PM

I'd be happy to chat about how best to use HTMLRewriter if you've got a specific example of problem you're trying to solve

Iitsmatteomanf The optimization is, the bigger it gets, the more time it takes to parse and exe...

G

gerred•11/20/21, 10:15 PM

totally, I'm trying not to use the embedding of v8 we've written at my startup unless it's on our clients' hardware (so basically, move our backend over to workers if we can), i've been deep in this "hell" (not really hell, but it's intricate obviously)

G

gerred•11/20/21, 10:15 PM

the clarification there suggests though for us I should have a separate API set of workers from what we would do with pages for the auth/etc parts of the service.

G

gerred•11/20/21, 10:16 PM

@gregbrimble form submitted (among many others), thank you for answering on your weekend.

Ggerred totally, I'm trying not to use the embedding of v8 we've written at my startup ...

G

GregBrimble•11/20/21, 10:17 PM

If your site has static assets, and you're wanting to deploy everything together, then full-stack Pages is what I'd recommend going with.

If it makes sense for your application, stick with the

functions

functions

dir handlers.

_worker.js

_worker.js

is a primarily an escape-hatch for either people with existing Workers, or framework authors.

G

gerred•11/20/21, 10:17 PM

@gregbrimble that makes sense, thank you.

MMark Hood I wasn’t aware that was needed… back to the docs I go! Thanks for the advice.

I

itsmatteomanfOP•11/20/21, 10:17 PM

The docs for

wrangler@beta

wrangler@beta

aren't great, but it's

beta

beta

after all. Look at @gregbrimble's stream at https://twitch.tv/gregbrimble

G

GregBrimble•11/20/21, 10:17 PM

If you need stability though, Workers have been around since (I think) 2017, so are a lot more mature than the beta Pages functions

MMark Hood I wasn’t aware that was needed… back to the docs I go! Thanks for the advice.

G

GregBrimble•11/20/21, 10:18 PM

npx wrangler pages dev --help

npx wrangler pages dev --help

should give you all the options you have available

G

gerred•11/20/21, 10:18 PM

oh yeah, that I'm familiar with! just for the first time this has all come together in a way I think we can fully put something together and drop a crap ton of tools. nice work.

HHockey So the content that is currently in the weather.JS file, I would like to put it ...

G

GregBrimble•11/20/21, 10:19 PM

Cool. You want that available on the homepage or on

/weather

/weather

?

G

GregBrimble•11/20/21, 10:20 PM

Alrighty, so you'll need a

functions/index.ts

functions/index.ts

or

functions/index.js

functions/index.js

file, and yeah, we can use HTMLRewriter for it.

G

GregBrimble•11/20/21, 10:21 PM

In your static assets, I'd create a placeholder of where you want this content to appear.

        <p>
            I also enjoy constructing 
            <a href="/crosswords">crossword puzzles</a>
            .
        </p>
        <p>
            I use 
            <a href="https://www.mynetdiary.com">MyNetDiary</a>
             to track 
            <a href="/diet.html" style="color:#49D6EA !important;">what I eat</a>
            .
        </p>
        <p id="weather">Could not load the weather</p>
    </article>

        <p>
            I also enjoy constructing 
            <a href="/crosswords">crossword puzzles</a>
            .
        </p>
        <p>
            I use 
            <a href="https://www.mynetdiary.com">MyNetDiary</a>
             to track 
            <a href="/diet.html" style="color:#49D6EA !important;">what I eat</a>
            .
        </p>
        <p id="weather">Could not load the weather</p>
    </article>

        <p>
            I also enjoy constructing 
            <a href="/crosswords">crossword puzzles</a>
            .
        </p>
        <p>
            I use 
            <a href="https://www.mynetdiary.com">MyNetDiary</a>
             to track 
            <a href="/diet.html" style="color:#49D6EA !important;">what I eat</a>
            .
        </p>
        <p id="weather">Could not load the weather</p>
    </article>

        <p>
            I also enjoy constructing 
            <a href="/crosswords">crossword puzzles</a>
            .
        </p>
        <p>
            I use 
            <a href="https://www.mynetdiary.com">MyNetDiary</a>
             to track 
            <a href="/diet.html" style="color:#49D6EA !important;">what I eat</a>
            .
        </p>
        <p id="weather">Could not load the weather</p>
    </article>

G

GregBrimble•11/20/21, 10:21 PM

And we'll target #weather with HTMLRewriter.

G

GregBrimble•11/20/21, 10:26 PM

// ./functions/index.js

export const onRequestGet = ({ request, next }) => {
  // Get the static asset response
  const response = await next()
  
  const { latitude, longitude } = request.cf

  // Get weather
  const weatherResponse = await fetch(`https://myweather.service/${latitude},${longitude}`)
  const weatherData = await weatherResponse.json()
  const { isRaining } = weatherData

  // Find the placeholder in our static asset
  return new HTMLRewriter().on('#weather', {
    // And act on the element
    element(element) {
      // https://developers.cloudflare.com/workers/runtime-apis/html-rewriter#methods
      element.setInnerContent(isRaining ? `It is raining 🌧` : 'It is not raining ☀️')
    }
  }).transform(response) 
}

// ./functions/index.js

export const onRequestGet = ({ request, next }) => {
  // Get the static asset response
  const response = await next()
  
  const { latitude, longitude } = request.cf

  // Get weather
  const weatherResponse = await fetch(`https://myweather.service/${latitude},${longitude}`)
  const weatherData = await weatherResponse.json()
  const { isRaining } = weatherData

  // Find the placeholder in our static asset
  return new HTMLRewriter().on('#weather', {
    // And act on the element
    element(element) {
      // https://developers.cloudflare.com/workers/runtime-apis/html-rewriter#methods
      element.setInnerContent(isRaining ? `It is raining 🌧` : 'It is not raining ☀️')
    }
  }).transform(response) 
}

// ./functions/index.js

export const onRequestGet = ({ request, next }) => {
  // Get the static asset response
  const response = await next()
  
  const { latitude, longitude } = request.cf

  // Get weather
  const weatherResponse = await fetch(`https://myweather.service/${latitude},${longitude}`)
  const weatherData = await weatherResponse.json()
  const { isRaining } = weatherData

  // Find the placeholder in our static asset
  return new HTMLRewriter().on('#weather', {
    // And act on the element
    element(element) {
      // https://developers.cloudflare.com/workers/runtime-apis/html-rewriter#methods
      element.setInnerContent(isRaining ? `It is raining 🌧` : 'It is not raining ☀️')
    }
  }).transform(response) 
}

// ./functions/index.js

export const onRequestGet = ({ request, next }) => {
  // Get the static asset response
  const response = await next()
  
  const { latitude, longitude } = request.cf

  // Get weather
  const weatherResponse = await fetch(`https://myweather.service/${latitude},${longitude}`)
  const weatherData = await weatherResponse.json()
  const { isRaining } = weatherData

  // Find the placeholder in our static asset
  return new HTMLRewriter().on('#weather', {
    // And act on the element
    element(element) {
      // https://developers.cloudflare.com/workers/runtime-apis/html-rewriter#methods
      element.setInnerContent(isRaining ? `It is raining 🌧` : 'It is not raining ☀️')
    }
  }).transform(response) 
}

HHockey Sounds good, I’ll follow along

G

GregBrimble•11/20/21, 10:27 PM

Untested, and just written by hand in Discord, but that should pretty much be it.

G

GregBrimble•11/20/21, 10:27 PM

More about the selectors available here: https://developers.cloudflare.com/workers/runtime-apis/html-rewriter#selectors

G

GregBrimble•11/20/21, 10:28 PM

Could also do it with async handlers: https://developers.cloudflare.com/workers/runtime-apis/html-rewriter#async-handlers

G

GregBrimble•11/20/21, 10:28 PM

No, just the homepage

G

GregBrimble•11/20/21, 10:29 PM

If it was

functions/[path].js

functions/[path].js

it would act on all URLs like this:

/
/thing
/weather

If it was

functions/[[path]].js

functions/[[path]].js

it would act on all URLs, including these:

/
- /thing
- /todos/thing

G

GregBrimble•11/20/21, 10:30 PM

https://developers.cloudflare.com/pages/platform/functions#path-segments

G

GregBrimble•11/20/21, 10:31 PM

I'm not 100%, but I imagine by "path segment", we're referring to things between

's.

G

GregBrimble•11/20/21, 10:31 PM

Certainly that's what it is for _headers and _redirects.

G

GregBrimble•11/20/21, 10:31 PM

/:product/:id

/:product/:id

/:product/:id

/:product/:id sort of thing

G

GregBrimble•11/20/21, 10:32 PM

i.e. extensions are included.

index.html = index

index.html = index

index.html = index

index.html = index

J

jersey•11/20/21, 10:32 PM

It seems like something went wrong when running

wrangler pages dev

wrangler pages dev

because I imported another file as an ES Module

wranglerlog.txt3.98KB

myfunction.js437B

Jjersey It seems like something went wrong when running `wrangler pages dev` because I i...

G

GregBrimble•11/20/21, 10:33 PM

Known bug on Windows at the moment, I'm afraid.,

J

jersey•11/20/21, 10:33 PM

when I deploy this it should work fine, right?

G

GregBrimble•11/20/21, 10:33 PM

https://github.com/cloudflare/wrangler2/issues/32

GitHub

[pages] path issue in pages-functions-compiler config on windows · ...

under windows wrangler2 fails due to an incorrect path given in the automatically generated routes.mjs config file from pages-functions-compiler. to recreate this issue: cli: npx wrangler pages dev...

Jjersey when I deploy this it should work fine, right?

G

GregBrimble•11/20/21, 10:33 PM

Looks good to me, yeah!

J

jersey•11/20/21, 10:33 PM

cool

J

jersey•11/20/21, 10:34 PM

excited to try this out

The optimization is, the bigger it gets, the more time it takes to parse and execute (not much, it's

Similar Threads

Similar Threads

Similar Threads