Skip to content

Instantly share code, notes, and snippets.

@caseywatts

caseywatts/Electron on WSL2.md

Last active August 13, 2025 20:37
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.
Download ZIP

Revisions

  1. caseywatts revised this gist Aug 22, 2020. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions Electron on WSL2.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@ 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-get several dependencies
    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


    @@ -14,11 +14,11 @@ Setup instructions, in order:
    3. Install a node version, like using `nvm install stable`
    4. Clone your electron repo like [Zettlr](https://github.com/Zettlr/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-get 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.
    * 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!
    * Follow this guide to set up an X Server like VcXsrv: https://techcommunity.microsoft.com/t5/windows-dev-appconsult/running-wsl-gui-apps-on-windows-10/ba-p/1493242
    * And just in case it helps, this less thorough but more canonical reference: https://wiki.ubuntu.com/WSL#Running_Graphical_Applications
    * To test your X Server, I suggest testing using a non-electron app to start to isolate X Server from the rest of the issues. The first X Server article here suggests installing `sudo apt-get install x11-apps` and running `xcalc` as a test case.
    * To test your X Server, I suggest testing using a non-electron app to start to isolate X Server from the rest of the issues. The first X Server article here suggests installing `sudo apt install x11-apps` and running `xcalc` as a test case.
    7. Now try again, and it should work!
  2. caseywatts revised this gist Aug 21, 2020. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions Electron on WSL2.md
    View file
    Original file line number Diff line number Diff line change
    @@ -11,11 +11,11 @@ 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 installl stable`
    3. Install a node version, like using `nvm install stable`
    4. Clone your electron repo like [Zettlr](https://github.com/Zettlr/Zettlr), and `npm install` or `yarn install` things
    5. Try to run it (`npm start` or `yarn start` usually). Do you lib related errors?
    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-get 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-get install libgconf-2-4 libatk1.0-0 libatk-bridge2.0-0 libgdk-pixbuf2.0-0 libgtk-3-0 libgbm-dev libnss3-dev libxss-dev`
    * 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!
    * Follow this guide to set up an X Server like VcXsrv: https://techcommunity.microsoft.com/t5/windows-dev-appconsult/running-wsl-gui-apps-on-windows-10/ba-p/1493242
  3. caseywatts revised this gist Aug 21, 2020. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions Electron on WSL2.md
    View file
    Original file line number Diff line number Diff line change
    @@ -9,16 +9,16 @@ Four things needed overall:

    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.
    * 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 installl stable`
    4. Clone your electron repo like [Zettlr](https://github.com/Zettlr/Zettlr), and `npm install` or `yarn install` things
    5. Try to run it (`npm start` or `yarn start` usually). Do you lib related errors?
    * The filename it can't find is a hint for a package you have to install, but with slight naming changes. Its apt-get 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-get 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
    * The filename it can't find is a hint for a package you have to install, but with slight naming changes. Its apt-get 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-get 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!
    * Follow this guide to set up an X Server like VcXsrv: https://techcommunity.microsoft.com/t5/windows-dev-appconsult/running-wsl-gui-apps-on-windows-10/ba-p/1493242
    * And just in case it helps, this less thorough but more canonical reference: https://wiki.ubuntu.com/WSL#Running_Graphical_Applications
    * To test your X Server, I suggest testing using a non-electron app to start to isolate X Server from the rest of the issues. The first X Server article here suggests installing `sudo apt-get install x11-apps` and running `xcalc` as a test case.
    * Follow this guide to set up an X Server like VcXsrv: https://techcommunity.microsoft.com/t5/windows-dev-appconsult/running-wsl-gui-apps-on-windows-10/ba-p/1493242
    * And just in case it helps, this less thorough but more canonical reference: https://wiki.ubuntu.com/WSL#Running_Graphical_Applications
    * To test your X Server, I suggest testing using a non-electron app to start to isolate X Server from the rest of the issues. The first X Server article here suggests installing `sudo apt-get install x11-apps` and running `xcalc` as a test case.
    7. Now try again, and it should work!
  4. caseywatts renamed this gist Aug 21, 2020. 1 changed file with 0 additions and 0 deletions.
    0 Electron on WSL2 → Electron on WSL2.md
    View file
    File renamed without changes.
  5. caseywatts created this gist Aug 21, 2020.
    24 changes: 24 additions & 0 deletions Electron on WSL2
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    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-get 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 installl stable`
    4. Clone your electron repo like [Zettlr](https://github.com/Zettlr/Zettlr), and `npm install` or `yarn install` things
    5. Try to run it (`npm start` or `yarn start` usually). Do you lib related errors?
    * The filename it can't find is a hint for a package you have to install, but with slight naming changes. Its apt-get 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-get 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!
    * Follow this guide to set up an X Server like VcXsrv: https://techcommunity.microsoft.com/t5/windows-dev-appconsult/running-wsl-gui-apps-on-windows-10/ba-p/1493242
    * And just in case it helps, this less thorough but more canonical reference: https://wiki.ubuntu.com/WSL#Running_Graphical_Applications
    * To test your X Server, I suggest testing using a non-electron app to start to isolate X Server from the rest of the issues. The first X Server article here suggests installing `sudo apt-get install x11-apps` and running `xcalc` as a test case.
    7. Now try again, and it should work!