Tailwind Logo

Change as a project including Playwright's app

Related TechnologyDocker

Published: 2023-10-20

We got the sample code to the point where we could run it as a container last time. This time, we want to create applications for other roles, so we will set up a hierarchy to manage them.

Content Update

Regarding the Playwright topic that was introduced on the blog, the latest version can be deployed on Vercel. Please refer to the following page.

Organize Projects

Copy the application described in the previous blog posts, this time to the folder src/playwright.

Creating .env files

Create an .env file so that you can manage all the environment variables used in this project at once. In this case, we set the following.

Plain Text 
COMPOSE_PROJECT_NAME=search-utility
PROJECT_VERSION=0.1.0

PLAYWRIGHT_IMAGE=mcr.microsoft.com/playwright:v1.38.1-jammy

PAGE_WIDTH=1280
PAGE_HEIGHT=800
PAGE_WAIT_TIME=2000

For the above, also prepare a .env.example with no values set.

Creating a .gitignore

The following code should be included.

Plain Text 
node_modules
dist

.env

Creating docker-compose.yml

We want to automate as much as possible the parts related to container image creation and startup, so we create this file.

YAML 
services:
  playwright:
    image: ${COMPOSE_PROJECT_NAME}-playwright:${PROJECT_VERSION}
    platform: linux/amd64
    build:
      context: ./src/playwright
      args:
        PARENT_IMAGE: ${PLAYWRIGHT_IMAGE}
    environment:
      PAGE_WIDTH: ${PAGE_WIDTH}
      PAGE_HEIGHT: ${PAGE_HEIGHT}
      PAGE_WAIT_TIME: ${PAGE_WAIT_TIME}
    ports:
      - "3000:3000"
    networks:
      - default

Here, the .env file is referenced and defined by passing the project name, version, docker image file name, and various values.

Modification of Docker files

The values of the environment settings defined in the .env file, which can then be read through the docker-compose.yml file, should be rewritten as follows

Dockerfile 
ARG PARENT_IMAGE

FROM ${PARENT_IMAGE} 

WORKDIR /usr/app
COPY . /usr/app

ENV PLAYWRIGHT_BROWSERS_PATH=/ms-playwright

RUN cd /usr/app \ 
    && npm install \
    && npm run build

CMD ["npm","run","start"]

Modification of screenshot.ts file

To use environment variables in this file as well, rewrite the code as follows. First, add the following code so that the value of the environment setting can be referenced

TypeScript 
const PAGE_WAIT_TIME = parseInt(process.env.PAGE_WAIT_TIME || "2000");
const PAGE_WIDTH = parseInt(process.env.PAGE_WIDTH || "1280");
const PAGE_HEIGHT = parseInt(process.env.PAGE_HEIGHT || "800");

Change the actual code to use the following

TypeScript 
  await page.setViewportSize({ width: PAGE_WIDTH, height: PAGE_HEIGHT });
  await page.goto(urlParam);
  await page.waitForTimeout(PAGE_WAIT_TIME);

Confirmation of operation

After the above configuration changes are complete, run docker compose build.

playwright10.png

The image has been successfully created. Then run docker compose up -d.

playwright11.png

Summary

The project itself has been reorganized in order to prepare from now on for something other than containers using Playwright. The sample code is available in the following repository branch.

Tags