NxでTauriを管理する。

2024/05/07に公開

Tauri製のアプリをNxで管理する。

前提

  1. Nxのモノリポはすでにできている。
  2. Next.jsを用いて基になるWebアプリ(アプリ名はWeb)が作成されている。
  3. Desktop用としてTauriのアプリ(アプリ名はDesktop)を追加する。

つまり

Tauri製のアプリを追加する.

まずapps以下にdesktop/srcというディレクトリを作成します。

cd apps/desktop/src
npm run Tauri init

desktop/src/project.jsonを作成します。これがあるとVSCodeのNx Consoleが認識してくれます。

project.json
{
  "name": "desktop",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "projectType": "application",
  "sourceRoot": "apps/desktop",
  "tags": [],
  "targets": {
    "dev": {
      "executor": "nx:run-commands",
      "outputs": [],
      "options": {
        "command": "npm run tauri dev",
        "cwd": "apps/desktop"
      }
    }
  }
}

Tauriの設定ファイルのbuildセクションも書き換えます。

tauri.confi.json
{
  "build": {
    "beforeBuildCommand": "nx run web:build",
    "distDir": "../../gaku-note/out",
    "devPath": "http://localhost:3000"
  },
  // ...
}

beforeBuildCommandというのもありますが、これに指定しても開発モードは始動しなで延々と待つ羽目になります。面倒ですが手動でwebアプリを開発モードで起動する必要があるようです。

beforeBuildCommandの設定

beforeBuildCommandはnextコマンドを呼び出せばちゃんとできました。

{
  "build": {
    "beforeBuildCommand": "npx next build",
    "beforeDevCommand": "npx next dev -p 3000",
    "devPath": "http://localhost:3000",
    "distDir": "../out"
  },
}

Discussion