Back to Templates
Puppeteer on Vercel
A demonstration of how to run Puppeteer on Vercel.
Deploy on Vercel
Purpose
This repository demonstrates how to successfully deploy and run Puppeteer on Vercel. Puppeteer is a powerful Node.js library that provides a high-level API to control headless Chrome/Chromium browsers, commonly used for:
- 📸 Taking screenshots of web pages
- 📄 Generating PDFs from web content
- 🧪 Automated testing
- ⚡ Performance testing
Running Puppeteer on Vercel requires special configuration due to the large size of the Chromium binary and the size constraints of functions. This project shows you exactly how to do it.
What It Does
This Next.js application provides a simple web interface where you can:
- Enter any URL (e.g.,
https://vercel.com) - Click "Capture" to take a screenshot
- View the generated screenshot instantly
Behind the scenes, the app:
- Uses regular Puppeteer with bundled Chromium for local development
- Uses
@sparticuz/chromium-minwith a pre-packaged Chromium binary for Vercel deployment - Automatically caches the Chromium executable path to improve cold start performance
- Handles URL validation and error management
- Defaults to the provided example Chromium .tar file if no production deployment is found to allow you to use the application without a publically accessible version.
How It Works
Local Development
- Uses
puppeteerpackage with its bundled Chromium binary - Works out of the box with no special configuration
Vercel Deployment
- Build Time: The
postinstallscript extracts Chromium binaries from@sparticuz/chromiumand packages them intopublic/chromium-pack.tar - Runtime: The API route uses
@sparticuz/chromium-minto download and extract the Chromium binary from the hosted tar file - Caching: The executable path is cached in memory to avoid re-downloading on subsequent requests
Troubleshooting
Timeout errors on Vercel
Note that Vercel functions have a 10-second timeout on the Hobby plan. If screenshots are taking too long, consider upgrading to Pro for higher limits.