Skip to main content

​
Environment Configuration

The Rodando Passenger app uses Angular’s environment system for configuration management. Environment files are located in src/environments/.

​
Environment Files

Development environment configuration:
src/environments/environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://10.0.2.2:3000/api',
  appAudience: 'passenger_app',
  expectedUserType: 'passenger',
  mapbox: {
    accessToken: 'pk.eyJ1Ijoicm9kYW5kb2N1YmEiLCJhIjoiY21lYzZtMWF0MWJoaDJsb2YxNG56N2NmYiJ9.o5oPXGNXcut8PE0O7CG-VA'
  },
  debug: true,
  debugTags: ['DA', 'HTTP', 'LOC', 'PL', 'PAX'],
  wsBase: 'ws://10.0.2.2:3000'
};
Key Settings:
  • production: false - Enables development mode
  • apiUrl - Points to Android emulator localhost (10.0.2.2)
  • debug: true - Enables debug logging
  • debugTags - Controls which debug logs are shown

​
Environment Variables Explained

VariableTypeDescription
productionbooleanEnables production optimizations
apiUrlstringBackend API base URL
appAudiencestringJWT audience claim (always 'passenger_app')
expectedUserTypestringUser type validation (always 'passenger')
mapbox.accessTokenstringMapbox API key for map rendering
debugbooleanEnables console debug logging
debugTagsstring[]Debug log categories to display
wsBasestringWebSocket server base URL

​
Debug Tags

The debugTags array controls which debug logs are shown:
  • DA - Driver Assignment logs
  • HTTP - HTTP request/response logs
  • LOC - Location tracking logs
  • PL - Place/location search logs
  • PAX - Passenger-specific logs

​
API Endpoint Configuration

​
Development API URLs

For Android emulators, use the special IP address:
apiUrl: 'http://10.0.2.2:3000/api'
wsBase: 'ws://10.0.2.2:3000'
10.0.2.2 is the Android emulator’s alias for localhost on the host machine.

​
Production API Configuration

For production builds, update environment.prod.ts with your production URLs: 
export const environment = {
  production: true,
  apiUrl: 'https://api.yourdomain.com/api',
  wsBase: 'wss://api.yourdomain.com',
  debug: false, // Disable debug logs in production
  // ... other settings
};
Never commit production API keys or secrets to version control. Use environment variables or secure configuration management.

​
Mapbox Configuration

​
Setting Up Mapbox API Key

The app uses Mapbox for map rendering and location services.
1

Get Mapbox Access Token

  1. Create a Mapbox account at mapbox.com
  2. Navigate to your account dashboard
  3. Create a new access token or copy the default public token
2

Configure Token

Add the token to your environment files:
mapbox: {
  accessToken: 'pk.your_mapbox_token_here'
}
3

Token Scopes

Ensure your token has these scopes enabled:
  • styles:read - For map styles
  • fonts:read - For map fonts
  • datasets:read - For datasets (if used)
The current token in the codebase is for development only. Generate your own token for production use and restrict it to your app’s domain.

​
Capacitor Configuration

Capacitor configuration is defined in capacitor.config.ts:
capacitor.config.ts
import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'io.ionic.starter',
  appName: 'rodandoApp-frontend',
  webDir: 'www',
  server: {
    url: 'http://10.0.2.2:8100',
    cleartext: true
  }
};

export default config;

​
Configuration Properties

PropertyValueDescription
appIdio.ionic.starterUnique app identifier (update for production)
appNamerodandoApp-frontendApp display name
webDirwwwOutput directory from Angular build
server.urlhttp://10.0.2.2:8100Development server URL for live reload
server.cleartexttrueAllows HTTP connections (Android)

​
Production Capacitor Configuration

For production builds, remove or comment out the server section: 
const config: CapacitorConfig = {
  appId: 'com.rodando.passenger', // Update to your app ID
  appName: 'Rodando',
  webDir: 'www'
  // Remove server section for production
};
The server configuration with cleartext: true is for development only. Remove it in production builds to prevent security issues.

​
Update App ID for Production

Before publishing, update the appId to match your app’s package name:
  • Android: Should match the applicationId in android/app/build.gradle
  • iOS: Should match the Bundle Identifier in Xcode

​
Angular Configuration

Angular configuration is in angular.json.

​
Build Configurations

The project has three build configurations: 
"production": {
  "budgets": [
    {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
    }
  ],
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ],
  "outputHashing": "all"
}
Replaces environment.ts with environment.prod.ts and enables optimizations.

​
TypeScript Path Aliases

The project uses path aliases configured in tsconfig.json: 
"paths": {
  "@/*": ["src/*"]
}
This allows imports like: 
import { AuthService } from '@/services/auth.service';
Instead of: 
import { AuthService } from '../../../services/auth.service';

​
Build Output

  • Output directory: www/ (configured in angular.json)
  • Source maps: Enabled in development, disabled in production
  • Bundle size limits: 2MB warning, 5MB error for initial bundle

​
Next Steps

Development Setup

Set up your local development environment

Build & Deploy

Learn how to build and deploy the app

Build docs developers (and LLMs) love

Get started for freeTalk to us