How to access local HTML file with Puppeteer?

I have a Cloudflare Worker that I want to take a screenshot of a local HTML file. I for the love of god can't figure how to open that file or access any of the file system on a worker. I'm using Cloudflare Browser Rendering to and Cloudflare's fork of Puppeteer. I tried to hard code the HTML and CSS in my JS but I found that I can't easily hard code in a font file which I need. Any ideas?
async function generateScreenshot(env) {
const browser = await puppeteer.launch(env.MYBROWSER);
const page = await browser.newPage();

// How do I access my HTML including CSS, fonts, and images?
await page.goto('src/html/index.html');

const screenshot = await page.screenshot();

return screenshot;
}
async function generateScreenshot(env) {
const browser = await puppeteer.launch(env.MYBROWSER);
const page = await browser.newPage();

// How do I access my HTML including CSS, fonts, and images?
await page.goto('src/html/index.html');

const screenshot = await page.screenshot();

return screenshot;
}
Here is the file structure I'm dealing with:
src/
│ index.js
└───html/
│ index.html
│ style.css
├───fonts/
│ customFont.woff2
└───images/
attachment.png
src/
│ index.js
└───html/
│ index.html
│ style.css
├───fonts/
│ customFont.woff2
└───images/
attachment.png
Let me know if any other information is needed.
9 Replies
Gravite2090
Gravite20903mo ago
You can not access the filesystem on a worker. I'm not sure puppeteer would even deploy to cloudflare since fs is not implemented in node compatibility (yet - docs say coming soon) as a hold over you may want to use the new beta support for containers so that you can run your worker on node instead of workerd. or see if you can work the browser rendering api to screenshot what you want https://developers.cloudflare.com/api/resources/browser_rendering/subresources/screenshot/methods/create/
Cloudflare API | Browser Rendering › Screenshot › Get Screenshot
Interact with Cloudflare's products and services via the Cloudflare API
Gravite2090
Gravite20903mo ago
Sorry! I just read this: "I'm using Cloudflare Browser Rendering to and Cloudflare's fork of Puppeteer." I think you need to host your html on r2 and not try to load it from the file system
Ryan
RyanOP3mo ago
I'm looking at the REST API like you linked to but I can't figure how to send my HTML, CSS, images, and fonts. It looks like I can't just send files but need to embed all the styles into a single HTML file. I don't really know how to get fonts or images (maybe base64 but that makes things less readable) https://developers.cloudflare.com/browser-rendering/rest-api/screenshot-endpoint/
Cloudflare Docs
/screenshot - Capture screenshot
The /screenshot endpoint renders the webpage by processing its HTML and JavaScript, then captures a screenshot of the fully rendered page.
Ryan
RyanOP3mo ago
I'll probably go down this path. Can you link me any documentation on how to use R2? I figured out how to create a bucket and edit my configuration to access it. I just need to understand how to upload my files and then access them from code (JS).
Razboy20
Razboy203mo ago
This is kind of the inverse of what you’re asking for, but hopefully helps you get on the right track: https://developers.cloudflare.com/browser-rendering/workers-bindings/browser-rendering-with-do/
Cloudflare Docs
Deploy a Browser Rendering Worker with Durable Objects
By following this guide, you will create a Worker that uses the Browser Rendering API along with Durable Objects to take screenshots from web pages and store them in R2.
Razboy20
Razboy203mo ago
Thinking about the problem, I’m not sure what the best solution would be here since (assuming you would want the bucket to be private), it might be difficult to view it through puppeteer. You may want to setup an R2 bucket to be privately accessible, but require some secret Cookie/auth to access through WAF: https://developers.cloudflare.com/r2/buckets/public-buckets/#access-control
Cloudflare Docs
Public buckets
Public Bucket is a feature that allows users to expose the contents of their R2 buckets directly to the Internet. By default, buckets are never publicly accessible and will always require explicit user permission to enable.
Razboy20
Razboy203mo ago
Or alternatively you could have an asset worker alongside the durable object which serves the files from R2
Ryan
RyanOP2mo ago
Do you think I can use static assets for this or is it used for a different purpose? https://developers.cloudflare.com/workers/static-assets/ It looks like for website hosting but I wonder if I can just use it to store website files and access/serve them to Puppeteer. Related GH discussion: https://github.com/cloudflare/workers-sdk/issues/1162
Cloudflare Docs
Static Assets
Create full-stack applications deployed to Cloudflare Workers.
GitHub
RFC: Static Assets with Workers · Issue #1162 · cloudflare/worker...
This one is pretty straightforward. As a website developer, I would like to serve "static" assets on the internet. These are not user generated content, but usually stuff like html file, ...
Ryan
RyanOP2mo ago
I figured out how to do this with bundling but now my fonts don't load when I take a screenshot with Puppeteer.
Cloudflare Docs
Bundling
Review Wrangler's default bundling.

Did you find this page helpful?