How to Use Puppeteer With Firebase Cloud Functions

Source code for How to Use Puppeteer With Firebase Cloud Functions on Github

Cloud Functions v2.0 provides support for Puppeteer, which means using headless chrome in a serverless environment is now possible. In the following lesson, you will learn how to setup Puppeteer in a Firebase Function and use it to perform serverside rendering of any site that lives on internet.

Potential use cases for headless chrome in Firebase include:

• Serverside Rendering and Prerendering
• Webcrawlers and Scrapers
• End-to-End and Performance Testing

Setting up Puppeteer in Firebase Cloud Functions

Let’s make sure we have the latest version of the Firebase CLI Tools and initialize functions.

npm install firebase-tools@latest -g

firebase init functions
# choose TypeScript

cd functions
npm install puppeteer

Using Node8 in a Firebase Function

Puppeteer requires Node8 or greater, so we need to setup that runtime in the package.json in the functions directory.

{
  // ...omitted
  "engines": {
    "node": "8"
  }
}

Update your TS config for the DOM

Puppeteer is a web browser, hence it uses the DOM. By default, the tsconfig.json for functions does not include the the DOM lib - let’s change that.

{
  "compilerOptions": {
    "lib": ["es7", "dom"], // <-- here
    // ...
  }
}

Allocate More Memory to a Function

Puppeteer requires a good amount of memory. Let’s setup an HTTP function and give it a higher memory allocation by chaining runWith.

import * as functions from 'firebase-functions';
import * as puppeteer from 'puppeteer';


export const render = functions.runWith({ memory: '1GB' })

Notice how the render function below has 1GB of memory on runs on Node8

Basic Web App Rendering Function

The function below visits a webpage, renders it (including its JavaScript), and responds with the content in that page.

This function is essentially a proxy browser that can be used by passing the desired url as a query parameter: https://your-function-url.net/render?requestURL=https://yahoo.com

export const render = functions
  .runWith({ memory: '1GB' })
  .https.onRequest(async (request, response) => {

    // Launch a browser
    const browser = await puppeteer.launch({
      headless: true,
      args: ['--no-sandbox', '--disable-setuid-sandbox']
    });

    // Pass a URL via a query param
    const requestURL = request.query.requestURL;

    // Visit the page a get content
    const page = await browser.newPage();

    await page.goto(requestURL, { waitUntil: 'networkidle0' })

    const content = await page.content();

    // Send the response
    response.status(status).send(content);
  });

And that’s all there is to it. You now have access to all the awesomeness of Puppeteer in a Firebase Cloud Function.