Capacitor

Capacitor allows to package React PWA app into native mobile Android & iOS apps.

References:

• Next.js + Tailwind CSS + Ionic Framework + Capacitor Mobile Starter

Launching on Android

using Android Studio:

yarn build
# Or if you build a Storybook: yarn build-storybook
yarn cap open android

It will open Android Studio then you can run the mobile app on your device or emulator.

To run the project on a device or emulator, run:

yarn cap run android

Common Pitfalls

1. The PWA app must not depend on itself being a publicly-accessible URL (either http://localhost or https://somedomain.com).

Advanced: Setting Up

yarn add @capacitor/core@^3 @capacitor/cli@^3
yarn cap init
# when "cap init" asks for the "Web asset directory":
# * for CRA / Minimal MUI v5 it will auto-detect "build"
# * for Ant Design Pro/Umi use "dist"

yarn build

yarn add @capacitor/android@^3
yarn cap add android

export CAPACITOR_ANDROID_STUDIO_PATH=$HOME/android-studio/bin/studio.sh
# To open in Android Studio
yarn cap open android
# To run the project on a device or emulator, run:
yarn cap run android