Skip to content

Running on alpine #24

@PJUllrich

Description

@PJUllrich

I encountered a range of dependency problems, when I tried to run this in an alpine docker container. I wanted to share how to make this run with (elixir) puppeteer-pdf=1.0.3 and (node) puppeteer-pdf=1.2.0. The main source of making this work was the documentation on the official Puppeteer GitHub page.

Prepare your alpine Docker container

I used this Dockerfile for building the container:

RUN apk add --update 
RUN apk update && apk upgrade && \
    echo @edge http://nl.alpinelinux.org/alpine/edge/community >> /etc/apk/repositories && \
    echo @edge http://nl.alpinelinux.org/alpine/edge/main >> /etc/apk/repositories && \
    apk add --no-cache \
    nodejs \
    nodejs-npm \
    inotify-tools \
    chromium@edge=~73.0.3683.103 \
    nss@edge \
    freetype@edge \
    freetype-dev@edge \
    harfbuzz@edge \
    ttf-freefont@edge

ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true
RUN npm install puppeteer-pdf@1.2.0 puppeteer@1.12.2 -g

COPY assets/config/puppeteer-pdf.js /usr/lib/node_modules/puppeteer-pdf

Set launch arguments in puppeteer-pdf.js

Change the following line in your /usr/lib/node_modules/puppeteer-pdf/puppeteer-pdf.js file:

# Before
const browser = await puppeteer.launch({args: ["--no-sandbox"] });

# After
const browser = await puppeteer.launch({executablePath: '/usr/bin/chromium-browser', args: ["--no-sandbox", "--disable-software-rasterizer", "--headless", "--disable-gpu", "--disable-dev-shm-usage"] });

Now, you "should" be able to use the (elixir) puppeteer-pdf library on alpine as well!

Problems encountered

Just for documentation purposes, I'm adding some error logs that I've encountered until I found this solution.

Without settting the --disable-gpu and --disable-software-rasterizer flag

Failed to load /usr/lib/chromium/swiftshader/libGLESv2.so: Error loading shared library /usr/lib/chromium/swiftshader/libGLESv2.so: No such file or directory

Bonus: Insert your own .css file.

In your puppeteer-pdf.js file, add the following line:

...  
# Add the following line:
await page.addStyleTag({path: '/src/priv/static/css/app.css'}); // <--- Add this line
await page.pdf(options);

await browser.close();
...

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions