CD
Cloudflare Developers•4w ago
Sam

Hono + Workers + Browser rendering: How to screenshot a localhost path?

Hi 👋🏼 I'm following this example at https://developers.cloudflare.com/browser-rendering/workers-binding-api/screenshots/ How do I point puppeteer to this page for the screenshot? Is there a trick to get the "localhost" from withing the worker? I have a worker that has a hono function returning simple HTML data, that I need to screenshot 
// This returns the Dashboard HTML
app.get('/api/dashboard/', (c) => {
  return c.html(
      `<html lang="en">
        <head>
        <title>School dashboard</title>
      </head>
      <body>
        <h1>Welcome to my dashboard</h1>
        <p>
          More content will come here soon.
        </p>
      </body>
    </html>`
    )
})
// This returns the Dashboard HTML
app.get('/api/dashboard/', (c) => {
  return c.html(
      `<html lang="en">
        <head>
        <title>School dashboard</title>
      </head>
      <body>
        <h1>Welcome to my dashboard</h1>
        <p>
          More content will come here soon.
        </p>
      </body>
    </html>`
    )
})
Cloudflare Docs
Deploy a Browser Rendering Worker · Browser Rendering docs
By following this guide, you will create a Worker that uses the Browser Rendering API to take screenshots from web pages. This is a common use case for browser automation.
1 Reply
Sam
SamOP•4w ago
Solved with Claude's help: 
  // Use the same host as the current request
  const host = new URL(c.req.url).origin;
  let dashboardUrl = `${host}/api/dashboard/`;
  // Use the same host as the current request
  const host = new URL(c.req.url).origin;
  let dashboardUrl = `${host}/api/dashboard/`;

Did you find this page helpful?