Zenn
⛳

Tauri + Next.js + TypeScriptで開発する準備

2022/09/02に公開
Rust
Tauri
tech

Rust+JSでデスクトップアプリの開発が出来るTaruiで開発する環境を作ったのでメモ。とはいえ環境を作ったといってもほぼやることはなくて、雛形作ってLintやVSCodeの設定を整えるだけだった。特に難しいことはない。

プロジェクト作成

$ npm create tauri-app
✔ Project name · try-tauri
✔ Choose your package manager · npm
✔ Choose your UI template · next-ts
  • npm create tauri-appをすると雛形を作れる。
  • Choose your package managerではcargoやyarnなどから好きなものを選ぶ。
    • ただ、cargoを選ぶとフロントエンドはVanillaかyewの２種類のみになるので微妙かも。普通にnpmで良さそう。
  • Choose your UI templateはnpmかyarnを選べばVanilla,React,VueはもちろんSvelte,Preact,Nextまで沢山あって便利。
  • 今回はNext.js + TypeScriptにしたいのでnext-tsを選んだ。これで準備の99%は完了。

実行

下記を実行するとHello WorldのGUIが立ち上がる。

$ npm run tauri dev

初回はコンパイルが終わるまで結構時間がかかるので注意。

lintやformatterの整備

フロントエンド用のLintやFormatterなどの設定。

.prettierrc.js

module.exports = {
  singleQuote: true,
  semi: false,
  trailingComma: "none",
};

.prettierignore

package.json
package-lock.json

eslintのインストール。

$ npm install -D eslint eslint-config-next

.eslintrc.json

{
  "extends": "next/core-web-vitals"
}

VSCodeの設定

 {
  "editor.formatOnSave": true,
  "editor.inlayHints.fontFamily": "Courier New",
  "editor.inlayHints.fontSize": 14,
  "workbench.colorCustomizations": {
    "editorInlayHint.foreground": "#868686f0",
    "editorInlayHint.background": "#3d3d3d48",
    "editorInlayHint.typeForeground": "#fdb6fdf0",
    "editorInlayHint.parameterForeground": "#fdb6fdf0"
  },
  "[rust]": {
    "editor.defaultFormatter": "rust-lang.rust-analyzer",
    "editor.formatOnSave": true
  },
  "[toml]": {
    "editor.formatOnSave": false
  },
  "rust-analyzer.linkedProjects": [
    "/Home/dev/src-tauri/Cargo.toml" <= ここは絶対指定のPATHでCargo.tomlまで含めて記述しないとだめ
  ]
	}
  • 色とかHintsのサイズとかはお好み。
  • code .でプロジェクトのルートで開いて開発する場合は"rust-analyzer.linkedProjects"でCargo.tomlの場所を指定してあげないとエラーが出る。
  • あとtomlでeditor.formatOnSaveをfalseにしてるのは.prettierignoreがサブディレクトリのCargo.tomlに効かないから。

その他ちょっとしたハマりどころ

VSCodeでエラー

デフォルトだとVSCode側でsrc-tauri/src/main.rsにて下記のエラーが発生してる。

proc macro panicked
message: The `distDir` configuration is set to `"../dist"` but this path doesn't exist
  • distディレクトリをプロジェクトのルートに作成すれば消える

release buildでエラー

  • 雛形作成したままの状態でrelease buildを作成しようとするとエラーが出る。
  • tauri.config.jsonに記述されているicon.icncがプロジェクトにないので失敗するっぽい。
  • これはMacApp用のアイコンっぽいんだけど別になくてもビルドはできるのでここの記述は消しちゃってbuildしても良さそう。必要ならicon.icncを頑張って作る。

リソース

Discussion