Gitpod: Support Electron apps

[jankeromnes]

It would be cool to support electron desktop apps in Gitpod, like for example:

• https://github.com/fabiospampinato/notable
• https://github.com/nukeop/nuclear

[jankeromnes]

So I tried running the nuclear web app in Gitpod's web preview (i.e. outside of electron), using these webpack-dev-server parameters:

--host=0.0.0.0 --allowed-hosts=.gitpod.io --target=web

The app loading screen does show up, but the app is mostly broken, likely because it's missing some electron features:

TypeError: fs.existsSync is not a function

Another option to support electron apps could be to run electron via noVNC.

[csweichel]

We do have VNC support in Gitpod that could be handy here (basically noVNC): https://medium.com/gitpod/developing-native-ui-applications-in-gitpod-15af2967c24e

[meysholdt]

Running Electron apps directly in the web browser sounds like a lot of functionality from Electron would need to be available in the web browser... does Electron provide a solution for this?

Because if not, the options that I see are:

• the app needs to support running outside Electron (like Theia does)
• launch Electron in the workspace and access it via VNC, as @32leaves suggested.

[svenefftinge]

We should definitely go down the VNC route, as you cannot run electron apps in a browser (having access to node and some electron specific apis that bind to the OS is whole idea of it)

[svenefftinge]

@jankeromnes did you try VNC?

[jankeromnes]

@svenefftinge I agree about VNC, but haven't tested it yet. It's the next thing I was planning to do when I cycle back to this issue.

[svenefftinge]

I think we should close this ticket, as Gitpod already supports Electron apps.
Chris' post shows how to run Vs Code which is an electron app.

[jankeromnes]

So, I've now got https://github.com/nukeop/nuclear running in Gitpod:

Here is what the config looks like:

https://github.com/jankeromnes/nuclear/commit/c52e4ae40ada932e4ef473ff856ba36fa6d4a1d0

A few obvious UX problems:

• [ ] The VNC tab doesn't auto-reconnect, so if the websocket flakes out, the Preview pane shows "Disconnected" and needs to be manually refreshed
• [ ] The Preview pane size is not great, as you don't see the entire app, and you have to weirdly scroll around to use the desktop app (maybe defaulting to a Browser preview might help)
• [ ] The Preview pane seems to open with a random width every time. I've never seen that before

[svenefftinge]

Nice! Do you have suggestions how that could be improved?

[jankeromnes]

We don't have that problem on Janitor, and I see a few differences in the x11vnc/Xvfb/noVNC options we use:

• Janitor noVNC clone
• Janitor x11vnc/Xvfb/noVNC options
• Gitpod noVNC clone
• Gitpod x11vnc/Xvfb/noVNC options

The differences are:

• Janitor adds Xvfb options -pn (accept failure to listen on all ports) and -noreset (don't reset after last client exists)
• Janitor adds x11vnc option -shared (allow more than one viewer), and doesn't use -localhost (only accept localhost) or -forever (don't exit if first client disconnects)
• Janitor serves vnc.html from a full noVNC build, while Gitpod just serves an unbuilt vnc_lite.html
• Gitpod also clones utils/websockify into noVNC, for some reason

I suggest we start by adding options Xvfb -pn -noreset and x11vnc -shared to our gitpod/workspace-full-vnc image. I'll do that.