Skip to main content

​
Build Process Overview

The Rodando Passenger app build process involves:
  1. Angular Build - Compile TypeScript and bundle the web app
  2. Capacitor Sync - Copy web assets to native platforms
  3. Native Build - Build platform-specific packages (APK/IPA)

​
Building for Web

​
Development Build

Build with development configuration: 
npm run build -- --configuration development
This creates an unoptimized build in the www/ directory with:
  • Source maps enabled
  • No code minification
  • Faster build times

​
Production Build

Build optimized for production: 
npm run build
This runs ng build with the production configuration by default, creating an optimized build with:
  • Code minification and optimization
  • Environment file replacement (environment.ts → environment.prod.ts)
  • Output hashing for cache busting
  • License extraction
  • Bundle size checks (2MB warning, 5MB error)

​
Watch Mode

For continuous building during development: 
npm run watch
Runs ng build --watch --configuration development to automatically rebuild on file changes.

​
Build Output

All builds output to the www/ directory: 
www/
├── index.html
├── main.js
├── polyfills.js
├── styles.css
├── assets/
└── ...

​
Building for Android

​
Prerequisites

1

Android Studio Setup

Ensure Android Studio is installed with:
  • Android SDK (API 33 or higher)
  • Android SDK Build-Tools
  • Android SDK Platform-Tools
  • Java JDK 17
2

Add Android Platform

If not already added:
npx cap add android

​
Build Process

1

Build Web App

Build the Angular app:
npm run build
2

Sync to Android

Copy web assets and sync Capacitor plugins:
npx cap sync android
This command:
  • Copies www/ contents to android/app/src/main/assets/public/
  • Updates native plugin dependencies
  • Configures native project settings
3

Update Capacitor Config

Before building for production, update capacitor.config.ts:
const config: CapacitorConfig = {
  appId: 'com.rodando.passenger', // Your production app ID
  appName: 'Rodando',
  webDir: 'www'
  // Remove server config for production
};
4

Open in Android Studio

npx cap open android
5

Build APK/AAB

In Android Studio:For Debug APK:
  • Build → Build Bundle(s) / APK(s) → Build APK(s)
For Release AAB (Play Store):
  • Build → Generate Signed Bundle / APK
  • Select “Android App Bundle”
  • Configure signing with your keystore
  • Select “release” build variant

​
Command Line Build (Alternative)

Build directly from command line: 
cd android
./gradlew assembleDebug
cd ..
Output locations:
  • Debug APK: android/app/build/outputs/apk/debug/app-debug.apk
  • Release APK: android/app/build/outputs/apk/release/app-release.apk
  • Release AAB: android/app/build/outputs/bundle/release/app-release.aab
Release builds require signing configuration in android/app/build.gradle. Set up signing keys before building release versions.

​
Building for iOS

​
Prerequisites

1

macOS and Xcode

iOS builds require:
  • macOS
  • Xcode (latest stable version)
  • Xcode Command Line Tools
  • CocoaPods
2

Add iOS Platform

If not already added:
npx cap add ios
3

Install CocoaPods Dependencies

cd ios/App
pod install
cd ../..

​
Build Process

1

Build Web App

Build the Angular app:
npm run build
2

Sync to iOS

Copy web assets and sync Capacitor plugins:
npx cap sync ios
This command:
  • Copies www/ contents to ios/App/App/public/
  • Updates native plugin dependencies via CocoaPods
  • Configures native project settings
3

Update Capacitor Config

Before building for production, ensure production config:
const config: CapacitorConfig = {
  appId: 'com.rodando.passenger',
  appName: 'Rodando',
  webDir: 'www'
};
4

Open in Xcode

npx cap open ios
5

Configure Signing

In Xcode:
  1. Select the App target
  2. Go to Signing & Capabilities
  3. Select your Team
  4. Configure Bundle Identifier
  5. Enable automatic signing or configure manual signing
6

Build IPA

For Development/Testing:
  • Product → Build (⌘B)
  • Run on simulator or connected device
For App Store:
  • Product → Archive
  • Window → Organizer
  • Select archive → Distribute App
  • Follow App Store distribution flow

​
Command Line Build (Alternative)

Build from command line using xcodebuild: 
cd ios/App
xcodebuild -workspace App.xcworkspace -scheme App -configuration Debug
cd ../..

​
Production Checklist

Before deploying to production:
1

Update Environment Configuration

  • Set production API URLs in environment.prod.ts
  • Set production: true
  • Set debug: false
  • Update WebSocket URLs to production
  • Verify Mapbox token is production-ready
2

Update Capacitor Config

  • Set production appId (e.g., com.rodando.passenger)
  • Remove server configuration
  • Update appName to production name
3

Test Production Build

  • Test production build locally
  • Verify API connections
  • Test on physical devices
  • Check app performance
  • Verify maps and location services
4

Code Quality

Run linting before deployment:
npm run lint
5

Platform-Specific

Android:
  • Update versionCode and versionName in android/app/build.gradle
  • Configure signing keys
  • Test release build
iOS:
  • Update version and build number in Xcode
  • Configure App Store signing
  • Add required Info.plist keys (location permissions, etc.)

​
Deployment Strategies

​
Over-the-Air (OTA) Updates

For web content updates without app store releases, consider:
  • Capacitor Live Updates
  • Ionic Appflow
  • Custom update mechanisms
OTA updates can only update web assets (HTML, CSS, JS). Native plugin changes or Capacitor updates require full app store releases.

​
Continuous Integration/Deployment

Integrate build process into CI/CD pipelines: 
name: Build
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm ci
      - run: npm run lint
      - run: npm run build
      - run: npx cap sync

​
Build Optimization

​
Reduce Bundle Size

Optimize your production builds:
  1. Remove unused code 
    npm run lint
  2. Analyze bundle size 
    npm run build -- --stats-json
npx webpack-bundle-analyzer www/stats.json
  3. Lazy load routes and modules
    • Use Angular’s lazy loading for routes
    • Load heavy components on-demand
  4. Optimize images
    • Compress images in src/assets/
    • Use appropriate formats (WebP, SVG)

​
Build Performance

Speed up builds:
  • Use --configuration development for faster dev builds
  • Enable parallel builds in Angular
  • Use incremental builds with npm run watch
  • Clear cache if builds are corrupted: rm -rf .angular/cache

​
Troubleshooting

​
Build Errors

TypeScript errors: 
npm run lint
Clear build cache: 
rm -rf www/ .angular/
npm run build

​
Capacitor Sync Issues

Force sync: 
npx cap sync --force
Reinstall platforms: 
rm -rf android/ ios/
npx cap add android
npx cap add ios

​
Android Build Issues

Clean Gradle cache: 
cd android
./gradlew clean
cd ..
Update Gradle dependencies: 
cd android
./gradlew --refresh-dependencies
cd ..

​
iOS Build Issues

Clean build: 
cd ios/App
xcodebuild clean
pod deintegrate
pod install
cd ../..
Update CocoaPods: 
sudo gem install cocoapods
cd ios/App
pod repo update
pod install
cd ../..

​
Next Steps

Development Setup

Set up your development environment

Configuration

Configure environment and build settings

Build docs developers (and LLMs) love

Get started for freeTalk to us