Your First App

Previous Next

With the Cordova CLI installed, you're ready to scaffold, run, and modify your very first project. This page walks through the entire loop end to end: generating a new project, adding a platform to build against, running the app, and editing the starter code to see your change reflected — first in a browser for the fastest possible feedback loop, and then on a real Android emulator or device.

1. Create a New Project

Every Cordova project starts with the cordova create command, which takes three arguments:

cordova create hello com.example.hello HelloWorld

Argument	Meaning
`hello`	The folder name that will be created on disk to hold your new project
`com.example.hello`	The app's unique reverse-domain identifier (also called the package name or bundle ID) — this is how app stores and the OS distinguish your app from every other app, so it must be globally unique when you publish for real
`HelloWorld`	The human-readable display name shown under the app's icon on the device's home screen

Running this command creates a new hello/ folder pre-populated with a default project structure and a working starter web app in www/.

2. Navigate Into the Project and Add a Platform

A freshly created project has no target platforms yet — you have to explicitly add each one you want to build for. The fastest platform for iterating on layout and JavaScript logic is the browser platform, which runs your app in an ordinary desktop browser tab with no emulator or device required:

cd hello
cordova platform add browser

Once you're happy with the app's behavior, add the real target platform(s) you intend to ship to, such as Android:

cordova platform add android

3. Run the App in the Browser

With the browser platform added, you can launch the app instantly:

cordova run browser

This builds the project and opens it in your default browser at a local address, displaying the default starter screen — a Cordova logo, a "Device is Ready" message, and some basic device info once deviceready fires (covered in depth on a later page).

Note: The browser platform is a convenience for rapid UI iteration only. It approximates Cordova's plugin APIs with browser-based shims, so device-only features like the camera or native file system won't behave identically to a real device — always do a final test on an actual emulator or device before shipping.

4. Edit the Starter Template

All of your app's actual HTML, CSS, and JavaScript lives inside the www/ folder. Open www/index.html in your editor and find the welcome message, which by default looks something like this:

<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
    <p class="event listening">Connecting to Device</p>
    <p class="event received">Device is Ready</p>
</div>

Change the heading text to make your own edit visible:

<h1>Hello From My First Cordova App!</h1>

Save the file, then re-run cordova run browser. Because the browser platform reads straight from your project's built output, your edited heading appears immediately — this edit-and-rerun loop is exactly how you'll build out the rest of your app's UI.

5. Run on an Android Emulator or Device

Once your change looks right in the browser, verify it on the platform you actually intend to ship. With the android platform already added, run:

cordova run android

Expect this to take noticeably longer than the browser run — Cordova now has to invoke Gradle to compile a full native Android project, package your www/ assets into it, and then deploy the resulting APK via adb (Android Debug Bridge) to either a running emulator or a physical device connected over USB with debugging enabled. If no emulator is running and no device is connected, the command will fail asking you to start one first. The very first build of a new project is typically the slowest, since Gradle has to download dependencies; subsequent builds are much faster thanks to caching.

Next: Now that you've created, run, and edited a project, head to Project Structure to understand exactly what every generated file and folder is for.

Previous Next