DEV Community

Cover image for GUI in GitHub Codespaces
Konstantinos Mazgaltzidis
Konstantinos Mazgaltzidis

Posted on

GUI in GitHub Codespaces

GitHub Codespaces with VNC Support

GitHub Codespaces offers developers an instant, cloud-based development environment with a plethora of tools and utilities, all accessible directly from your browser. While it's perfect for many development tasks such as command line tools, Docker, or NodeJS, certain tasks, like those involving OpenGL rendering or Java Swing necessitate a graphical interface, which Codespaces lacks. However, with the help of a tool called Light-weight Desktop (desktop-lite), we can overcome this limitation.

Setting Up VNC Support with Desktop-lite

To enable VNC support in Codespaces, follow these steps:

  1. Navigate to the option “Configure dev container” from the Codespaces dropdown menu.

Image description

  1. Replace the existing JSON configuration with the following:


{
  "image": "mcr.microsoft.com/devcontainers/universal:2",
  "features": {
    "ghcr.io/devcontainers/features/desktop-lite:1": {}
  },
  "forwardPorts": [6080],
  "portsAttributes": {
    "6080": {
      "label": "desktop"
    }
  }
}



Enter fullscreen mode Exit fullscreen mode
  1. Commit the changes and open the Codespaces environment. If prompted to rebuild the container to apply the changes, proceed with the rebuild.

Image description

  1. Click on the bottom icon labeled "Ports" and select the "Open in Browser" option.

Image description

  1. Use the default password vscode to connect.

Image description

  1. In the Settings, select the Scaling Mode to Remote Resizing for a better user experience.

Image description

  1. You can now navigate to your project path as seen in VS Code by using the command ```bash

cd /workspaces/


Any changes made here will reflect in the VS Code environment seamlessly.
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
rsarnath profile image
rsarnath

I am trying to run a java gui app in codespace, going through a browser. I have tried various things that have been suggested, and am getting an error like this: (other errors appeared before, but they disappeared)
Can't connect to X11 window server using 'localhost:0.0' as the value of the DISPLAY variable.
I have tried 10.0 instead of 0.0 with the same result.
When I follow these steps, it feels like like I am shooting in the dark. I have used Xming and putty to run java remotely on an Ubuntu terminal and have the display window on my windows machine. I undestand clearly how that works. Is there some document that explains what are all the entities that are at work here, and how this connection should work?

Collapse
 
konmaz profile image
Konstantinos Mazgaltzidis

Have you solved the issue you have?
Sorry for the late reply didn't get any notification.

Collapse
 
misshudspith profile image
Amy Hudspith

When I click on the globe I'm getting the following error

currently unable to handle this request. HTTP ERROR 502

Any ideas?