wails v2でvueテンプレートを作った手順

要約

wails v2でvueを使えるテンプレートを作った。これ
これはその時の作業記録

動機

マルチプラットフォーム対応のデスクトップアプリケーションをgoで作りたかった。
できるだけ一つのプラットフォームで開発して、他は最低限の確認すればOKとしたかったため、ブラウザエンジン組み込み型にすることにした。
フロントのフレームワークはvueを使いたかったけど、v2には公式テンプレートが用意されていない。
すでにテンプレートを作ってくれている人はいるけど、viteを使っていて慣れなかったのでnpmを使ったものを作ることにした。
あと、wailsの仕組みを理解するのにもいいかなと思った。

wails

比較的アクティブで、構成がシンプルで何をやっているかわかりそうなwailsを選択した。
v2がbetaになっていたため、今から使い始めるならv2を使おうと決めた。v1ならvueの公式テンプレートがある。

作成手順

wailsセットアップ

wailsのインストール手順は公式ページ通り。現在特に詰まることはない。
今回はwindows環境で作業。
go, nodeをインストールしておく。
手順通りにインストールして、プロジェクトを作成し、wails dev でアプリケーションが立ち上がることを確認する。

テンプレート生成

wailsには空のテンプレートを生成する機能がある。
wails generate template -name wails_vue_template
を実行すると、wails_vue_templateディレクトリにシンプルなテンプレートが生成される。
これをもとにテンプレートを作成していく。

vueのインストール

vue-cliをglobalインストールする。
別の作業用ディレクトリで vue create <name> を実行して、あとからテンプレートのfrontendディレクトリにコピーする作戦。
vueの構成としては、vuexとvue-routerを入れたかったので、手動設定を選んで、以下のようにした。

念のため、npm run serveを実行、ブラウザでlocalhost:3000を開いて、正常に動作していることを確認する。

frontendへ移動

作成したvueのプロジェクトをfrontendディレクトリにコピーする。とりあえず全部上書きコピーしてしまえば大丈夫。
https://github.com/woogea/wails_vue_template/blob/main/app.tmpl.go#L35 このMethodをvue側から呼び出してみる。
https://github.com/woogea/wails_vue_template/blob/main/frontend/src/components/HelloWorld.vue#L22 のように呼び出せるよう、wailsによってbindされる。
package.jsonはwails initの実行時にテンプレートが適用されるので、リポジトリには含めない。package.tmpl.jsonにpackage.jsonの内容を転記する。テンプレーティングが必要なnameとauthorは変数化しておく。
その他リポジトリに含めないものは .gitignoreを参照。
goとnodeの.gitignoreテンプレートを元に、wailsに関するものは最後のほうに記載してある。

実行してみる

ここまでの成果物をリポジトリに一旦上げてみて、うまくいくか確認する。
wails init -t <リポジトリ> -n <project name>
を実行して、今上げたリポジトリのテンプレートを使ってプロジェクトを生成する。
wails devを実行して、想定通りに動作していることを確認する。
うまくいかなかったら、今作成したプロジェクトで試行錯誤して、テンプレートのほうにフィードバックしていく。

ハマリポイント

いくつか気にするポイントがある。

• Vue-routerでHistoryを有効にする場合、モードはWebHashHistoryの方を選択すること。WebHistoryだと、ページ遷移時にgoに埋め込まれたリソース参照でエラーになる。wails側で想定されていない模様。
• frontend/distを空にしたり、リポジトリにディレクトリを含めないようにしたくなるが、wailsはディレクトリが存在しないか、ディレクトリ内にgo:embedできないファイルしかない状態だとwails devの実行でエラーになる。適当なダミーのhtmlファイルを置いておくと、frontendのnpm install && npm run buildが実行され、成果物がdistに上書きされてうまくいく。埋め込み可能ファイルがあるかどうかのチェックと、distの更新処理の順番が逆になってしまっている模様。

使い方

wailsをインストールした状態で
wails init -t https://github.com/woogea/wails_vue_template -n <project name>
を実行する。
に移動して
wails dev
を実行する。

このようなシンプルな画面が表示されたらうまくいっている。
この状態で、別ターミナルを開いて、/frontend に移動し、npm run watchを実行すると、front側の変更がhot reloadされる。

本当は、wails devコマンドだけでhot reloadできると良いが今はforegroundで完了を待つためwatchすると先に進まない。https://github.com/wailsapp/wails/pull/1170 がリリースされるとバックグラウンド実行が可能になるので更新予定。