Electron on WSL2

Zach Schneider -

I haven't used Electron in a long time, but I wanted to see if I could create an admin dashboard for my super-simple URL shortener based on Cloudflare Workers. Since I do almost all of my development in WSL now, I had to find a way to get Linux GUI apps to display a window in my Windows environment.

GUI Apps will officially be supported on the Windows 10 Insiders preview build 21364 or higher (https://devblogs.microsoft.com/commandline/the-initial-preview-of-gui-app-support-is-now-available-for-the-windows-subsystem-for-linux-2/). I hesitate to upgrade to versions of Windows that are tested even less than the mainstream releases, so until then I will use this method.

Getting Started

You'll need:

  • WSL2 installed
  • VcXsrv installed
  • An electron app to test this out

Launching VcXsrv

VcXsrv must be started with a few options:

  • Multiple Windows
  • Display number: -1 (for auto, or you can enter 0)
  • Start no client
  • Check Disable access control
  • If Windows firewall prompts you to choose which networks to allow communication, you will have to select Public in order for this to work. I'd recommend locking down the newly created rules in Windows Firewall to prevent someone else from connecting.

Installing Electron Dependencies

The WSL2 Ubuntu distro is missing some dependencies that prevent Electron from starting. The ones I was missing were installed with this command:

sudo apt install libgconf-2-4 libatk1.0-0 libatk-bridge2.0-0 libgdk-pixbuf2.0-0 libgtk-3-0 libgbm-dev libnss3-dev libxss-dev

Configure Linux Display

WSL2 needs to know which display to use, in this case it's our X Server on Windows 10. This is really straightforward:

export DISPLAY="`sed -n 's/nameserver //p' /etc/resolv.conf`:0"

You can also put that line at the end of your .bashrc to set that environment variable for every session.

Start Electron App

Electron should now start without an issue!