Ship Android app by wrapping CRA build with Capacitor (#20)
Unit Tests / test (pull_request) Successful in 26s
Unit Tests / test (pull_request) Successful in 26s
Add Capacitor 7 scaffolding (config, android/, npm scripts, .env.mobile), native back-button/safe-area chrome, icons/splash, and signing docs so llm-fe ships one codebase to web and Android.
This commit is contained in:
@@ -10,13 +10,16 @@ document root; the shared **web-static** nginx container from
|
||||
[server-infra](https://git.aimloperations.com/ai_ml_operations/server-infra) serves
|
||||
those assets. Same pattern as `dta_webapp`.
|
||||
|
||||
Android ships the same CRA `build/` via **Capacitor** (see `llm-fe/ANDROID.md`).
|
||||
|
||||
## Stack
|
||||
|
||||
- **React 18**, **TypeScript**, **Create React App** (`react-scripts` 5)
|
||||
- **Material UI (MUI) 5** + Emotion for components and theming
|
||||
- **React Router 6** for routing
|
||||
- **Axios** for REST against `chat_backend`
|
||||
- **React Router 6** for routing (`BrowserRouter` on web; `HashRouter` under Capacitor)
|
||||
- **Axios** for REST against `chat_backend` (JWT `Authorization` header)
|
||||
- **WebSocket** for live chat (`REACT_APP_BACKEND_WS_API_BASE_URL`)
|
||||
- **Capacitor 7** for Android (and later iOS) WebView shells
|
||||
- **Jest** + React Testing Library for unit tests
|
||||
|
||||
## Repository layout
|
||||
@@ -25,20 +28,26 @@ those assets. Same pattern as `dta_webapp`.
|
||||
chat_web_app/
|
||||
├── README.md
|
||||
├── .gitea/workflows/ # Unit tests + deploy-prod / deploy-beta
|
||||
└── llm-fe/ # CRA application (npm root)
|
||||
└── llm-fe/ # CRA + Capacitor npm root
|
||||
├── package.json
|
||||
├── capacitor.config.ts
|
||||
├── ANDROID.md # Android build, signing, Play Store notes
|
||||
├── android/ # Native Android project (committed)
|
||||
├── assets/ # Source icon/splash for @capacitor/assets
|
||||
├── .env.development # Local dev API/WS URLs
|
||||
├── .env.beta
|
||||
├── .env.production
|
||||
├── .env.mobile # Capacitor shell API/WS URLs
|
||||
├── public/
|
||||
└── src/
|
||||
├── axiosApi.js # Axios instances (JWT + CSRF)
|
||||
├── axiosApi.js # Axios instances (JWT Authorization)
|
||||
├── App.tsx
|
||||
├── index.tsx
|
||||
└── llm-fe/
|
||||
├── pages/ # Route-level views
|
||||
├── components/ # Shared & feature UI
|
||||
├── contexts/ # Auth, account, WebSocket, theme
|
||||
├── platform/ # Capacitor routing / native chrome
|
||||
└── ui-kit/ # MD* design-system wrappers
|
||||
```
|
||||
|
||||
@@ -48,6 +57,7 @@ chat_web_app/
|
||||
- **npm** (lockfile: `llm-fe/package-lock.json`)
|
||||
- Running [chat_backend](https://git.aimloperations.com/ai_ml_operations/chat_backend)
|
||||
locally for full chat/auth (default in `.env.development`: port **8001**)
|
||||
- For Android: JDK 17+, Android Studio / SDK (see `llm-fe/ANDROID.md`)
|
||||
|
||||
## Local setup
|
||||
|
||||
@@ -69,6 +79,7 @@ to be visible in the browser bundle.
|
||||
| `.env.development` | `npm start` | `http://127.0.0.1:8001` |
|
||||
| `.env.production` | `npm run build` / `build:prod` | `https://chatbackend.aimloperations.com` |
|
||||
| `.env.beta` | `npm run build:beta` | `https://beta.chatbackend.aimloperations.com` |
|
||||
| `.env.mobile` | `npm run build:mobile` | prod by default (override for beta shell) |
|
||||
|
||||
Required keys (already set in the committed env files):
|
||||
|
||||
@@ -82,7 +93,7 @@ this frontend (unlike Django apps under `~/Documents/secrets/`). Change the
|
||||
committed `.env.*` files if API domains change, then redeploy.
|
||||
|
||||
Optional local overrides (gitignored): `.env.local`, `.env.development.local`,
|
||||
`.env.production.local`.
|
||||
`.env.production.local`, `.env.mobile.local`.
|
||||
|
||||
### 3. Start the backend
|
||||
|
||||
@@ -103,6 +114,16 @@ npm start
|
||||
|
||||
Open **http://localhost:3000**.
|
||||
|
||||
### 5. Android (Capacitor)
|
||||
|
||||
```bash
|
||||
cd llm-fe
|
||||
npm run build:mobile
|
||||
npm run android:open
|
||||
```
|
||||
|
||||
Full signing / Play Store notes: [`llm-fe/ANDROID.md`](llm-fe/ANDROID.md).
|
||||
|
||||
## npm scripts
|
||||
|
||||
| Command | Purpose |
|
||||
@@ -111,6 +132,10 @@ Open **http://localhost:3000**.
|
||||
| `npm run build` | Production build into `llm-fe/build/` |
|
||||
| `npm run build:prod` | Prod build + copy to `/var/www/prod.chat.aimloperations/html` |
|
||||
| `npm run build:beta` | Beta env build + copy to `/var/www/beta.chat.aimloperations/html` |
|
||||
| `npm run build:mobile` | Mobile env build + `cap sync android` |
|
||||
| `npm run android:open` | Open `android/` in Android Studio |
|
||||
| `npm run android:sync` | `cap sync android` only |
|
||||
| `npm run assets:generate` | Regenerate Android icons/splash from `assets/` |
|
||||
| `npm test` | Jest watch mode |
|
||||
| `npm run test:ci` | Single CI run (`CI=true`, no watch) |
|
||||
|
||||
|
||||
Reference in New Issue
Block a user