Docker in the GUI App Widget
Learn how to use Docker with the GUI App widget to run desktop applications.
The GUI App widget allows us to run desktop applications (that have a GUI) within the widget. By default, the widget runs apps made in either Java Swing or Python Tkinter. However, Docker takes away this limitation and allows us to run any GUI application of our choice!
The steps are the same as always:
-
Create a Dockerfile with all our programs/libraries installed.
-
Make a tarball containing the Dockerfile and any other required files.
-
Upload the tarball on the platform.
-
Create a Docker job to execute the program.
-
Run the job in the GUI widget.
Let’s look at how all this works with the help of a few example setups.
Postman
Postman is a program that allows us to create, share, and test APIs. It is most commonly used through the Postman desktop application. Let’s set it up in the GUI widget.
Initial Dockerfile
FROM gcr.io/educative-exec-env/gui-app:1.0# Installing the required Linux packagesRUN apt-get update && apt-get install -y wget && \apt-get install -y libgconf-2-4 libatk1.0-0 libatk-bridge2.0-0 libgdk-pixbuf2.0-0 libgtk-3-0 libgbm-dev libnss3-dev libxss-dev# Downloading the latest Postman tarball for LinuxRUN wget https://dl.pstmn.io/download/latest/linux64 -O postman.tar.gz# Extracting the tarball in the /opt folder (can be kept elsewhere)RUN tar -xzf postman.tar.gz -C /opt# Creating a symlink for the Postman directoryRUN ln -s /opt/Postman/Postman /usr/bin/postman
-
Currently, the GUI widget works with the
gcr.io/educative-exec-env/gui-app:1.0
base image. Please use this in your own setups. -
All other steps are used for installing Postman on our machine. These can be found in Postman’s official documentation.
-
Lines 4 and 5: We are installing the Linux packages needed to support Postman. Notice the
-y
tag in theinstall
commands. This allows us to skip the confirmation step asked in the terminal. Without it, the image build will get stuck on asking for confirmation, and hence, will fail.
Creating a Desktop File
A .desktop
file is needed to run Postman through a launch icon. Our file will be called postman.desktop
and will contain the following instructions:
[Desktop Entry]Encoding=UTF-8Name=PostmanExec=/opt/Postman/app/Postman %UIcon=/opt/Postman/app/resources/app/assets/icon.pngTerminal=falseType=ApplicationCategories=Development;
The file will be kept in the same folder as the Dockerfile. We must copy this file into the ~/.local/share/applications/Postman.desktop
directory in our container. Let’s add this step to the Dockerfile.
Final Dockerfile
FROM gcr.io/educative-exec-env/gui-app:1.0# Installing the required Linux packagesRUN apt-get update && apt-get install -y wget && \apt-get install -y libgconf-2-4 libatk1.0-0 libatk-bridge2.0-0 libgdk-pixbuf2.0-0 libgtk-3-0 libgbm-dev libnss3-dev libxss-dev# Downloading the latest Postman tarball for LinuxRUN wget https://dl.pstmn.io/download/latest/linux64 -O postman.tar.gz# Extracting the tarball in the /opt folder (can be kept elsewhere)RUN tar -xzf postman.tar.gz -C /opt# Creating a symlink for the Postman directoryRUN ln -s /opt/Postman/Postman /usr/bin/postman# Copy the desktop file into the desired folderCOPY ./postman.desktop /.local/share/applications/Postman.desktop
-
COPY ./postman
copies the file present outside the container. -
/.local/share/applications/Postman.desktop
is the target destination inside the container.
Creating the Tarball
So far, we have two files: Dockerfile
and postman.desktop
. We’ll put both of these in a tarball:
tar -czvf gui.tar.gz Dockerfile postman.desktop
This creates a tarball named gui.tar.gz
.
FROM gcr.io/educative-exec-env/gui-app:1.0# Installing the required Linux packagesRUN apt-get update && apt-get install -y wget && \apt-get install -y libgconf-2-4 libatk1.0-0 libatk-bridge2.0-0 libgdk-pixbuf2.0-0 libgtk-3-0 libgbm-dev libnss3-dev libxss-dev# Downloading the latest Postman tarball for LinuxRUN wget https://dl.pstmn.io/download/latest/linux64 -O postman.tar.gz# Extracting the tarball in the /opt folder (can be kept elsewhere)RUN tar -xzf postman.tar.gz -C /opt# Creating a symlink for the Postman directoryRUN ln -s /opt/Postman/Postman /usr/bin/postman# Copy the desktop file into the desired folderCOPY ./postman.desktop /.local/share/applications/Postman.desktop
Uploading the Tarball
The tarball has to be uploaded in the Docker Container section of your course’s editor page. More details can be found here.
Click on Save on the top right corner to build the image. Wait for it to build until the ‘Image has been built’ message appears. We’re good to go!
Docker Job
Now, we’ll create a Docker job that runs Postman. Create a new job in the editor page’s Docker Container section by pressing the ‘+’ icon.
Here’s what our job looks like:
-
Job Name: Used to select the job in a widget.
-
InputFileName: Not relevant for the GUI App widget. You may provide any string here.
-
Run Script: The most important component of the job. This script runs each time the Run button is pressed in the GUI widget.
-
export DISPLAY=:1.0
: Must always be run in order to set up the display of the widget. -
postman
: Our setup allows us to start postman by simply typing this command.
-
-
On the editor side, the Run in Live Container field does not need to be checked.
The Final GUI App
We’re done with our setup! now, we only have to select it in a GUI widget and press Run. A working demo can be found here.
Google Chrome
Chrome is a popular GUI-based web browser, which means that we can run it in the GUI widget. Let’s start by creating the Dockerfile.
Dockerfile
FROM gcr.io/educative-exec-env/gui-app:1.0RUN apt-get -y install wgetRUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -RUN sh -c 'echo "deb https://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'RUN apt-get -y updateRUN apt-get -y install google-chrome-stable
-
As always, we use the
gcr.io/educative-exec-env/gui-app:1.0
base image for the GUI widget. -
We need
wget
, so that has been installed in line 2. -
The subsequent installation steps can be found on UbuntuUpdates. We set up the key and repository, and then install the Chrome package.
Creating the Tarball
Since we don’t need any other files, our tarball will only contain the Dockerfile above. We’ll call our tarball chrome.tar.gz
:
tar -czvf chrome.tar.gz Dockerfile
Uploading the Tarball
The tarball has to be uploaded in the Docker Container section of your course’s editor page. More details can be found here.
Click on Save on the top right corner to build the image. Wait for it to build until the ‘Image has been built’ message appears. We’re good to go!
Docker Job
The Docker job contains instructions on how to run Chrome from a terminal. Most of the steps are the same as those for a local machine.
Here’s the job:
-
Set the Job Name to your liking. The InputFileName is not relevant for the GUI widget.
-
Run Script:
-
export DISPLAY=:1.0
is mandatory to display the app. -
Since Chrome doesn’t allow root access anymore,
useradd -m chromeuser
sets the correct access permission. -
google-chrome --no-sandbox
runs the browser.
-
-
On the editor side, the Run in Live Container field does not need to be checked.
The Final GUI App
We’re done with our setup! now, we only have to select it in a GUI widget and press Run. A working demo can be found here.