Angular, Nx, Rust, Tauri で始めるデスクトップアプリ開発入門

$ npm -v       # 10.8.3  
$ node -v      # v22.9.0  
$ yarn -v      # 1.22.22  
$ pnpm -v      # 9.12.1  
$ rustc --version  # rustc 1.83.0  
$ rustup --version # rustup 1.27.1  

$ mkdir desktop
$ cd desktop

$ npx tauri init

# アプリケーション名
✔ What is your app name? · tauri desktop app

# ウィンドウタイトル部の名前
✔ What should the window title be? · tarui desktop app 

# Web アプリ（Angular）の assets 
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../../dist/apps/frontend

# Web アプリ（Angular）の サーバー指定
✔ What is the url of your dev server? · http://localhost:4200/

# Web アプリ（Angular）の サーバー起動コマンド
✔ What is your frontend dev command? · npx nx serve frontend

# Web アプリ（Angular）の ビルドコマンド
✔ What is your frontend build command? · npx nx build frontend

"build": {
  "frontendDist": "../../../dist/apps/frontend",
  "devUrl": "http://localhost:4200/",
  "beforeDevCommand": "npx nx serve frontend",
  "beforeBuildCommand": "npx nx build frontend"
}

  "app": {
    "windows": [
      {
        "title": "tarui desktop app",
        .....
      }
    ],
    .....
  },

$ npx tauri build
  Error You must change the bundle identifier in `tauri.conf.json identifier`. The default value `com.tauri.dev` is not allowed as it must be unique across applications.

....
  "$schema": "https://schema.tauri.app/config/2.0.0-rc",
  "productName": "tauri desktop app",
  "version": "0.1.0",
-  "identifier": "com.tauri.dev",
+  "identifier": "tauri.desktop.app",
....

{
  "$schema": "https://schema.tauri.app/config/2.0.0-rc",
  "productName": "tauri desktop app", 
  "version": "0.1.0",
  "identifier": "tauri.desktop.app",
  "build": {
    "frontendDist": "../../../dist/apps/frontend",
    "devUrl": "http://localhost:4200/",
    "beforeDevCommand": "npx nx serve frontend",
    "beforeBuildCommand": "npx nx build frontend"
  },
  "app": {
    "windows": [
      {
        "title": "tarui desktop app",
        "width": 800,
        "height": 600,
        "resizable": true,
        "fullscreen": false
      }
    ],
    "security": {
      "csp": null
    }
  },
  "bundle": {
    "active": true,
    "targets": "all",
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/[email protected]",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}

$ npx nx serve frontend

$ npx tauri build

$ npm install @tauri-apps/api --save-dev

  {
    "compileOnSave": false,
    "compilerOptions": {
      ......
      "baseUrl": ".",
-     "paths": {}
+     "paths": {},
+     "types": ["@tauri-apps/api"]
    },
    "exclude": ["node_modules", "tmp"]
  }

  #[cfg_attr(mobile, tauri::mobile_entry_point)]
  pub fn run() {
  tauri::Builder::default()
+     .invoke_handler(tauri::generate_handler![double_value]) // tauri コマンドを追加
      .setup(|app| {
        if cfg!(debug_assertions) {
          app.handle().plugin(
            tauri_plugin_log::Builder::default()
              .level(log::LevelFilter::Info)
              .build(),
          )?;
        }
        Ok(())
      })
      .run(tauri::generate_context!())
      .expect("error while running tauri application");
  }
+ 
+ // 入力値を2倍にする関数
+ #[tauri::command]
+ fn double_value(value: i32) -> i32 {
+   value * 2
+ }

  "app": {
    "windows": [
      {
        "title": "tarui desktop app",
-        "width": 800,
+        "width": 400,
-       "height": 600,
+       "height": 300,
        "resizable": true,
        "fullscreen": false
      }
    ],
    "security": {
      "csp": null
    }
  },

  import { Component } from '@angular/core';
- import { RouterModule } from '@angular/router';
+ import { RouterOutlet } from '@angular/router';
  import { NxWelcomeComponent } from './nx-welcome.component';

  @Component({
-   imports: [NxWelcomeComponent, RouterModule],
+   imports: [NxWelcomeComponent, RouterOutlet],
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrl: './app.component.scss',
  })
- export class AppComponent {
-   title = 'frontend';
- }
+ export class AppComponent {}

- import { Component, ViewEncapsulation } from '@angular/core';
+ import { Component } from '@angular/core';
- import { CommonModule } from '@angular/common';
+ import { FormsModule } from '@angular/forms';
+ import { invoke } from '@tauri-apps/api/core';

  @Component({
    selector: 'app-nx-welcome',
-   imports: [CommonModule],
+   standalone: true,
+   imports: [FormsModule],
    template: `
-     <!--
-       * * * * * * * * * * * * * * * * * * * * * * * * * * * *
-    .......
+   <div>
+     <h1>Double Your Number</h1>
+     <input
+       [(ngModel)]="inputValue"
+       type="number"
+       placeholder="Enter a number"
+     />
+     <button (click)="doubleValue()">Double</button>
+     @if (result !== null) {
+       <p>Result: {{ result }}</p>
+     } @else {
+       <p>before calculation</p>
+     }
+   </div>
  `,
    styles: [],
-   encapsulation: ViewEncapsulation.None,
  })
-  export class NxWelcomeComponent {}
+  export class NxWelcomeComponent {
+     inputValue = 0; // ユーザーの入力値
+     result: number | null = null; // 計算結果
+
+    async doubleValue() {
+      // Rust 側の `double_value` コマンドを呼び出す
+      this.result = await invoke<number>('double_value', {
+        value: this.inputValue,
+      });
+    }
+  }