@syzy/apphost 1.0.1

package/README.md

@@ -0,0 +1,184 @@
+## Overview
+
+## This project is the App Host application in a micro-frontend architecture using:
+
+```js
+ React + TypeScript
+ Vite
+ Module Federation (@originjs/vite-plugin-federation)
+
+```
+App Host dynamically loads remote micro UIs such as Booking UI, Grocery UI, etc., at runtime.
+Each remote exposes components which App Host consumes through module federation.
+
+## Environment Configuration
+
+The project uses .env files for environment-specific settings.
+
+Example .env file
+
+# Uppercase full project name
+APP_NAME=HMS
+
+# Remote Booking UI bundle URL
+VITE_BOOKING_UI_REMOTE=http://localhost:4173/dist/assets/booking-UI.js
+
+# Remote Booking UI server URL
+VITE_APP_HOST_SERVER_URL=https://jta26gfu55gapk5fbzjtxkvqsi.appsync-api.ap-south-1.amazonaws.com/graphql
+
+## Environment Loading
+
+VITE_BOOKING_UI_REMOTE tells App Host where to load the remote booking UI bundle.
+
+## If not provided, App Host uses:
+
+```js
+http://localhost:4173/dist/assets/booking-UI.js
+
+```
+
+## Running the Project
+## Development
+   npm run dev
+
+## Runs the project on:
+    http://localhost:3000
+
+## Build
+    npm run build
+
+## Preview Production Build
+    npm run preview
+
+## Module Federation Setup
+
+App Host uses module federation to load micro UIs at runtime.
+
+## Federation Config (App Host)
+
+## Below is the configuration snippet from vite.config.ts:
+
+```js
+export default defineConfig(({ mode }) => {
+  // load env for current mode; third arg '' returns all keys (or pass 'VITE_' to filter)
+  const env = loadEnv(mode, process.cwd(), '')
+
+  // access your variable (defined in `.env` as VITE_SUBSCRIPTION_REMOTE)
+  const remoteBookingUI = env.VITE_BOOKING_UI_REMOTE ?? 'http://localhost:4173/dist/assets/booking-UI.js'
+
+  return {
+    plugins: [react(), federation({
+      name: 'App_Host',
+      remotes: {
+        bookingUIApp: remoteBookingUI
+      },
+      shared: {
+        react: { singleton: true, requiredVersion: false, eager: true } as any,
+        'react-dom': { singleton: true, requiredVersion: false, eager: true } as any,
+        'react-router-dom': { singleton: true, requiredVersion: false } as any,
+        'react-bootstrap': { singleton: true, requiredVersion: false } as any,
+        'react-select': { singleton: true, requiredVersion: false } as any,
+        "@tanstack/react-query": { singleton: true } as any,
+        'react-toastify': { singleton: true, requiredVersion: false, eager: true } as any,
+      }
+    })],
+    server: {
+      port: 3000
+    },
+  }
+});
+```
+
+## Expected Remote Structure (Booking UI / Others)
+
+## Every remote micro UI must:
+
+ 1) Use Vite + Module Federation
+
+ 2) Expose components as federated modules
+
+ 3) Build and host a bundle file such as:
+
+```js
+booking-UI.js
+```
+
+## Remote Micro UI Example (Booking UI)
+```js
+federation({
+  name: "bookingUIApp",
+  filename: "booking-UI.js",
+  exposes: {
+    "./AmenityForm": "./src/components/AmenityForm.tsx",
+    "./RoomCategoryForm": "./src/components/RoomCategoryForm.tsx",
+    "./ExtraRequirementForm": "./src/components/ExtraRequirementForm.tsx",
+    "./ReservationForm": "./src/components/ReservationForm.tsx",
+    "./CreateRoomForm": "./src/components/CreateRoomForm.tsx"
+  },
+  shared: ["react", "react-dom"]
+});
+```
+
+## Importing Remote Components (Inside App Host)
+
+Once the remote bundle is loaded, App Host can import components like:
+
+```js
+import AmenityForm from "bookingUIApp/AmenityForm";
+import RoomCategoryForm from "bookingUIApp/RoomCategoryForm";
+import ReservationForm from "bookingUIApp/ReservationForm";
+```
+## Folder Structure (App Host)
+```js
+App_Host/
+ ├── src/
+ │   ├── bookingModule/
+ │   │   └── components/
+ │   │       ├── AmenityForm.tsx
+ │   │       ├── CreateRoomForm.tsx
+ │   │       ├── ExtraRequirementForm.tsx
+ │   │       ├── ReservationForm.tsx
+ │   │       └── RoomCategoryForm.tsx
+ │   ├── main.tsx
+ │   └── App.tsx
+ ├── vite.config.ts
+ └── package.json
+ ```
+
+## TypeScript Module Declarations
+
+App Host includes declarations so TypeScript recognizes remote imports:
+
+```js
+declare module "bookingUIApp/AmenityForm";
+declare module "bookingUIApp/RoomCategoryForm";
+declare module "bookingUIApp/ExtraRequirementForm";
+declare module "bookingUIApp/CreateRoomForm";
+declare module "bookingUIApp/ReservationForm";
+```
+
+## Deployment (CDK)
+
+1) Deploy All Stacks
+
+```js
+ npm run deploy-all -- --env=hmsuat --profile=uattwo
+ npm run deploy-all -- --env=prod --profile=vekasa
+```
+
+## Deploy Specific Stack
+```js
+npm run deploy-all -- --env=hmsuat --profile=uattwo --stack=api
+npm run deploy-all -- --env=hmsuat --profile=uattwo --stack=bucket
+npm run deploy-all -- --env=hmsuat --profile=uattwo --stack=userPool
+npm run deploy-all -- --env=hmsuat --profile=uattwo --stack=idPool
+npm run deploy-all -- --env=hmsuat --profile=uattwo --stack=pipeline
+```
+
+## Final Notes
+
+1) App Host loads remote components dynamically using federation
+2) Remote micro UIs must expose federated modules
+3) .env controls which URL App Host loads for each remote
+4) Requires both host + remote to run in dev mode for testing
+