Capacitor Configuration
Relevant source files
The following files were used as context for generating this wiki page:
Capacitor serves as the cross-platform native bridge for the Driveway Estimator Pro project, wrapping the React-based web application into native iOS and Android binaries. It enables the application to access native device features—specifically the camera and geolocation services—while maintaining a single codebase for web and mobile platforms.
The configuration defines the application's identity across platforms and orchestrates the synchronization between built web assets (located in the dist directory) and the native IDE projects (Xcode and Android Studio).
Sources: capacitor.config.ts:1-8, MOBILE_BUILD.md:3-8, README.md:38-40
Core Configuration and Scripts
The primary configuration file, capacitor.config.ts, defines the essential metadata used by the Capacitor CLI to generate and manage native projects.
| Property | Value | Description |
|---|---|---|
appId | com.daddyfilth.drivewayestimator | Unique bundle identifier for iOS and Android |
appName | Driveway Estimator Pro | Display name of the application on the device |
webDir | dist | The directory containing the bundled web application |
Sources: capacitor.config.ts:3-7
Mobile Build Pipeline
The project utilizes pnpm scripts to manage the lifecycle of the mobile application, from building the frontend to opening native development environments.
This diagram illustrates the relationship between the web build process and the Capacitor synchronization tasks.
Sources: package.json:17-20, MOBILE_BUILD.md:41-48
Native Platform Integration
Capacitor facilitates the integration of native APIs through specific plugins. In this project, the integration focuses on capturing driveway imagery and obtaining location data for regional pricing.
Integrated Plugins
- @capacitor/camera: Provides native camera capture and photo library access.
- @capacitor/geolocation: Accesses GPS services to determine user coordinates.
Sources: MOBILE_BUILD.md:154-158, package.json:115-121
Permissions Configuration
To access native features, specific permissions must be declared in the native platform configuration files.
| Platform | File | Key / Permission | Purpose |
|---|---|---|---|
| iOS | Info.plist | NSCameraUsageDescription | Camera access for driveway photos |
| iOS | Info.plist | NSLocationWhenInUseUsageDescription | Location for local pricing |
| Android | AndroidManifest.xml | android.permission.CAMERA | Native camera hardware access |
| Android | AndroidManifest.xml | android.permission.ACCESS_FINE_LOCATION | Precise GPS coordinates |
Sources: MOBILE_BUILD.md:160-174
Development and Release Workflow
The workflow transitions from web development to native deployment via a synchronization step that copies the dist folder into the native projects.
Environment Lifecycle
- Web Assets: The React app is built using Vite into the
distfolder. - Synchronization:
npx cap syncupdates the native platforms with the latest web code and installs necessary native plugins. - Native Build: Xcode or Android Studio is used to compile the final
.ipaor.apk/.aabfiles.
Sources: MOBILE_BUILD.md:52-110, todo.md:79-84
Native Implementation Detail
The project includes a specialized Swift package CapApp-SPM to manage Swift Package Manager dependencies for the iOS target, ensuring Capacitor's native dependencies are correctly linked within the Xcode workspace.
Sources: ios/App/CapApp-SPM/README.md:1-5, ios/App/CapApp-SPM/Sources/CapApp-SPM/CapApp-SPM.swift:1
Conclusion
Capacitor Configuration in Driveway Estimator Pro provides a robust bridge between the modern React frontend and mobile hardware. By centralizing settings in capacitor.config.ts and leveraging standardized build scripts in package.json, the project achieves a streamlined workflow for deploying professional-grade estimation tools to both iOS and Android devices.