Docker Playwright Storybook setup

.env.example

CONTAINER_NAME=monorepo

ENTRYPOINT=yarn

STORYBOOK_PORT=6006

TAG=v1.40.0-jammy

.yarnrc.yml

# Best strategy for docker usage is to have this set
nodeLinker: node-modules

# Rest of your config

docker-compose.yml

# replace monorepo with your prefered project name
services:
  monorepo:
    container_name: ${CONTAINER_NAME}:${TAG}
    entrypoint: ${ENTRYPOINT}
    stdin_open: true # docker run -i
    tty: true # docker run -t
    build:
      context: .
      args:
        - AZ_PAT=${AZ_PAT}
        - TAG=${TAG}
    ports:
      - "${STORYBOOK_PORT}:${STORYBOOK_PORT}"
    volumes:
      - .:/monorepo:delegated
      - /monorepo/.yarn
      - /monorepo/node_modules

Dockerfile

# This will be useful for making this configuration easy to upgrade
ARG TAG
FROM mcr.microsoft.com/playwright:$TAG

# You'll need a personal access token if you're accessing any private package registries
ARG PAT
ENV PAT=${PAT}

# Create a working dir named what you want `monorepo` here is a placeholder
WORKDIR /monorepo

COPY .yarn/releases .yarn/releases
COPY .yarn/plugins .yarn/plugins
COPY .yarn/cache .yarn/cache
COPY yarn.lock .
COPY .yarnrc.yml .
COPY package.json .

# For each package.json in you project you need to copy it into the docker workspace
# Option 1 manually write these commands
# COPY packages/path-to/package/package.json packages/path-to/package/package.json
# Option 2 use a a find command for each workspace packages directory just search for the package.json and copy them to the right place
# RUN find ./packages -path '*/node_modules*' -prune -o -name 'package.json' -exec cp --parents {} . \;

RUN export AUTH=${PAT} && \
  yarn auth && \
  yarn install --immutable

package.json

{
  "scripts": {
    "dc": "docker-compose run --rm monorepo",
    "storybook": "storybook dev -p 6006 --ci",
    "test": "yarn dc start-server-and-test 'bun run storybook' http://localhost:6006 'yarn run test-storybook'",
    "test-storybook": "test-storybook"
  },
  "devDependencies": {
    "@playwright/test": "1.40.0",
    "playwright": "1.40.0",
    "@storybook/test-runner": "0.15.2",
    "start-server-and-test": "2.0.3",
    "storybook": "7.5.3",
  }
}