Skip to content

Instantly share code, notes, and snippets.

@caseywatts
Last active November 8, 2024 12:52
Show Gist options
  • Save caseywatts/9700b402b6b51d1d6af9f0b206739770 to your computer and use it in GitHub Desktop.
Save caseywatts/9700b402b6b51d1d6af9f0b206739770 to your computer and use it in GitHub Desktop.

Electron is tricky to get set up on Windows Subsystem for Linux, but it can work!

Four things needed overall:

  1. you need WSL2, not WSL1
  2. you need node, of course, and that part isn't so bad
  3. you need to apt install several dependencies
  4. you need an X Server so it can display the electron GUI over in Windows-land

Setup instructions, in order:

  1. Set up WSL2 via https://docs.microsoft.com/en-us/windows/wsl/install-win10
    • If you have WSL1 already, I suggest making a second installation of Ubuntu etc with WSL2 beside your WSL1 so you don't mess up existing projects while you troubleshoot it all.
  2. Install NVM via https://github.com/nvm-sh/nvm
  3. Install a node version, like using nvm install stable
  4. Clone your electron repo like Zettlr, and npm install or yarn install things
  5. Try to run it (npm start or yarn start usually). Do you see some errors related to libraries?
    • The filename it can't find is a hint for a package you have to install, but with slight naming changes. Its apt install package name is slightly different than the filename that electron is looking for. In my cases, the underscore became a dash, and the dash between the name and version number goes away. libgdk_pixbuf-2.0 becomes libgdk-pixbuf2.0-0. I had the most luck googling "ubuntu libgdk" etc and then the package name showed up usually.
    • My latest install 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
    • Anyone know a better way to find these without googling? lol I'm thankful there weren't too many
  6. Try to run npm start again - does NOTHING happen? Now you need X Server!
  7. Now try again, and it should work!
@carlosgallego98
Copy link

carlosgallego98 commented Feb 12, 2022

image
In combination with another tutorial I finally got it working.
Thanks.

@anemology
Copy link

anemology commented Feb 20, 2022

Update WSL may fix something.

wsl --update
wsl --shutdown
# Core version: 5.10.60.1

@brndnsmth
Copy link

WSL2: Ubuntu

In my case, Xvfb was required, as well.

sudo apt-get install -y xvfb

Reference: https://stackoverflow.com/a/61043049

Then run the following:

export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}'):0
export LIBGL_ALWAYS_INDIRECT=true

Windows

VcsXsrv Config:

On Windows, open VcsXsrv and it’ll guide you through three config screens. Here’s what to pick on each one:

  1. Choose Multiple Windows
  2. Choose ‘Start no client’
  3. Choose Clipboard and OpenGL integration, plus provide -ac as additional arguments

Electron apps then successfully executed.

@abalter
Copy link

abalter commented May 4, 2024

We aren't supposed to need VcsXsrv any more in WSL2 to run X11 apps.

Is it necessary for using electron?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment