Generated app

What the scaffold produces and how to work with it day to day.

Scripts

Command	What it does
dev	Web dev server (hot reload)
build	Type-check + production web build to dist/
typecheck	TypeScript check only (tsc --noEmit)
lint / lint:fix	ESLint
format / format:check	Prettier
android	Build + sync, then run on device/emulator
desktop	Build + sync, then open the Electron window
desktop:dev	Live-reload desktop loop (Vite + Electron, DevTools)
open:android	Open the Android project in Android Studio
build:android	Debug APK (android/app/build/outputs/apk/debug/)
build:desktop	Package installer/portable per OS (electron-builder)
build:all	Android + desktop in sequence
assets	Regenerate app icons + splash from assets/ PNGs

Scripts are generated for your chosen package manager (--pm bun|npm|pnpm|yarn). The generator records your scaffold options in .ionic-everywhere.json — keep it in version control so upgrade can service the project later.

Layout

Responsive by design: a bottom tab bar on narrow screens becomes a persistent sidebar on wide screens (IonSplitPane, breakpoint lg). Menu entries and tabs navigate identical routes, so the same navigation model feels native everywhere.

PWA

The web build is installable out of the box: a web manifest and an auto-update service worker are generated by vite-plugin-pwa (see vite.config.ts). Deploy dist/ behind HTTPS and the app can be installed from the browser. App name, short name and theme come from your scaffold answers — tweak them in vite.config.ts under manifest.

App icons and splash

Source images live in assets/ (icon-only.png, icon-foreground.png, icon-background.png, splash.png, splash-dark.png). Replace them with your artwork (1024px icons, 2732px splashes) and run the assets script to regenerate Android launcher icons. PWA icons in public/icons/ are served as-is — replace those too (192px + 512px, plus a maskable 512px).

Adding pages

Navigation is data-driven: routes, tab buttons and the side menu all derive from the single NAV_ITEMS list in src/nav.ts.

1. Create src/pages/MyPage.tsx wrapping content in <IonPage>.
2. Register it once in src/nav.ts:

import {myPageOutline} from 'ionicons/icons'
import MyPage from './pages/MyPage'

// add to NAV_ITEMS:
{
  path: '/mypage',
  label: 'My Page',
  icon: myPageOutline,
  component: MyPage,
}

Routes, the tab bar entry and the menu item are generated for you — no edits needed in App.tsx or AppMenu.tsx. Each page renders inside its own ErrorBoundary, so a broken page shows a retry card instead of a blank app.

Testing (opt-in)

Scaffolding with --tests adds a Vitest setup to the generated app. Re-run upgrade on older projects to pick up new template files without touching your code.