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を参照してください。

サーバーアクション

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

Node Main と 'use main'

src/main.ts は長寿命 Node resource と graceful shutdown を所有します。top-level に 'use main' を持つ module は型付き renderer-to-Node function を公開し、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 },
})

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

次へ

GitHub でこのページを改善

On this page