いままで覚えるのが面倒とかいう理由でフロントエンドのフレームワークを使用せずに素のTypescriptでゴリゴリ書いていたが、そろそろ限界というかネタ不足と言うことで、TauriアプリケーションにおいてReactをフロント側のフレームワークとして使用することにしました。
ということで、Typescript+Reactをフロントエンドに使用したTauriアプリケーション開発準備メモ。
以下のような手順でアプリケーションを作成します。
- プロジェクトディレクトリの作成
- フロントエンドの準備
- Tauri (Rust)プロジェクトの作成
- コンパイル
プロジェクトディレクトリの作成
アプリケーション名に準ずるディレクトリを作成して、移動します。
フロントエンドの準備
npmの初期化を行い、Webpack、Typescript、 Sass、Reactをインストールします
$ npm init -y
$ npm install -D webpack webpack-cli webpack-dev-server
$ npm install -D typescript ts-loader sass style-loader css-loader postcss-loader sass-loader
$ nom install -D babel-loader @babel/core @babel/preset-env
$ npm install -S react react-dom @types/react @types/react-dom
$ npm install -D @babel/preset-react
package.jsonに デバッグ/ビルド script を追加
scripts: {
"build": "webpack",
"dev": "webpack serve"
},
typescriptの設定初期化
$ npx tsc --init --target es6 \
--module es2022 \
--lib es2022,DOM \
--sourceMap true \
--moduleResolution node \
--allowSyntheticDefaultImports true \
--resolveJsonModule true \
--jsx react
webpack.config.js作成
webpack.config.js
const path = require("path");
module.exports = {
mode: "development",
entry: './src/index.tsx',
output: {
path: path.join(__dirname, "dist"),
filename: "main.js",
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/react']
},
},
{
loader: 'ts-loader',
options: {
configFile: path.resolve(__dirname, 'tsconfig.json'),
},
},
],
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
},
{
test: /\.scss$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'postcss-loader',
}, {
loader: 'sass-loader'
}]
},
{
test:/\.SVG$/,
type: 'asset/source',
},
{
test:/.(gif|svg|png|jpg|jpeg|JPG)$/,
type: 'asset', /** default <8kb: inline, >8kb: resource */
generator: {
filename: 'image/[hash].[ext]',
}
},
{
test:/.(mp3|wav|aac)$/,
type: 'asset/resource',
generator: {
filename: 'audio/[hash].[ext]'
}
},
{
test:/.(woff|woff2|eot|ttf|otf)$/,
type: 'asset/resource',
generator: {
filename: 'font/[hash].[ext]'
}
}
]
},
devServer: {
static: {
directory: path.join(__dirname, 'dist'),
},
port: 3000,
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".json", ".wasm"]
},
experiments: {
outputModule: true,
asyncWebAssembly: true,
},
target: 'web',
};
ソースディレクトリ(src)と生成物ディレクトリ(dist)の作成とテンプレ作成
dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tauri App Title</title>
<script async type="module" src="main.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
new Promise(resolv => window.onload = resolv).then(() => {
const root: ReactDOM.Root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
<div>sample contents</div>
);
});
Tauriプロジェクトの作成
$ cargo tauri init
ターゲットディレクトリを../distとするほか、フロントエンドが先に作成されているのでデフォルト通りでOK。
コンパイル＆デバッグ
$ cargo tauri dev
その他UI構築にbootstrapを使いたい場合は
$ npm install -D bootstrap @types/bootstrap react-bootstrap @types/react-bootstrap
と、当然Tauri APIを使用するなら
$ npm install -D @tauri-apps/api
など・・・・とな。