メインコンテンツへスキップ

UIレイヤー

アプリケーションのダッシュボードと一般的なインターフェースのインストールとコンパイル。

コンテキスト​

Netunoアプリケーションには、デフォルトでフロントエンド向けの高度な技術群が設定済みで、その中にはReact、Vite、Less、Ant.Designなどがあります。

アプリケーション内には 📁 ui(user interface、利用インターフェース)フォルダがあり、ここでダッシュボードやその他のフロントエンドコンポーネントを開発します。

始める前に​

前提条件であるBunがインストールされていることを確認してください。詳しくは:

依存モジュールのインストール​

デフォルトで用意されているすべての依存関係をインストールするには、開発中のアプリケーション内の 📁 ui(user interface)フォルダに移動します。例えば:

cd apps/my_app/ui/

依存モジュールのインストールコマンドを実行します:

bun install

BunはNPMよりも改善され最適化された代替手段です。

自動コンパイル​

開発中のアプリケーションの 📁 ui(user interface)フォルダに移動します。例えば:

cd apps/my_app/ui/

コードが変更されるたびにフロントエンドを自動でコンパイルするには、以下を実行します:

bun run watch

Bunがインストールされていることを確認してください。

フロントエンドとNetunoの自動統合​

Netunoでは、Netunoアプリケーションのサーバープロセスと一緒にUIを起動できます。

Reactのコンパイルメッセージはすべて、Netunoアプリケーションと同じターミナルに統合されます。

そのためには、Netunoアプリケーションの 📂 config/_development.json にある commands の設定を有効にするだけです。つまり、ui の path を持つ command で enabled を true にします:

config/_development.json
{
...
"commands": [
{
"enabled": true,
"path": "ui",
"command": "bun run watch"
}
],
...
}

Netunoアプリケーションの設定ファイルを編集するたびに、新しい変更を反映させるためにサーバーを再起動する必要があります。

最後に、Netunoアプリケーションでサーバーを起動/再起動して動作を確認してください。

これで、すべてが1つの集中ターミナルに統合され、複数のターミナルが散らばることを避けられます。詳しくは:

その他のフロントエンド技術​

📁 ui フォルダ内では、任意のフロントエンド技術を設定したり、必要に応じて新しい依存モジュールを追加したりできます。

標準の技術のいずれかを使用したくない場合は、特に以下のファイルを適応させることで、他の任意の技術に置き換えられます:

  • package.json
  • vite.config.js