Create Cap F7 App

A powerful CLI tool to instantly bootstrap a highly-configured mobile app using React 18, Vite, Framework7, and Capacitor 8.

This boilerplate comes with everything you need out of the box, including custom Native Splash Screens, App Icons, and an Over-The-Air (OTA) Update Engine powered by Capgo.

Features

• ⚛️ React 18 + Vite - Lightning fast development and bundling.
• 📱 Framework7 - Beautiful, native-looking UI components out of the box.
• ⚡ Capacitor 8 - Ready for iOS and Android native deployment.
• 🎨 Auto-Theming Engine - Modify one app.config.json file and automatically generate all App Icons, iOS/Android Native Splash Screens, and CSS variables.
• 🔄 Built-in OTA Updates - Fully wired OTA update architecture with a beautiful custom bottom-sheet progress UI.

Usage

You don't need to install this globally. Just run it using npx:

npx create-cap-f7-app

The interactive CLI will ask you for:

1. Project Folder Name (e.g. my-awesome-app)
2. App Name (e.g. Awesome App)
3. App ID / Package Name (e.g. com.awesome.app)
4. Primary Brand Color (e.g. #F48121)

Once finished, cd into your new folder and run npm run dev to start building!

Modifying Brand Assets

Inside your newly created project, you will find an app.config.json file and a resources folder containing your logo and icon.

If you want to change your brand color, app name, package name, or logos, simply edit app.config.json and replace the images in the resources folder, then run:

npm run apply-config && npx cap sync

This script will automatically inject your new branding into the native iOS and Android projects, build new app icons, generate new native splash screens, and modify the web CSS.