概要

背景

  • Dioxusは Rust 製の GUI フレームワークで、マルチプラットフォームが特徴
    • コンポーネントの記述はほぼReact
  • 当初は Github Actions から Github Pages にデプロイしようとしていた
    • dioxus-cliのインストールが 10 分くらいかかるし、結局うまくいかなかったので Netlify にデプロイ
    • （補足）Dioxus Deployが近日中にリリースされるらしい。それまでは Netlify でいいのでは

詳細

ここではDioxusのプロジェクト作成からデプロイまでを簡単に説明する。

説明にあたり簡単なポモドーロタイマーのアプリを Github Copilot に作ってもらった。

ソースコードはpomodoro_timerに格納。

見るからに AI が作りました！というデザイン

プロジェクトの作成

公式の Getting Startedを参考にdioxus-cliをインストール。

ターミナルからdx --versionが実行できればインストール完了。

次にプロジェクト作成のためにターミナルからdx init <project名>を実行する。

(今回サブテンプレートは Bare-Bones を選択した。)

※ サブテンプレートについては（参考 by Claude 3.7 Sonnet）Dioxus のサブテンプレートについて を参照

（dx initしたら一度dx serveを実行して、サンプルページが表示されることを確認すると良き）

あとはmain.rsやcargo.tomlを作っていくだけ。

動作確認／bundle

動作確認にはターミナルからdx serveを実行する。

bundle するにはdx bundle --platform webをターミナルで実行

→target\dx\<project_name>\release\web\publicに html とその他の asset が生成される。

Netlify にデプロイ

Netlify にログインして、前セクションのpublicディレクトリをドラッグアンドドロップする。（publicディレクトリの中身ではなく、publicフォルダ自体を入れる）

↓ にドラッグアンドドロップ Netlifyのドラッグアンドドロップ先

これでデプロイが完了。

（参考 by Claude 3.7 Sonnet）Dioxus のサブテンプレートについて

# Dioxus のサブテンプレートについて

Dioxus の`dx new`コマンドで表示される「サブテンプレート」は、新しいプロジェクトの初期構造を決める選択肢です。調査によると、以下の 3 つのオプションがあります：

## 1. Bare-Bones（ベアボーン）

最もシンプルな構成です。

- main.rs ファイルと assets フォルダのみの基本的なセットアップ
- 最小限の依存関係
- 基本的な App コンポーネント以外の事前構築されたコンポーネントはなし

小規模なアプリケーションや、プロジェクト構造を一から構築したい場合に適しています。

## 2. Jumpstart（ジャンプスタート）

より整備された構造を提供します。

- 事前定義されたフォルダ構造
- サンプルコンポーネント
- ビューやページのための推奨構成
- アプリケーション構築のためのより構造化されたアプローチ

最初からいくつかのベストプラクティスを組み込みたい場合に便利です。

## 3. Workspace（ワークスペース）

最も包括的なオプションです。

- 異なるプラットフォーム（ウェブ、デスクトップ、モバイル）用の個別のクレートを持つ完全な Cargo ワークスペースを作成
- プラットフォーム固有のコードを維持しながら共通コンポーネントを共有する必要があるクロスプラットフォームアプリケーションに適している

## 選択後のプロセス

サブテンプレートを選択した後、CLI は通常以下のような追加の設定質問をします：

- Dioxus Fullstack を使用するかどうか
- Dioxus Router を使用するかどうか
- Tailwind CSS を使用するかどうか
- デフォルトのプラットフォーム（ウェブ、デスクトップなど）

## 推奨

ポモドーロタイマーのような比較的シンプルなアプリケーションを構築する場合は、Bare-Bones テンプレートで十分かもしれません。複数のビューやコンポーネントを持つより複雑なアプリケーションを計画している場合は、Jumpstart テンプレートがより良い初期構造を提供します。ウェブ、デスクトップ、潜在的にモバイルで動作するクロスプラットフォームアプリケーションを作成する予定がある場合は、Workspace テンプレートが最も適しています。