Developing Mobile App Using Cordova: Step By Step

Here’s a complete, structured, and practical step-by-step guide to developing a mobile app using Apache Cordova, based on your setup requirements. This guide is written so you can follow it end-to-end without missing anything.

Apache Cordova allows you to build mobile apps using HTML, CSS, and JavaScript, and package them as native apps for Android, iOS, and more.

1. Install Required Software

Install Java 17

Download JDK 17 from Oracle or OpenJDK
Install it at:

C:\Program Files\Java\jdk-17

Install Android Studio (v36.1 or latest)

Download from official Android site
Install with default settings
This installs Android SDK tools automatically

Install Gradle 8.14.2

Download Gradle binary zip
Extract to:

C:\gradle-8.14.2

Install Node.js

Go to: https://nodejs.org, download LTS version (recommended) and install with default settings. Node.js is a required since Cordova is installed via npm. Once installed verify if NodeJs is installed by checking the version.

node -v
npm -v

2. Configure System PATH Variables

Go to:
System Properties → Advanced → Environment Variables

Add the following paths to PATH variable:

C:\gradle-8.14.2\bin
C:\Program Files\Java\jdk-17\bin
C:\Users\Dev\AppData\Local\Android\Sdk\emulator
C:\Users\Dev\AppData\Local\Android\Sdk\platform-tools
C:\Users\Dev\AppData\Local\Android\Sdk\tools\bin
C:\Users\Dev\AppData\Local\Android\Sdk\cmdline-tools\latest\bin

3. Add Environment Variables

Create new system variables:

ANDROID_HOME = C:\Users\Dev\AppData\Local\Android\Sdk
ANDROID_HOME_SDK = C:\Users\Dev\AppData\Local\Android\Sdk
JAVA_HOME = C:\Program Files\Java\jdk-17

4. Setup Android SDK (Important)

Open:
Android Studio → More Actions → SDK Manager

Go to SDK Tools Tab and install:

Android SDK Build-Tools
Android SDK Platform-Tools
Android Emulator
Android SDK Command-line Tools
Intel x86 Emulator Accelerator (if supported)

Also ensure:

At least one Android SDK Platform (e.g., Android 13/14)

5. Install Cordova

Make sure Node.js is installed.

Then run:

npm install -g cordova

Verify installation:

cordova -v

6. Create a Cordova App

cordova create MyApp
cd MyApp

Project structure:

MyApp/
  ├── www/
  ├── platforms/
  ├── plugins/
  └── config.xml

7. Run App in Browser

Add browser platform:

cordova platform add browser

Run:

cordova run browser

8. Run App on Android Emulator

Add Android platform:

cordova platform add android

Run:

cordova run android --emulator

Make sure emulator is created in Android Studio (AVD Manager)

9. Enable Live Reload (Auto Refresh)

Install plugin:

cordova plugin add cordova-plugin-browsersync-gen2

Run with live reload:

cordova run browser --live-reload

cordova run browser -l

10. Develop Your App (WWW Directory)

The MyApp/www/ folder contains your app:

MyApp/
├── www/
│   ├── index.html
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── app.js
├── platforms/
├── plugins/
└── config.xml

www directory is the core of your application — everything inside here becomes your mobile app UI.

index.html → Entry point of your app
css/ → Stylesheets (UI design)
js/ → JavaScript logic (API calls, events, etc.)

You can:

Build your own app using HTML/CSS/JS
Or copy any existing web app into this folder

Example:

React build output
Angular dist folder
Simple static website

Sample Files

You can replace the default app files generated in www directory with the following to explore.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Cordova App</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <h1>Welcome to My Cordova App</h1>
    <button onclick="showMessage()">Click Me</button>

    <script src="js/app.js"></script>
</body>
</html>

css/style.css

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin-top: 50px;
}

h1 {
    color: #2c3e50;
}

js/app.js

function showMessage() {
    alert("Cordova App is working!");
}

11. Test on Real Device (Optional)

Enable USB debugging on your phone and run:

cordova run android --device

12. Build APK

cordova build android

APK location:

platforms/android/app/build/outputs/apk/

Tips & Best Practices

Use Chrome DevTools for debugging:chrome://inspect
Keep plugins minimal
Use responsive design (mobile-first)
Use frameworks like:
- Ionic (best with Cordova)
- Framework7
- Bootstrap

Common Issues & Fixes

❌ JAVA_HOME not set

✔ Fix: Ensure correct path

❌ SDK not found

✔ Fix: Verify ANDROID_HOME

❌ Gradle build failed

✔ Fix:

cordova clean
cordova build android

❌ Emulator not starting