🌊
TAURI でも最新の Angular が使いたい
はじめに
TAURI v2.0が安定版としてリリースされました。
TAURIで最新版のAngularを使う初期設定をまとめます。
TAURI の初期設定
TAURIの初期設定には2種類あリます。
create-tauri-app コマンドを使う方法
create-tauri-appコマンドを使うとターミナル上から開発環境やフレームワークを選択できます。
$ npm create tauri-app@latest
✔ Project name · tauri-app
✔ Identifier · com.tauri-app.app
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
✔ Choose your package manager · npm
✔ Choose your UI template · Angular - (https://angular.dev/)
$ cd tauri-app
$ npm install
$ npm run tauri dev
24年10月時点のAngularの最新はv18.2.9でしたが、create-tauri-appで入るAngularは v17.0.0 でした。
最新のAngularに追従したい場合はもうひとつのマニュアルセットアップが必要そうです。
マニュアルセットアップ (Tauri CLI)
Angularでマニュアルセットアップを行う場合、まずは最新のAngular CLIからプロジェクトを作成し、そのプロジェクト内でTAURIの設定を入れていきます。
npx tauri initでAngularの作法に沿って選択していきます。
$ ng new tauri-app
$ cd tauri-app
$ npm install -D @tauri-apps/cli@latest
$ npx tauri init
✔ What is your app name? · tauri-app
✔ What should the window title be? · tauri-app
? Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" fil✔ 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/tauri-app//browser
✔ What is the url of your dev server? · http://localhost:4200
✔ What is your frontend dev command? · npm run start
✔ What is your frontend build command? · npm run build
これで初期設定は完了です。
以下のコマンドでGUIが立ち上がるのを確認します。
$ npx tauri dev
まとめ
TAURIで最新版のAngularを使う初期設定をまとめました。
Githubでコードを公開しておきます。
Discussion