Skip to main content

​
Prerequisites

Before you begin, ensure you have the following tools installed:
1

Node.js and npm

Install Node.js (v18 or higher) which includes npm:
node --version  # Should be v18 or higher
npm --version
Download from nodejs.org
2

Ionic CLI

Install the Ionic CLI globally:
npm install -g @ionic/cli
3

Angular CLI

Install the Angular CLI globally:
npm install -g @angular/cli
4

Capacitor CLI

The Capacitor CLI is included in the project dependencies and will be installed with npm install.
5

Platform-Specific Tools

Install Android Studio for Android development:
  • Download from developer.android.com
  • Install Android SDK (API 33 or higher)
  • Configure Android SDK path in environment variables
  • Install Java JDK 17

​
Clone and Install

1

Clone the Repository

Clone the Rodando Passenger app repository:
git clone <repository-url>
cd rodandoApp-frontend
2

Install Dependencies

Install all npm dependencies:
npm install
This will install:
  • Angular 18.2.x
  • Ionic 8.4.x
  • Capacitor 7.4.x
  • All project dependencies from package.json
3

Configure Environment

Set up your environment variables. See the Configuration page for details on:
  • API endpoint configuration
  • Mapbox access token
  • WebSocket connection settings

​
Running the Development Server

​
Web Browser Development

Run the app in a web browser for rapid development: 
npm start
All three commands start the development server on http://localhost:8100.
The default development server uses http://10.0.2.2:3000 as the API URL, which is configured for Android emulators. For browser testing, update the apiUrl in src/environments/environment.ts to point to your local backend.

​
Development with Live Reload

For continuous build during development: 
npm run watch
This runs ng build --watch --configuration development for automatic rebuilds on file changes.

​
Running on Device/Emulator

​
Android

1

Add Android Platform

Add Android platform to your project (first time only):
npx cap add android
2

Sync Web Assets

Build the web app and sync to Android:
npm run build
npx cap sync android
3

Open in Android Studio

npx cap open android
Then run the app from Android Studio on an emulator or connected device.
The Capacitor configuration includes a development server URL (http://10.0.2.2:8100) for live reload during development. This is the Android emulator’s special IP for localhost. Remove or comment out the server section in capacitor.config.ts for production builds.

​
iOS

1

Add iOS Platform

Add iOS platform to your project (first time only):
npx cap add ios
2

Install CocoaPods Dependencies

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

Sync Web Assets

Build the web app and sync to iOS:
npm run build
npx cap sync ios
4

Open in Xcode

npx cap open ios
Then run the app from Xcode on a simulator or connected device.

​
Available npm Scripts

From package.json, the following scripts are available:
ScriptCommandDescription
npm startng serveStart development server
npm run buildng buildBuild the app for production
npm run watchng build --watch --configuration developmentBuild with watch mode
npm testng testRun unit tests with Karma
npm run lintng lintRun ESLint on the codebase

​
Testing the Setup

Verify your setup is working:
  1. Start the development server: 
    npm start
  2. Open your browser to http://localhost:8100
  3. You should see the Rodando Passenger app login screen
  4. Check the browser console for any errors

​
Troubleshooting

​
Port Already in Use

If port 8100 is already in use: 
ng serve --port 8101

​
Node Modules Issues

If you encounter dependency issues: 
rm -rf node_modules package-lock.json
npm install

​
Capacitor Sync Issues

If Capacitor sync fails: 
npx cap sync --force

​
Android Emulator Connection

The API URL http://10.0.2.2:3000 is specifically for Android emulators:
  • 10.0.2.2 is the special IP that maps to localhost on the host machine
  • For physical devices, use your computer’s local IP address
  • For iOS simulators, use localhost or 127.0.0.1

​
Next Steps

Configuration

Configure environment variables, API endpoints, and build settings

Build & Deploy

Learn how to build and deploy the app to production

Build docs developers (and LLMs) love

Get started for freeTalk to us