More than 5 years have passed since last update.

WSLでvue-cli3 + electron

Last updated at 2019-01-28Posted at 2019-01-28

ふとelectronに手を出そうと思ったらドつぼにハマったので記録として残しておきます。結果を書くと先人たちのブログとディスカッションを読んで解決しました。
※ Win版のbuildに失敗していますが、おそらくwineが必要っぽい？すぐにbuildの必要が無いので解決したら後ほど追記します。

私は普段WSL上でvue.js(typescript)で開発しています。electronを触ってみたかったので、vue.js(vue-cli3) + WSLで環境構築してみました。

vueのelectronプラグインとしてvue-cli-plugin-electron-builderを利用しています。

WSLのGUI環境を構築

electronはデスクトップアプリケーションなので、GUI環境が必要です。wsl上で以下をインストールします。

$ sudo apt-get install libgtk-3-dev libxss1 libnss3-dev libasound2 x11-apps x11-utils x11-xserver-utils fonts-ipafont

Windows側にX Serverを構築するので、環境変数DISPLAYに以下を代入します。
これは~/.bashrcなり~/.zshrcなりのシェル設定ファイルに記載して下さい。

export DISPLAY=localhost:0.0

こちらからVcXsrvをインストールしました。
https://sourceforge.net/projects/vcxsrv/

vue-cli3でのプロジェクト作成は省きます。
プロジェクトを作成したら、以下のコマンドでelectronのプラグインを追加します。

$ vue add electron-builder

プラグインを追加したら、サーバを立ち上げます。
これはsudoしないと失敗します。

$ sudo yarn electron:serve

できました。

$ vue add electron-builder
$ yarn electron:serve

ライブラリが無いとエラーが発生。
※以降しばらく依存解決を行う。

error while loading
shared libraries: libgtk-3.so.0: cannot open shared object file: No such file or directory

$ sudo apt-get install libgtk-3-dev

error while loading
shared libraries: libXss.so.1: cannot open shared object file: No such file or directory

$ sudo apt-get install libxss1

error while loading
shared libraries: libnss3.so: cannot open shared object file: No such file or directory

$ sudo apt-get install libnss3-dev

error while loading
shared libraries: libasound.so.2: cannot open shared object file: No such file or directory

$ sudo apt-get install libasound2

(electron:21834): Gtk-WARNING **: 22:13:07.994: cannot open display:

なんだこのエラー…と調べたらどうもGUIの設定がされていないというエラーのようです（そりゃそうだ）。

electronの元となっているchromiumのディスカッションで同じ質問をしている人が居て気づく。

以下のサイトを参考にVcXsrvをインストール。

sudo apt-get install x11-apps x11-utils x11-xserver-utils fonts-ipafont

export DISPLAY=localhost:0.0

$ sudo yarn electron:serve

できた。

※ buildできたら追記します。