pnpm を利用して依存関係をインストールする。
pnpm installフロントエンドの開発サーバを起動する。
pnpm run dev:clientこれは Vite によって起動されており単体では API へのリクエストは行えないが、下記のサーバーを起動した状態であればその限りではない。
サーバーを起動する。
# pnpm run build を先に実行しておく必要がある
pnpm run dev:serverこれは nodemon によって起動され、src/server または src/domain 配下を編集すると自動で再起動される。
build されたフロントエンドのリソースを静的ファイルとして読み込んで利用しており、ブラウザで UI も含め確認することができる（pnpm run build:client を実行しない限りフロントエンドの編集は反映されない）。
ローカル環境で npm パッケージを作成して playground ディレクトリで実行する。
pnpm run packこれは npx gitmemo と同じ挙動になる。
内部で npm pack しており環境によってはうまくいかないかもしれない。npm ver.8.15.0 では意図した通りに動作した。
オニオンアーキテクチャの**をベースにしている。
| パッケージ名 | 役割 |
|---|---|
| Commands | コマンドラインでユーザーによって実行される |
| Api | フロントエンドとやりとりをする |
| Repositories | 抽象化されたデータ永続化ロジック |
| Controllers | リクエストを元に Repository を Usecases に DI する |
| Usecases | アプリケーション固有のロジック（このシステムが何をするか）を表現する |
| Domain | ドメインオブジェクトとルール |
| Components | UI コンポーネント |
| Pages | ページを表示する |
| Public/Assets | 画像等の静的ファイル |
| Composables | ステートフルなロジック |
UML
@startuml
rectangle src {
rectangle Client {
rectangle Pages
rectangle Components
rectangle PublicAssets
rectangle Composables
Components --> PublicAssets
Components --> Composables
Pages -> Components
Pages -> PublicAssets
Pages --> Composables
}
rectangle Server {
rectangle Api
rectangle Commands
rectangle Controllers
rectangle Repositories
rectangle Usecases
Controllers -> Repositories
Commands --> Controllers
Api --> Controllers
Controllers --> Usecases: Repositoryを注入する
}
rectangle Domain
Usecases --> Domain
Repositories --> Domain
Pages ---> Domain
Components --> Domain
Composables --> Domain
Api ..> Client: ビルドされたリソースを参照する
}
@enduml
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent