What is Cordova?

What if there’s a way to build mobile apps using the same HTML, CSS, and JavaScript you already know? That’s exactly what Apache Cordova makes possible.

Cordova is an open-source mobile development framework that allows developers to create cross-platform apps without writing separate code for Android and iOS. Interested? Find out more about it.

How Cordova Actually Works?

Cordova works by wrapping your web application in a native layer, allowing it to run on a mobile device just like a regular app. When you build a Cordova project, your HTML, CSS, and JavaScript files are placed inside a component called a WebView. This WebView acts like a mini browser that runs inside the app, but it’s packaged and installed just like any other native application.

To connect your web code with real device hardware, Cordova uses plugins. These plugins are small pieces of native code that act as bridges between JavaScript and the phone’s operating system. For example, a camera plugin allows you to take pictures from your app using a simple JavaScript call, while internally it utilizes Android’s or iOS’s native camera API.

This approach enables web developers to utilize familiar technologies while still creating apps that can leverage native features, store data offline, and even operate without a network connection. Everything feels like a normal app to the user, even though it’s powered by web code behind the scenes.

Taking Your First Steps with Cordova

Getting started with Cordova is easier than most new developers expect. All you need is Node.js installed on your system and a few simple commands.

1. Install Cordova

Open your terminal or command prompt and type:

npm install -g cordova

This command downloads and installs the Cordova Command Line Interface (CLI) globally, so you can use it from anywhere on your computer. It runs on top of Node.js and handles everything from creating projects to adding platforms.

2. Create a New Project

Next, create your first app by running:

cordova create MyApp

This creates a new folder called MyApp with a ready-to-use structure containing folders for configuration, web files, and plugins. It’s the foundation for your project, and you can place your HTML, CSS, and JavaScript inside the www folder.

3. Add a Platform

After creating the project, move into it:

cd MyApp
cordova platform add browser

This tells Cordova to prepare the app for the browser platform. You can also add other targets, such as Android or iOS, later. Each platform you add ensures Cordova knows how to build your app for that specific environment.

cordova platform add android
cordova platform add ios
cordova platform ls

The first two commands add Android and iOS build environments to your project. The third command lists all the platforms currently configured, so you can verify that everything is set up correctly.

Note: Cordova doesn’t support adding multiple platforms in a single command. While it may occasionally appear to work in some setups, it’s not reliable or officially recommended. Adding them one at a time ensures proper setup, plugin installation, and configuration entries in both config.xml and package.json.

4. Run the App

Once the platform is added, launch your app using:

cordova run browser 
cordova run android
cordova run ios

This command builds your project and opens it in your selected platform. If everything is set up correctly, you’ll see a basic “Hello World” screen. It is your first Cordova app in action.

5. Emulate the App

Once the platform is added, you can also test your app using an emulator instead of a physical device:

cordova emulate android
cordova emulate ios

This command launches your app inside a virtual device emulator rather than on a connected phone. It’s useful for testing layouts, performance, and general behavior when a real device isn’t available. 

Cordova itself doesn’t come with an emulator. Instead, it uses the one that comes with each platform’s SDK. For Android, you’ll need to have the Android Emulator set up through Android Studio. For iOS, emulation is handled through Xcode’s iOS Simulator, which is available only on macOS.

These steps may look simple, but they lay the foundation for everything you’ll do next. Once you understand how the CLI works, you can begin exploring plugins, native APIs, and custom configurations to enhance the power of your hybrid app.

Wrapping Up

Cordova is a smart choice when you want to build real mobile apps using your existing web skills. It’s perfect for small teams or solo developers who prefer one codebase that runs on Android, iOS, and the web. It’s also great for converting web apps into mobile versions that work offline without requiring a complete rewrite from scratch.

As a best practice, keep your project lean. Always install only the plugins you need and test on real devices to catch issues early. Keeping dependencies up to date and maintaining a simple codebase helps ensure smooth builds across platforms.