Docker Job

In the last lesson, we became familiar with the Dockerfile. Now let's learn how to make a Docker job.

Docker job

Before diving into the components of a Docker job, have a look at how to build a Docker job.

The Docker job to run the application is as follows.

Playwright Docker job
Playwright Docker job

Docker job Components

We will cover all the components step by step.

Job Name

This field specifies the name of a Docker job. You can name your Docker job according to your choice. It will appear in the SPA widget by that specified name. Here, the job name is Playwright.

InputFileName

It is a dummy field for LiveVM. It is not required in our case. Hence, insert any dummy value here.

Run Script

It runs your code every time the Run button is clicked. Here, the run script is

cp -r /usercode/* /react-app-playwright/
&& tmux \new-session
"cd react-app-playwright && npm start ;
"\; \split-window -h -l 60
"sleep 30 && cd react-app-playwright/e2e/specs && rm ._* && cd ../.. && npm run e2e ; read"
\; \select-layout even-horizontal
  • Line 1:

Here, we are just copying the user code to our Docker image so user changes can be reflected in our SPA widget.

  • Line 2

In line 2, we are starting a new tmux session.

  • Line 3

Line 3 describes what actually happens in the first tmux session. Here we move to the working directory and start the react app using the npm start command.

  • Line 4

In line 4, we are splitting the terminal in a 40:60 ratio to run the Playwright test in another window.

-h -l 60 

This command ensures that the splitting window takes 60% of the space. It will help users to see the progress of tests.

  • Line 5

Let’s split the line 5 command into five parts and go through all one by one.

"sleep 30 &&
cd react-app-playwright/e2e/specs &&
rm ._* &&
cd ../.. &&
npm run e2e ; read"

In line 1, we use the sleep command to ensure that our app has been served and running before starting the UI tests.

In line 2, we move to the directory where our test file is present to delete the redundant file created by Educative platform.

Note: In some cases, the Educative platform creates duplicate files starting with the prefix “._” that throws random errors. These files can be seen by using the following command in the terminal.

ls -al

Inline 3, we are removing all these files to avoid errors. In line 4, we are moving back to the main directory so we can run the test using the command npm run e2e given in line 5. The read command keeps the window open after the command has stopped executing so you can read the output.

This concludes our run script.

  • Line 6

In line 6, we are just selecting the horizontal layout for our tmux sessions in the terminal.

Run in Live Container

We will select this option as we would be running our code in a live container.

Application Port

The port number set for this react app is 3000.

Start Script

The start script is the same as the run script.

Now, let’s test the react app in the next lecture.