Skip to content

Deploying SvelteKit & Playwright on Dokku with Dockerfile

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.

Published: