## Objective: PDF Generation with Serverless Functions Run `puppeteer` on Vercel's `Serverless Functions` and, at the same time a generate PDF. ## Understanding the Error 500: The Limitations of Chromium on AWS Lambda Running `puppeteer` on Vercel will return an `Error 500` because `puppeteer` relies on a version of `Chromium` which is too large to be included on a AWS Lambda. ## Optimizing Puppeteer for Vercel: A Lightweight Solution Vercel's `Serverless Functions` are powered by **AWS Lambdas**, which have a 50MB limit on the deployment package size. Chromium, which is required by Puppeteer, is too large to be included in our Lambda function. In order for Puppeteer to be included, a smaller version of Chromium is required. - `puppeteer-core` instead of `puppeteer` on `production` - `@sparticuz/chromium`. ## The Solution ### Getting Started: Essential Packages for Serverless PDF Creation ```bash # Puppeteer pnpm add @sparticuz/chromium@123.0.1 pnpm add puppeteer-core@21.9.0 pnpm add -D puppeteer@21.9.0 # Implement a PDF pnpm add @onedoc/react-print ``` ### Configuration: Setting Up Puppeteer-Core with Custom Chromium I have created a [Server Action](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations), but feel free to use it on a route handler. ```typescript export async function makdePDF(html: string) { // Initiate the browser instance let browser: Browser | undefined | null; // Check if the environment is development if (process.env.NODE_ENV !== "development") { // Import the packages required on production const chromium = require("@sparticuz/chromium"); const puppeteer = require("puppeteer-core"); // Assign the browser instance browser = await puppeteer.launch({ executablePath: await chromium.executablePath(), headless: chromium.headless, ignoreHTTPSErrors: true, defaultViewport: chromium.defaultViewport, args: [...chromium.args, "--hide-scrollbars", "--disable-web-security"], }); } else { // Else, use the full version of puppeteer const puppeteer = require("puppeteer"); browser = await puppeteer.launch({ headless: "new", }); } // Create a PDF if (browser) { const page = await browser.newPage(); await page.setContent(html); const pdfBuffer = await page.pdf({ format: "a4", printBackground: true, margin: { top: 80, bottom: 80, left: 80, right: 80, }, }); await browser.close(); return pdfBuffer; } return null; } ``` ### Crafting PDFs: Serverless Document Creation Follow the tutorial on [React Print](https://react.onedoclabs.com/introduction). ```jsx export function PdfCv() { return (

{cv.title}

{cv.name}

// ...

); } ``` ### Facilitating Downloads: Building a Route for Serverless PDF Downloads In order to make the PDF available for download, a route handler is required to be created with the appropriate headers. I personally created the route handler in the `/app` directory following the below structure: ```bash - /app - /cv - page.tsx - /download - route.tsx ``` The following snippet is the route handler for downloading the PDF: ```tsx // /download/route.tsx import { compile } from "@onedoc/react-print"; import { PdfCv } from "../_components/pdf-cv"; import { makePDF } from "../actions/make-pdf"; import postcss from "postcss"; import theme from "../../../tailwind.config"; import path from "path"; import fs from "fs"; async function importTailwindGlobals() { const cssPath = path.join(__dirname, "../../../../../app/globals.css"); try { const cssContent = fs.readFileSync(cssPath, "utf8"); return cssContent; } catch (error) { console.error("Error reading the Tailwind Globals css file:", error); } } export async function GET(request: Request) { try { // Create a new header const headers = new Headers(); // Compile tailwind css const css = await postcss([ require("tailwindcss")({ ...theme, corePlugins: { preFlight: false }, }), ]) .process(`${globals}`, { from: undefined }) .then((result) => result.css); // Compile the PDF const html = await compile(

I'm Nabil.

Latest Articles

Latest Notes