create-ssr-capacitor

One codebase, two targets: an SSR website and a native mobile app.

Modern meta-frameworks are great at SSR. Capacitor is great at putting web apps on phones. Gluing them together by hand is a pile of adapter/config/build-script trivia you get to rediscover on every project — this CLI scaffolds it in one step:

npm create ssr-capacitor@latest my-app

   ___ ___ ___     ___ __ _ _ __
  / __/ __| '__|  / __/ _' | '_ \
  \__ \__ \ |    | (_| (_| | |_) |
  |___/___/_|     \___\__,_| .__/
                           |_|

Pick a framework, pick your Capacitor plugins, done. You get a project where:

• npm run build produces a normal server-rendered web app — deploy it like any other SSR site.
• npm run build:mobile produces a static client bundle of the same codebase, which Capacitor wraps into real iOS/Android projects.
• npm run android / npm run ios rebuilds, syncs, and opens the native IDE.

Supported frameworks

| Framework | Web build | Mobile build | | -------------- | -------------------- | ------------------------------------------ | | SvelteKit | SSR via adapter-auto | adapter-static + index.html SPA fallback | | Next.js | full SSR | output: "export" static export | | TanStack Start | SSR server | SPA mode with an index.html shell |

The switch is a single CAPACITOR_BUILD env var read by the framework config — no forked codebases, no separate mobile repo drifting out of date.

Capacitor plugins

Choose from the official plugin catalog during setup (or via --plugins): app, camera, geolocation, filesystem, haptics, network, preferences, push notifications, share, splash screen, status bar.

Selected plugins are added to package.json, and any manual native setup they need (Info.plist keys, FCM config, …) is documented in the generated README so it doesn't bite you at store-review time.

Non-interactive usage

Every prompt has a flag, so it works in scripts and CI:

create-ssr-capacitor my-app \
  --framework sveltekit \
  --plugins camera,geolocation \
  --platforms android \
  --app-id com.acme.myapp \
  --no-install --yes

| Flag | Meaning | | ----------------- | ------------------------------------------------ | | -f, --framework | sveltekit | nextjs | tanstack | | -p, --plugins | comma-separated plugin ids, or none | | --platforms | android, ios, or both (default) | | --app-id | reverse-DNS app id (derived from name if absent) | | --no-install | skip dependency install | | --no-git | skip git init | | -y, --yes | accept defaults for anything not passed |

What SSR means on a phone

There's no Node server inside a webview. The native build is a client-rendered shell of the same routes and components — SSR still happens for your website, and anything server-only (form actions, server functions, route handlers) should live behind an HTTP API that both targets call. The generated README spells out the per-framework constraints.

Roadmap

• [x] SvelteKit, Next.js, TanStack Start templates
• [x] Official Capacitor plugin catalog
• [ ] Nuxt template
• [ ] --template minimal variant without the demo page
• [ ] Optional Ionic UI components
• [ ] Add-to-existing-project mode (ssr-capacitor init)

PRs welcome — npm i && npm run build && npm test is the whole dev loop.

License

MIT