#78 - Capacitor init — add iOS native shell - forgejo_admin/westside-landing

forgejo_admin commented

2026-03-26 03:49:13 +00:00

Owner

Type

Feature

Lineage

project-capacitor-mobile → Board item (westside first consumer)

Repo

forgejo_admin/westside-app

User Story

As a dev agent
I want to add Capacitor to westside-app with iOS support
So that the SPA can be wrapped in a native WKWebView for App Store distribution

Context

westside-app is already a SvelteKit SPA with adapter-static and keycloak-js auth — Capacitor-compatible from day one. This task adds the Capacitor layer: core packages, iOS native project, and platform detection for auth redirects.

The app ID should be com.westsidekingsandqueens.app (public domain convention for App Store apps).

Platform detection for Keycloak auth follows mcd-tracker's proven pattern: Capacitor.isNativePlatform() → capacitor://localhost/ for iOS, else window.location.origin for web.

File Targets

Files to create/modify:

capacitor.config.ts — new, Capacitor configuration (webDir: 'build', appId, appName)
src/lib/keycloak.js — add platform detection for redirect URI
package.json — add @capacitor/core, @capacitor/cli, @capacitor/ios, @capacitor/app

Files NOT to touch:

svelte.config.js — already correct (adapter-static, fallback: 'index.html')
src/app.css — design system unchanged
Any route files — no functional changes needed

Acceptance Criteria

npm install succeeds with Capacitor packages
npx cap init creates capacitor.config.ts with appId com.westsidekingsandqueens.app
npx cap add ios generates ios/ directory with Xcode project
npm run build && npx cap sync ios completes without errors
Platform detection in keycloak.js: web uses window.location.origin, native uses capacitor://localhost/
Web deployment unchanged — existing production URL works identically

Test Expectations

npm run build still produces static output in build/
npx cap sync ios copies build output to ios/App/App/public/
Existing CI pipeline (web) still passes

Constraints

Follow mcd-tracker-app pattern for platform detection (~/mcd-tracker-app/src/lib/keycloak.js)
Global app.css stays — no scoped Svelte styles
ios/ directory gets committed (Capacitor convention — native project is versioned)

Checklist

PR opened
Tests pass
No unrelated changes

project-capacitor-mobile — architecture reference
sop-capacitor-mobile-lifecycle — Stage 2 (Promotion to Capacitor App)

### Type Feature ### Lineage `project-capacitor-mobile` → Board item (westside first consumer) ### Repo `forgejo_admin/westside-app` ### User Story As a dev agent I want to add Capacitor to westside-app with iOS support So that the SPA can be wrapped in a native WKWebView for App Store distribution ### Context westside-app is already a SvelteKit SPA with adapter-static and keycloak-js auth — Capacitor-compatible from day one. This task adds the Capacitor layer: core packages, iOS native project, and platform detection for auth redirects. The app ID should be `com.westsidekingsandqueens.app` (public domain convention for App Store apps). Platform detection for Keycloak auth follows mcd-tracker's proven pattern: `Capacitor.isNativePlatform()` → `capacitor://localhost/` for iOS, else `window.location.origin` for web. ### File Targets Files to create/modify: - `capacitor.config.ts` — new, Capacitor configuration (webDir: 'build', appId, appName) - `src/lib/keycloak.js` — add platform detection for redirect URI - `package.json` — add @capacitor/core, @capacitor/cli, @capacitor/ios, @capacitor/app Files NOT to touch: - `svelte.config.js` — already correct (adapter-static, fallback: 'index.html') - `src/app.css` — design system unchanged - Any route files — no functional changes needed ### Acceptance Criteria - [ ] `npm install` succeeds with Capacitor packages - [ ] `npx cap init` creates capacitor.config.ts with appId `com.westsidekingsandqueens.app` - [ ] `npx cap add ios` generates ios/ directory with Xcode project - [ ] `npm run build && npx cap sync ios` completes without errors - [ ] Platform detection in keycloak.js: web uses window.location.origin, native uses capacitor://localhost/ - [ ] Web deployment unchanged — existing production URL works identically ### Test Expectations - [ ] `npm run build` still produces static output in build/ - [ ] `npx cap sync ios` copies build output to ios/App/App/public/ - [ ] Existing CI pipeline (web) still passes ### Constraints - Follow mcd-tracker-app pattern for platform detection (~/mcd-tracker-app/src/lib/keycloak.js) - Global app.css stays — no scoped Svelte styles - ios/ directory gets committed (Capacitor convention — native project is versioned) ### Checklist - [ ] PR opened - [ ] Tests pass - [ ] No unrelated changes ### Related - `project-capacitor-mobile` — architecture reference - `sop-capacitor-mobile-lifecycle` — Stage 2 (Promotion to Capacitor App)