Docker Job
In the last lesson, we became familiar with the Dockerfile. Now let's learn how to make a Docker job.
We'll cover the following
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.
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.