Java Swing with GitHub Codespaces

Due to the limitation imposed by repl.it, I had to find another alternative for creating a web interface for developing Java Swing applications. Through my research and experimentation, I was able to get Java Swing (Graphics) working. As a computer science teacher, this became an important resource for my students, especially those needing a web interface for writing such a program. I hope this resource serves you well.

This technique involves connecting a GitHub codespace to have a graphical output via an output port designated for graphics. Integrations include Java, VNC via Desktop lite, and a x11 Docker called OpenBox.

Get a GitHub account if you haven't already. Create a repository for this after logging in. Create or upload at least one file in there (e.g Runner.java). Commit the changes.

Then, go to https://github.com/codespaces and create a new codespace. Use the repository you created for this. For machine type, select the higher cores for better performance. Create the codespace.

Then click the text field at the very top center, and select Show and Run Commands.

Then type in "Add Dev Container…" and select "Codespaces: Add Dev Container Configuration Files"

Select Create a new configuration.

Select JAVA devcontainers. Chose the default options moving forward or customize however you like. It may ask you to rebuild your codespace but you can do that later.

Go to the file manager on the left pane. Select devcontainer.json.

Modify the file to have the following.

{
    "name": "Java",
    "image": "mcr.microsoft.com/devcontainers/java:1-21-bullseye",

    "build": {
        "dockerfile": "Dockerfile"
    },

    "features": {
        "ghcr.io/devcontainers/features/java:1": {
            "version": "none",
            "installMaven": "false",
            "installGradle": "false"
        },
        "ghcr.io/devcontainers/features/desktop-lite:1": {
            "password": "vscode",
            "webPort": "6080",
            "vncPort": "5901"
        }
    }

}

Create a Dockerfile in the .devcontainer folder in the file manager on the left hand side.

Edit the Dockerfile and add the following code. (Source: https://github.com/orgs/community/discussions/118415)

# Start from the universal image
FROM mcr.microsoft.com/devcontainers/universal:2

# Install openbox
RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
    && apt-get -y install --no-install-recommends openbox

# Set openbox to start automatically
RUN echo 'openbox-session &' >> ~/.xinitrc

Rebuild the container. Click the text field at the very top center, and select Show and Run Commands. Type in Rebuild and select "Codepsaces: Rebuild Container". This can take a long time.

Now we need to set up the ports to display the graphical output. Select the PORTS tab at the bottom panel. Click on Forward a Port.

Click Add Port and under Port add in 6080.

Hover your mouse cursor over Forwarded Address and click Open in Browser. This should open a new browser tab where you can view the Graphical outputs from your Java program.

Select Connect in this tab.

Modify your Runner.java with the following test code.

import javax.swing.*;
import java.awt.*;

public class Runner {
    public static void main(String[] args) {
        //Create the frame.
        JFrame frame = new JFrame("Test");

        JPanel canvas = new JPanel();
        canvas.setPreferredSize( new Dimension( 800, 600 ) );

        frame.add(canvas);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.pack();
        frame.setVisible(true);
    }
}

Then compile and run the Runner.java file in TERMINAL.

Switching over to the tab where the graphics are displayed, you should see this. You may have to reconnect in the noVNC graphical tab.

Hope this helps you and/or your students!