Using Puppeteer on Netlify

Some time ago an acquaintance started a danish version of “Word a Week” on Twitter. She would every week tweet a word that she thought wasn’t used enough. It could be a real word or some old slang. I found it very funny and thought “Why isn’t there a site which lists them”. So long story short I started working on it and https://ugensord.dk was born (I got her permission first!).

The site is very simple. It uses Unsplash to show a background and then a simple black box in the middle with a word, its meaning, and sometimes a quote. It is basically perfect to auto generate twitter images.

As the title says, the whole thing is hosted on Netlify and as part of my build project, I use Puppeteer to take a screenshot of a rendered template.

Getting Puppeteer to work on Netlify was quite a hassle until I stumbled upon a library called chrome-aws-lambda which exposes some promises to get the executeablePath etc.

Note: It is important to either add puppeteer-core or puppeteer as a dependency depending on your environment. I use Docker with node:14-alpine and installed chromium via APK.

The code is fairly simple. It uses chrome-aws-lambda to access puppeteer instead of requiring that package directly.

Note: I am forcing headless to be true so that I don’t need to set AWS_LAMBDA_FUNCTION_NAME and trick the package into going headless.

Bonus: Here is the Dockerfile I am using with this project.