Murasaki
はじめに

プロジェクト構成

Murasaki アプリの中で何がどこにあるか。

スキャフォールドされたアプリは、Next.js プロジェクトのように見えます。触るのは src/murasaki.config.ts だけです — アプリシェルとクライアントのブートストラップは Murasaki が管理するため、index.html やエントリーファイルを管理する必要はありません。

my-app/
├─ src/
│  ├─ app/                    # ページ、レイアウト、globals.css(ファイルベースルーティング)
│  │  ├─ layout.tsx           # ルートレイアウト — children を <App> でラップする
│  │  ├─ page.tsx             # "/" ルート
│  │  └─ about/page.tsx       # "/about" ルート
│  ├─ api/                    # API ルートハンドラ -> /api/*
│  │  ├─ hello/route.ts       # GET/POST ハンドラ
│  │  └─ greet/[name]/route.ts # 動的セグメント -> /api/greet/:name
│  ├─ main.ts                 # 長寿命 Node lifecycle (任意)
│  ├─ backend/                # 'use main' module の一般的な配置 (任意)
│  ├─ middleware.ts           # すべてのナビゲーションの前に実行される(任意)
│  ├─ lib/                    # アプリのコード(ストア、コンテキストメニューのアクション、ヘルパー)
│  └─ assets/                 # 画像、アイコン
├─ murasaki.config.ts         # アプリの識別情報、ウィンドウ、署名
├─ tailwind.config.ts
├─ vite.config.ts             # murasaki の Vite プラグインを配線する
└─ package.json

スキャフォールド自体に src/actions.ts は含まれていませんが、'use server' 関数を置く一般的な場所です — 詳しくはServer Actionsを参照してください。'use server' ファイルは src/ 配下のどこにでも置け、src/app/src/api/ に縛られません。

src/app/ — ルート

src/app/**/page.tsx を対象にしたファイルベースルーティングで、layout.tsx、動的な [param] セグメント、loading / error / not-found バウンダリを備えています。ルートレイアウトはすべてを <App> でラップします。詳しくはルーティングを参照してください。

src/api/ — API ルート

src/api/<path>/route.ts は HTTP メソッドごとに1つの関数をエクスポートし、/api/<path> として提供されます。これらは開発時・本番時ともサーバー(Node)上で実行されます。詳しくはAPI Routesを参照してください。

Server Actions

src/app/src/api/ と違い、専用のフォルダはありません — 'use server' 関数はファイルをどこに置いてもサーバー上で実行され、クライアントからは useAction で呼び出します。詳しくはServer Actionsを参照してください。

Node Main と 'use main'

src/main.ts は、長寿命の Node.js リソースと安全な終了処理を管理します。トップレベルに 'use main' ディレクティブを持つモジュールは、レンダラーから Node.js を呼び出す型付き関数を公開し、src/ 以下のどこにでも配置できます。src/backend/ は便宜的な規約にすぎません。詳しくはNode Mainを参照してください。

murasaki.config.ts

アプリの識別情報、ウィンドウ、ビルド設定を記述します:

murasaki.config.ts
import { defineConfig } from 'murasaki'

export default defineConfig({
  appId: 'com.example.my-app',
  productName: 'My App',
  version: '0.1.0',
  icon: 'src/assets/icon.png',
  window: { width: 1000, height: 700 },
})

すべてのフィールドについては設定を参照してください。

次へ

GitHub でこのページを改善

On this page