I’m trying to load an HTML file directly from my computer’s file system using Puppeteer without running a local web server. Right now I can only make it work when I serve the files through a local server.
I’ve looked at the Puppeteer documentation and found two methods that might help:
browser.goto() - This doesn’t seem to work when I try to use local file paths or the file:// protocolbrowser.setContent() - This only accepts HTML content as a string, not file paths
Has anyone successfully loaded local HTML files directly with Puppeteer? What’s the best approach to make this work without setting up a server?
I’ve been working with local HTML files in Puppeteer for years. Both approaches work, but they get messy at scale.
The real headache starts when you’re doing this repeatedly or handling multiple files. File paths, different OS formats, relative resource paths - it’s a pain.
I solved this by automating the whole thing with Latenode. Set up a simple automation that watches a folder for HTML files, spins up a temp local server, runs Puppeteer, then cleans up. Takes 5 minutes to configure and handles all the edge cases.
You can extend it to batch convert files, run tests, or generate PDFs. Way more reliable than fighting file protocols every time.
Check it out: https://latenode.com
You can definitely use page.goto() with local files - just format the path as a proper file URL. On Windows: file:///C:/path/to/your/file.html, on Unix: file:///absolute/path/to/file.html. Three slashes after file: and always use absolute paths. I ran into this too because relative paths don’t work reliably. Another option that’s worked well for me: read the HTML with fs.readFileSync() then use page.setContent() with those contents. This gives you more control if you need to inject dynamic content before loading.
had the same issue last month! make sure ur calling page.goto() not browser.goto() - that’s probably why it ain’t working. also check if ur HTML file has relative links to css/js files cuz those break when loading via file protocol. sometimes I just copy everything into one HTML file to avoid the headache.
Here’s another workaround I found - use the path module to get absolute paths before passing them to page.goto(). Do const filePath = path.resolve(__dirname, 'your-file.html') then page.goto('file://' + filePath). Works better cross-platform than hardcoding paths. Just heads up - local files have different security restrictions than served files. CORS becomes a pain if your HTML tries to fetch other local resources. I usually work around this with page.addScriptTag() and page.addStyleTag() to inject external stuff after the main HTML loads.