Skip to main content
Explore
Log in
Get started
Someone wanted to learn this too, so Grasp built them a personal learning path.
Create your own
Capacitor with Bun Monorepo
Module 1
Capacitor Foundations & Monorepo Integration
1
Capacitor Architecture: Native, Web, and Bridge
Describe Capacitor's runtime architecture (native shell + WebView + bridge) and contrast it with Electron and React Native.
Describe Capacitor's runtime architecture (native shell + WebView + bridge) and contrast it with Electron and React Native.
2
Capacitor Project Structure Overview
Identify the roles of capacitor.config.ts, the web build directory, and the native iOS/Android projects in a Capacitor app.
Identify the roles of capacitor.config.ts, the web build directory, and the native iOS/Android projects in a Capacitor app.
3
Integrating Capacitor with Bun and Turborepo
Install @capacitor/core and @capacitor/cli into an existing bun + Turborepo workspace and run CLI commands via bunx.
Install @capacitor/core and @capacitor/cli into an existing bun + Turborepo workspace and run CLI commands via bunx.
4
Capacitor Initialization & Configuration
Run `bunx cap init` and configure capacitor.config.ts (appId, appName, webDir) to point at the React SPA's build output.
Run `bunx cap init` and configure capacitor.config.ts (appId, appName, webDir) to point at the React SPA's build output.
5
Setting Up a Mobile-Specific Turborepo Location
Add and configure a dedicated 'mobile' location within the Turborepo to house the native projects, with corresponding pipeline tasks (build, sync, open).
Add and configure a dedicated 'mobile' location within the Turborepo to house the native projects, with corresponding pipeline tasks (build, sync, open).
6
Vite & Capacitor: Relative Base Paths & History Routing
Configure the SPA's Vite build for a Capacitor target, ensuring a relative base path and proper history routing.
Configure the SPA's Vite build for a Capacitor target, ensuring a relative base path and proper history routing.
7
Integrating Capacitor: iOS and Android Project Structure
Run `bunx cap add ios` and `bunx cap add android` and explain the structure of the files each command generates.
Run `bunx cap add ios` and `bunx cap add android` and explain the structure of the files each command generates.
8
Bunx Cap Sync: Web Assets & Native Dependencies
Use `bunx cap sync` to copy web assets and update native dependencies, distinguishing it from `cap copy` and `cap update`.
Use `bunx cap sync` to copy web assets and update native dependencies, distinguishing it from `cap copy` and `cap update`.
Module 2
iOS Build & Development Workflow
9
Setting Up Your iOS Development Environment
Install Xcode, its command-line tools, and CocoaPods, and verify the complete iOS toolchain.
Install Xcode, its command-line tools, and CocoaPods, and verify the complete iOS toolchain.
10
Navigating Your iOS Project in Xcode
Open the generated iOS project in Xcode and identify the key files: App.xcworkspace, Podfile, and Info.plist.
Open the generated iOS project in Xcode and identify the key files: App.xcworkspace, Podfile, and Info.plist.
11
Launching iOS Apps on the Simulator with Capacitor CLI
Build and launch the application on the iOS Simulator using the Capacitor CLI (`bunx cap run ios`).
Build and launch the application on the iOS Simulator using the Capacitor CLI (`bunx cap run ios`).
12
Running Apps on iOS Simulator
Build and launch the application on the iOS Simulator directly from the Xcode IDE.
Build and launch the application on the iOS Simulator directly from the Xcode IDE.
13
Setting Up Your iOS Development Environment
Configure an Apple Developer team, bundle identifier, and automatic signing to run the app on a physical iOS device.
Configure an Apple Developer team, bundle identifier, and automatic signing to run the app on a physical iOS device.
14
Customizing iOS Icons & Splash Screens with Capacitor & Bun
Customize the iOS app icon and splash screen using @capacitor/assets, driven by bun scripts.
Customize the iOS app icon and splash screen using @capacitor/assets, driven by bun scripts.
15
Configuring Info.plist for Privacy Permissions
Edit Info.plist to add usage description keys (e.g., for camera, location, biometrics) and explain why iOS mandates them.
Edit Info.plist to add usage description keys (e.g., for camera, location, biometrics) and explain why iOS mandates them.
16
Troubleshooting iOS Build Failures
Diagnose common iOS build failures, such as pod install errors, signing issues, and deployment target mismatches.
Diagnose common iOS build failures, such as pod install errors, signing issues, and deployment target mismatches.
Module 3
Android Build & Development Workflow
17
Setting Up Your Android Development Environment
Install Android Studio and the Android SDK, and configure the JAVA_HOME and ANDROID_HOME environment variables.
Install Android Studio and the Android SDK, and configure the JAVA_HOME and ANDROID_HOME environment variables.
18
Running Your App on Android Emulators
Build and launch the app on an Android emulator using both the Capacitor CLI (`bunx cap run android`) and Android Studio.
Build and launch the app on an Android emulator using both the Capacitor CLI (`bunx cap run android`) and Android Studio.
19
Running Apps on a Physical Android Device
Deploy and run the app on a physical Android device after enabling developer mode and USB debugging.
Deploy and run the app on a physical Android device after enabling developer mode and USB debugging.
20
Configuring Android Build Properties
Configure essential Android properties in `build.gradle`, including `applicationId`, `versionCode`, `versionName`, and SDK versions.
Configure essential Android properties in `build.gradle`, including `applicationId`, `versionCode`, `versionName`, and SDK versions.
21
"Customizing Android App Icons and Splash Screens with Capacitor Assets"
Customize the Android app icon, adaptive icon, and splash screen using the @capacitor/assets tool.
Customize the Android app icon, adaptive icon, and splash screen using the @capacitor/assets tool.
22
Generating and Securing an Application Keystore
Generate a private signing key and keystore for the application using `keytool` and securely store its credentials.
Generate a private signing key and keystore for the application using `keytool` and securely store its credentials.
23
Signing Debug Builds in Gradle
Configure the project's `build.gradle` file to use the signing key for debug builds.
Configure the project's `build.gradle` file to use the signing key for debug builds.
24
Troubleshooting Android Build Failures
Diagnose common Android build failures, including Gradle sync errors, SDK license issues, and AndroidManifest merge conflicts.
Diagnose common Android build failures, including Gradle sync errors, SDK license issues, and AndroidManifest merge conflicts.
Module 4
Plugin Integration: Notifications
25
Capacitor: Bridging Web to Native
Explain the Capacitor plugin model and how JavaScript calls are dispatched to native Swift/Kotlin code.
Explain the Capacitor plugin model and how JavaScript calls are dispatched to native Swift/Kotlin code.
26
Installing and Syncing Capacitor Push Notifications
Install the @capacitor/push-notifications plugin and sync it to the native iOS and Android projects.
Install the @capacitor/push-notifications plugin and sync it to the native iOS and Android projects.
27
Setting Up iOS Push Notifications
Configure Push Notifications for iOS by enabling the APNs capability in Xcode and managing credentials in the Apple Developer portal.
Configure Push Notifications for iOS by enabling the APNs capability in Xcode and managing credentials in the Apple Developer portal.
28
Setting Up Android Push Notifications with Firebase
Configure Push Notifications for Android by creating a Firebase project and adding the `google-services.json` file.
Configure Push Notifications for Android by creating a Firebase project and adding the `google-services.json` file.
29
Push Notification Permission and Registration Token Retrieval
Implement React logic to request push permission from the user and retrieve the device registration token.
Implement React logic to request push permission from the user and retrieve the device registration token.
30
Handling Push Notifications in React Apps
Handle incoming push notification payloads within the React app, both when it is in the foreground and background.
Handle incoming push notification payloads within the React app, both when it is in the foreground and background.
31
Capacitor Local Notifications: Immediate & Delayed Alerts
Install and use @capacitor/local-notifications to schedule immediate and delayed local alerts on both platforms.
Install and use @capacitor/local-notifications to schedule immediate and delayed local alerts on both platforms.
32
Navigating with Local Notifications
Handle user interactions with local notifications to navigate to specific content within the app.
Handle user interactions with local notifications to navigate to specific content within the app.
Module 5
Plugin Integration: Filesystem & Biometrics
33
Capacitor Filesystem: Directory Management
Install @capacitor/filesystem and manage files using different sandboxed directories (Data, Cache, External).
Install @capacitor/filesystem and manage files using different sandboxed directories (Data, Cache, External).
34
Android Filesystem Permissions
Implement the necessary runtime permission requests for the Filesystem plugin on Android.
Implement the necessary runtime permission requests for the Filesystem plugin on Android.
35
Biometric Authentication with Capacitor
Install the @capacitor-community/biometric-auth plugin to secure application features.
Install the @capacitor-community/biometric-auth plugin to secure application features.
36
Biometric Hardware Check for Authentication
Check for biometric hardware availability and type (e.g., Face ID, Touch ID, fingerprint) before attempting to authenticate.
Check for biometric hardware availability and type (e.g., Face ID, Touch ID, fingerprint) before attempting to authenticate.
37
Building a Biometric Authentication Hook in React
Build a React hook that abstracts biometric availability checks and the authentication prompt.
Build a React hook that abstracts biometric availability checks and the authentication prompt.
38
Biometric-Protected React Components and Routes
Gate access to a specific React component or route, requiring successful biometric authentication for entry.
Gate access to a specific React component or route, requiring successful biometric authentication for entry.
Module 6
Over-the-Air (OTA) Web Updates
39
OTA Update Restrictions
Explain what can and cannot be updated via OTA according to App Store and Play Store policies.
Explain what can and cannot be updated via OTA according to App Store and Play Store policies.
40
Implementing OTA Updates with Capacitor-Updater
Install and configure a third-party OTA service, such as `@capgo/capacitor-updater`, in the web app and native projects.
Install and configure a third-party OTA service, such as `@capgo/capacitor-updater`, in the web app and native projects.
41
Publishing Turborepo Bundles to OTA with Bun
Set up an OTA channel and publish a new web bundle from the Turborepo using bun scripts.
Set up an OTA channel and publish a new web bundle from the Turborepo using bun scripts.
42
Implementing Update Logic in React
Implement logic in React to check for, download, and apply an available update.
Implement logic in React to check for, download, and apply an available update.
43
Implementing an Update Notification Component
Create a user-facing component (e.g., a toast or modal) to inform the user of a pending update and prompt them to restart the app.
Create a user-facing component (e.g., a toast or modal) to inform the user of a pending update and prompt them to restart the app.
Module 7
Preparing for Store Distribution
44
Creating Your App Store Connect Record
Create an app record in App Store Connect, configuring the bundle ID and initial required metadata.
Create an app record in App Store Connect, configuring the bundle ID and initial required metadata.
45
Publishing Your App: Initial Setup in Google Play Console
Create an application in the Google Play Console, configuring the package name and completing initial setup.
Create an application in the Google Play Console, configuring the package name and completing initial setup.
46
Generating Signed AABs with Gradle
Configure the Android project's Gradle file to generate a signed Android App Bundle (AAB) for release.
Configure the Android project's Gradle file to generate a signed Android App Bundle (AAB) for release.
47
Archiving for App Store Distribution
Archive a release build of the iOS app in Xcode, ensuring it is correctly signed for App Store distribution.
Archive a release build of the iOS app in Xcode, ensuring it is correctly signed for App Store distribution.
48
Preparing Store Listings
Prepare required store assets, including screenshots, app descriptions, and a privacy policy URL.
Prepare required store assets, including screenshots, app descriptions, and a privacy policy URL.
49
Navigating App Store Privacy Requirements
Complete the App Store's App Privacy questionnaire based on the app's functionality and third-party plugins.
Complete the App Store's App Privacy questionnaire based on the app's functionality and third-party plugins.
50
Declaring Data Safety on Google Play
Complete the Google Play Data Safety form, declaring data collection and security practices.
Complete the Google Play Data Safety form, declaring data collection and security practices.
Module 8
App Store & Play Store Submission
51
Distribute iOS Builds with TestFlight
Upload the archived iOS build to App Store Connect and distribute it to internal testers via TestFlight.
Upload the archived iOS build to App Store Connect and distribute it to internal testers via TestFlight.
52
Managing TestFlight Builds and External Testers in App Store Connect
Navigate the App Store Connect portal to manage TestFlight builds and invite external testers.
Navigate the App Store Connect portal to manage TestFlight builds and invite external testers.
53
Uploading Your AAB to Internal Test Tracks
Upload the signed AAB to a Google Play internal testing track.
Upload the signed AAB to a Google Play internal testing track.
54
Deploying to Google Play Test Tracks
Promote a build through Google Play's closed and open testing tracks to gather feedback.
Promote a build through Google Play's closed and open testing tracks to gather feedback.
55
Submitting Your iOS App for App Store Review
Submit the iOS application for final App Store review.
Submit the iOS application for final App Store review.
56
Submitting Your Android App to Google Play
Submit the Android application for final Google Play review.
Submit the Android application for final Google Play review.