I’ve been building an app that uses Playwright for scraping. It’s part of a SvelteKit project with the node-adapter and I’m deploying to a VPS running dokku. It wasn’t straightforward getting it working so wanted to document my solution here.
Issues installing playwright browsers in herokuish buildpack
npx playwright install --with-deps
By default, deploying a git repo to dokku uses herokuish buildbacks. Unfortunately, using Playwright’s command for installing the browsers with dependencies doesn’t work because it needs to switch to sudo. Maybe it’s possible for the build to do this but I couldn’t find any documentation. So I had to move to a dockerfile deployment, where the command can run without issue.
One note, if you have playwright
and @playwright/test
installed, make sure they are the same version. I was stuck on this for quite a while, not realizing I had different versions and so the browser version installed was different (in my case it was using the browser version from the version in @playwright/test
).
Dockerfile for SvelteKit
First, follow the instructions to add the node adapter to your project.
Then, create a Dockerfile
in the root of the project. Here’s what’s working for me:
FROM node:20-bookworm
# Set working dir
WORKDIR /app
# Copy package.json and package-lock.json
COPY package.json package-lock.json* ./
# Install dependencies
RUN npm ci
# Copy the rest of the application code
COPY . .
# Build the SvelteKit application
RUN npm run build
# I have my `npx playwright install` command in a postinstall script in my package.json
CMD ["node", "build"]
Commit and push to your dokku server. Dokku should pick up the Dockerfile automatically when you deploy, unless you have explicitly set a builder for the app.
Env variables in docker build
The last thing that tripped me up was the way that SvelteKit handles environmental variables and their use during the build. I have various references in my project using svelte’s env helpers like $env/static/private
.
There’s a few things needed to make these accessible from the build. (docs)
Update Dockerfile with build args and env variables
These env variables have to be supplied as build arguments and then set as environmental variables during the build. Here is an updated dockerfile example:
FROM node:20-bookworm
# Set working dir
WORKDIR /app
# Define build arguments
ARG ENV_VAR_1
ARG ENV_VAR_2
# Set environment variables
ENV ENV_VAR_1=$ENV_VAR_1
ENV ENV_VAR_2=$ENV_VAR_2
# Copy package.json and package-lock.json
COPY package.json package-lock.json* ./
# Install dependencies
RUN npm ci
# Copy the rest of the application code
COPY . .
# Build the SvelteKit application
RUN npm run build
# I have my `npx playwright install` command in a postinstall script in my package.json
CMD ["node", "build"]
Set env variables for dokku app
Next, set the environmental variables for the dokku app using config:set
. (docs)
Set docker build args for dokku
Lastly, set them as build args in dokku, like so:
dokku docker-options:add my-app build '--build-arg ENV_VAR_1' '--build-arg ENV_VAR_2'
(Replace my-app
with your dokku app name)
Commit and push. Docker can now use those variables during the build.