How to run Puppeteer (Headless Chrome) using Google Firebase Cloud Functions
Jesus Manuel Olivas
June 04, 2019
After following a discussion at the GatsbyJS discord space about running puppeter using a cloud function. I decided to give it a try and in this post I will share my experience.
What is Puppeteer?
Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default.
Automate form submission, UI testing, keyboard input, etc.
For te purpose of tihs example we are going to take advantage of the screenshot generation.
Which Cloud Provider?
For the purpose of this example. I will be using a Cloud Function from Google Firebase service
Adding the puppeteer dependency
To use Puppeteer in your project using npm execute on your functions directory:
npm install --save puppeteer
The Firebase Cloud Function
The following example creates a new http function to handle the request using the <https://path-to-your-project.web.app>/screeshot url. This returns a screenshot of the provided url query parameter.
Note the runWith method is used in order to set timeout and memory allocation used on the cloud function execution.
How to use it?
Passing the url and using the default width and height values /screenshot?url=https://jmolivas.com/
Passing the url and width and height values /screenshot?url=https://jmolivas.com/&width=1200&height=1600
Forcing full page /screenshot?url=https://jmolivas.com/&full=true
Ready to embrace the JAMstack revolution?
Build fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers, databases and worry about traffic spikes.