Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

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!
@simplywondrous

This comment has been minimized.

Copy link

@simplywondrous simplywondrous commented Oct 8, 2020

Thank you for this! #6 was the step I needed.

@chankruze

This comment has been minimized.

Copy link

@chankruze chankruze commented Dec 17, 2020

For me libxcursor1 libnss3 libgdk-pixbuf2.0-0 libgtk-3-0 libxss-dev libnss3-dev were missing.

@Alastair-L

This comment has been minimized.

Copy link

@Alastair-L Alastair-L commented Jan 19, 2021

Remember to sudo apt update before step 5 (unlike me)

@abrighton

This comment has been minimized.

Copy link

@abrighton abrighton commented Mar 22, 2021

I'm using Electron with Snowpack and npm and noticed that when I run "npm run dev" under wsl2, changes in source files do not result in updates to the displayed app. On plain Ubuntu it works as expected. The sources are all under my wsl2 home dir.
The same app, in a different branch, running as a web app, does update when running with "npm start" and displaying in the Windows 10 Firefox browser. Anybody notice this behavior with Electron on wsl2? Maybe it only happens with Snowpack? In any case there is a difference between plain Ubuntu and Ubuntu under wsl2.

@vlrmprjct

This comment has been minimized.

Copy link

@vlrmprjct vlrmprjct commented Apr 13, 2021

Maybe there is an easier way without installing some libs:
$ export npm_config_platform=win32 && npm install --save-dev electron && unset npm_config_platform

@JeffersonQin

This comment has been minimized.

Copy link

@JeffersonQin JeffersonQin commented Jul 28, 2021

Hi, I got a question. Now I have my X Server all configured and I can start apps like gedit or firefox in WSL1. However, after executing yarn run electron:serve it just shows up the message INFO Launching Electron... and nothing happens. Any ideas guys? Thanks!

image

image

@JeffersonQin

This comment has been minimized.

Copy link

@JeffersonQin JeffersonQin commented Jul 29, 2021

Well, today I updated my WSL1 to WSL2, and I face the same problem.

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