Qwik Native App Hybrid with Capacitor

NOTE: Starting on a Cookbook Recipe [Draft]

There is a need to provide an easy path for developers to deploy Qwik as a native app. Qwik is a web-only framework and does not offer an option to compile into native iOS or Android builds. However, Qwik can be packaged as a static site and deployed with Capacitor.

There are many nuances to realizing near-as-possible "Native App Experience" which requires additional work to make this easy for the developer. For example:

UX design considerations
Data fetching differences (SSR vs Static)
OTA live updates
Best practices

Step-by-Step

For anybody interested in exploring Qwik as a Capacitor Hybrid app, I'm including a baseline you can follow, below.

FIRST, follow Capacitor Environment Setup: Here

pnpm create qwik@latest
cd ./qwikcap
pnpm qwik add static
pnpm add -D @capacitor/cli@latest @capacitor/core @capacitor/camera @capacitor/splash-screen @capacitor/android @capacitor/ios

npx cap init 'qwikcap' com.qwikcap.app
npx cap add ios
npx cap add android

pnpm build
npx cap sync
npx cap run ios

Additional Notes

Add preview.ios script to your package.json to make building easier. "preview.ios": "pnpm build; npx cap sync ios; npx cap run iOS",

If you are having issues, build a Capacitor app following all steps on the Capacitor site and compare it to this build to ensure everything is correctly carried over.

ENJOY! 🎉

Cc: @gioboa @zanettin @wmertens @mhevery @PatrickJS @adamdbradley

gioboa commented 5 months ago

@n8sabes you are awesome 😎

zanettin commented 5 months ago

@n8sabes very nice!!!

mcleodtech commented 5 months ago

This is great! The nice thing about Capacitor, is you can have an app as simple as just adding your web app to the native shell and adding those to the app store. You can also incorporate native plugins to have things like push notifications, file system support, camera support and others. Capacitor Plugins. I've worked a lot with Capacitor and Angular, but it would be fun to convert a Qwik app to a native iOS or Android app.

QwikDev / qwik