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:

  1. Create a Dockerfile with all our programs/libraries installed.

  2. Make a tarball containing the Dockerfile and any other required files.

  3. Upload the tarball on the platform.

  4. Create a Docker job to execute the program.

  5. 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 packages
RUN 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 Linux
RUN 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 directory
RUN 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 the install 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-8
Name=Postman
Exec=/opt/Postman/app/Postman %U
Icon=/opt/Postman/app/resources/app/assets/icon.png
Terminal=false
Type=Application
Categories=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 packages
RUN 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 Linux
RUN 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 directory
RUN ln -s /opt/Postman/Postman /usr/bin/postman
# Copy the desktop file into the desired folder
COPY ./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.

Dockerfile
postman.desktop
FROM gcr.io/educative-exec-env/gui-app:1.0
# Installing the required Linux packages
RUN 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 Linux
RUN 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 directory
RUN ln -s /opt/Postman/Postman /usr/bin/postman
# Copy the desktop file into the desired folder
COPY ./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.0
RUN apt-get -y install wget
RUN 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 update 
RUN 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.