Dockerfile

Now that you are familiar with react-app, let's start building Dockerfile.

We'll cover the following

Playwright Dockerfile

The Playwright Dockerfile is given below.

#Baseimg is Node.
FROM node:10
COPY . .
#Installing all the dependencies needed by Playwright to test the web app.
RUN apt-get update &&\
    apt-get -y install libnss3 &&\
    apt-get -y install libasound2 &&\
    apt-get -y install libatspi2.0-0 &&\
    apt-get -y install libdrm2 &&\
    apt-get -y install libgbm1 && \
    apt-get -y install libgtk-3-0 && \
    apt-get -y install libxss1 && \
    apt-get -y install libxkbcommon-x11-0 && \
    apt-get -y install libatk1.0-0 && \
    apt-get -y install tmux && \
    apt-get -y install locales-all
#Move to the directory and install all the dependencies required by the react app.
RUN cd react-app-playwright && \
    npm install
WORKDIR /react-app-playwright

Base Image

Playwright is a Javascript-based, Node.js library. That’s why the base image contains the 10th version of the Node in line 2.

Importing code to the Docker image

In line 4, we are importing code from our directory to the Docker image.

Installing required libraries

The libraries listed on line 7-16 are essential to use Playwright for testing a react app.

tmux

In line17, tmux is not part of the required libraries, but it will split the terminal into two sessions. So we can check the working and testing of a web application side by side. The first session will be used to build and serve the react application on localhost. The second session will be utilized to run Playwright tests.

  apt-get -y install tmux && \

In line 18, we are installing locale-all to provide tmux all the missing packages.

  apt-get -y install locales-all

Working Directory

In line 21, we will move to the working directory and install the dependencies listed in package.json file by using command npm install.

In line 23, we are declaring react-app-playwright as our working directory.

This concludes our Dockerfile. Let’s build a tarfile of it.

Building a Tar File

Now, let’s create a tar file of our react app and Dockerfile to upload it on Educative platform. Both should be present in the same folder. Run the following command in the terminal to get the tar file.

tar -czvf react-playwright-docker-image.tar.gz Dockerfile react-app-playwright

It will create the tar file in the same folder.

react-playwright-docker-image.tar.gz

Now let’s create the Docker job for this Docker image to see some actual action.