Unable to run Electron Quick Start in WSL

Question

Hi I'm running Ubuntu 16.04.3 LTS on Windows Subsystem Linux. I'm trying to run the Quick Start first app as listed in this section here https://electronjs.org/docs/tutorial/first-app however, I keep getting the same error no matter if I clone the repository, write it myself, or delete and reinstall the Electron module.

> electron .

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! first-electron@1.0.0 start: `electron .`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the first-electron@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

For reference I'm running Node: 9.11.1 NPM: 5.8.0

Answer 1

Electron needs to open a chrome browser window. So, when you run it from WSL using a node.js that was installed in WSL, I guess it would try to start the chromium browser for Ubuntu, which will not work out of the box, because:

Microsoft doesn't support graphical programs on WSL. Bash on WSL is intended for running command-line programs that developers might need, but it's possible to run graphical Linux desktop programs on Windows using the Bash shell. To be more precise, you'll be able to display graphical programs running in WSL on a Windows 10 desktop by using an X server which runs on Windows 10.

https://virtualizationreview.com/articles/2017/02/08/graphical-programs-on-windows-subsystem-on-linux.aspx

Answer 2

I found the easiest way is to install electron on Windows then start it from WSL.

Steps:

Make sure you have Node.js & npm installed on your Windows machine (you can remove them afterwards) Open cmd.exe, move to your project directory and run npm install electron --save-dev .

This will install the Windows version of the prebuilt Electron binary instead of the Linux one, which would occur if you try to install from WSL. (This is the actual trick) Enter Bash on Ubuntu on Windows, move to your project directory then run ./node_modules/.bin/electron (or use an npm script) to launch your Electron app Though, I'm not sure this is very convenient, it seems to work well.

I hope this will help people encoutering the same issue in the future!

Ref: https://github.com/electron-userland/electron-prebuilt/issues/260

Answer 3

在 Windows 中运行 X 服务器应用程序，然后导出 DISPLAY ，运行 npm start。