新規ページ追加

ページは内部ページと外部ページに分類されます。
内部ページはサイト内で利用され、ログインが必要です。ページ移動はフロントエンドのルーティング規則に基づいて行われ、すべてのページがindex.htmlを参照します。
外部ページは独立したHTMLエントリーファイルです。主に公開フォームやレコード共有など外部向けページで利用され、一般的にログインは不要です。

---

内部ページの追加

新規ページのコンポーネントは src/pages 配下に追加します。（ここではコンポーネントのみ公開し、DOMへのレンダリングは外部処理で一括管理します。）

アプリケーション内ページ追加手順

1. ページ作成
   

2. ルート追加
   

3. ボタン追加
   

4. 完了
   

---

アプリケーション外ページ追加手順

src/router/config.js のルート設定ファイルに custom/hello のページを追加します。新しいパスは必ず custom/ で開始してください。他の接頭辞を追加する場合は、docker/rewrite.setting で対応するリライト規則も追加してください。

http://localhost:30001/custom/hello にアクセスすると、新規ページが追加されたことが確認できます。

内部ページの右側には既定でメッセージ一覧が表示されます。不要な場合は、src/router/config.js の withoutChatPathList にルールを追加することでメッセージ一覧を非表示にできます。

ページを更新すると、右側のメッセージ一覧が表示されなくなっています。

---

独立ページの追加

welcome.html ファイルを src/html-templates 配下に追加します。HTML構築時にはejsコンパイルを利用できるため、html内でejs構文が利用可能です。ejsコンパイル時には、apiServer と publicPath の2つの変数が渡されます。

• apiServer はバックエンドサービスのアドレス指定に使用します。（バックエンドAPI利用時に必要）
  
• publicPath は静的ファイルのホスティング用アドレス指定に使用します。（モジュール内の非同期スクリプト読込時に必須です）

通常、下記2行のコードをhtmlファイルに含め、すべてのスクリプト読込前に変数宣言されていることを確認してください。

<script>
var __api_server__ = <%= apiServer %>;
var __webpack_public_path__ = '<%= publicPath %>';
</script>

プロジェクト内のリソースマッピングはプロキシ規則に依存しているため、docker/rewrite.setting に対応するリライト規則の設定も必要です。

ビルドツールの再起動もしくはコンソールで gulp generate-mainweb コマンドを実行し、http://localhost:30001/custom/hello にアクセスしてください。

この時点では静的ページとなっていますが、ここからReactコンポーネントをページ上にレンダリングします。

---

対応するReactコンポーネントを追加します。内部ページの場合と異なり、各自で該当DOMにコンポーネントをレンダリングする必要があります。

welcome.html に戻り、<body> 終了タグ直前に <script src="webpack[single]?src/pages/welcome.jsx"></script> を追加します。
ビルドツールはエントリを自動抽出し、公開時にsrcを公開リソースアドレスで自動置換します。ビルドツール再起動後、http://localhost:30001/custom/hello にアクセスすると、Reactコンポーネントが正常にページへレンダリングされていることを確認できます。