isolated-react

クラシックなWebアプリケーション(Node.js + EJS)に、後付けで Vite + React 環境を追加し、さらにShadow DOMを使って既存ページの一部としてReactを表示するサンプルです。

このリポジトリでは、次の流れをまとめて確認できます。

1. 既存のクラシックWebアプリ(Node.js + EJS)がある
2. frontend/ に Vite + React を追加する
3. ReactをShadow DOMに描画する
4. TailwindをShadow DOM内で動かす

何を学べるか

• 既存のWebアプリ(Node.js)に、フロントエンド環境を後付けする手順
• Viteの開発環境と本番ビルドの切り分け
• ReactをShadow DOMに描画する実装
• Shadow DOM内にCSSを適用する方法

ディレクトリ構成

/
├── server.js
├── lib/
│   └── random.js
├── views/
│   ├── random.ejs
│   └── random-react.ejs
├── public/
│   └── react/
│       ├── assets/
│       │   ├── index.js
│       │   └── frontend.css
│       └── ...
└── frontend/
    ├── src/
    │   ├── build.tsx
    │   ├── main.tsx
    │   ├── RandomApp.tsx
    │   ├── IsolatedScope.tsx
    │   └── reactRenderer.tsx
    ├── vite.config.ts
    └── package.json

実行方法

ルート側

npm install
npm run server

• EJSの確認: http://localhost:3000/random
• React埋め込みページ: http://localhost:3000/random-react

frontend 側

cd frontend
npm install
npm run dev

• React単体の確認: http://localhost:5173/

本番用ビルド

npm run frontend:build

• 出力先: public/react/
• その後、ルート側のサーバーを起動して http://localhost:3000/random-react を開くと、Node.jsアプリの中にReactが表示されます

主要ファイル

server.js

• Expressサーバーの起点
• EJSテンプレートの表示
• /api/random の提供
• /random-react の表示

views/random.ejs

• EJSのみで乱数を表示するページ

views/random-react.ejs

• React bundleを読み込むページ
• EJSで受け取った値をReactの初期値として渡す

frontend/src/RandomApp.tsx

• 画面に表示するReactコンポーネント
• ボタン押下で /api/random を呼び出す

frontend/src/IsolatedScope.tsx

• Shadow DOMを作成し、その中にReactを描画するためのコンポーネント

frontend/src/reactRenderer.tsx

• ReactコンポーネントをShadow DOM内へ表示するためのヘルパー

frontend/src/build.tsx

• 本番ビルド用のエントリポイント
• RandomApp と reactShadowDOMRenderer をexportして、/react/assets/index.js から利用できるようにする

frontend/vite.config.ts

• Viteの設定
• ビルド成果物の出力先を ../public/react (既存Webアプリ)にしている
• 開発時は http://localhost:3000 に対して /api をproxyしている

チュートリアル

手順を順番に追いたい場合は、別ファイルのTUTORIAL.md参照してください。

補足

このサンプルでは、開発用と本番用で入口を分けています。

• 開発用: frontend/src/main.tsx
• 本番用: frontend/src/build.tsx

これは「Vite単体でReactを触る時」と「既存 Node.jsアプリへ埋め込む時」で役割を分けるためです。