Create ,build and run your first Cordova project -- Words (718)

A Cordova tutorial for building hybrid mobile apps for Android and iOS

Before we start ,make sure you have both Node.js and NPM installed because just like any awesome tool these days ,Cordova is based on Node.js and can be installed via NPM

In case you don't have Node.js installed on your system ,you can go to the official Node.js website and grab the Nodejs installer for your system .

Now lets install Cordova .

Installing Cordova

Open your terminal under Linux / MAC or your command prompt /power shell under Windows and run the following command to install Cordova via NPM :

npm install -g cordova

On some systems (MAC) you need to add sudo to be able to install cordova globally

sudo npm install -g cordova

Next navigate to your chosen working directory

cd into-working-directory

Then enter the following command to scaffold a new Cordova project using the installed Cordova CLI

cordova create app com.techiediaries.hello myApp

The first argument is the name of your project folder .

The second argument is the package name ,make sure it is unique .

The third argument is the name of your app .

For now ,we are going to test our project on the browser so we need to add the browser platform

 cd app
 cordova platform add browser

Next just serve your app with

 cordova serve 
A Cordova tutorial for building hybrid mobile apps for Android and iOS

You should be able to visit your app by going to http://localhost:8000

Since you have added nothing to your project .If you visit your app you will just see a bunch of meta information about your project such as the package name ,supported platforms and added plugins .

A Cordova tutorial for building hybrid mobile apps for Android and iOS

Building Cordova project for Android

Now to build your project to target Android you need to add the Android platform with

cordova platform add android 

Make sure you have installed Java and Android SDK and make sure you have ANDROID_HOME environment variable set to your Android SDK location .

Now lets build our app .

Again use your terminal or command prompt to run

cordova build android       

If you have an emulator installed on your system ,you can easilly emulate your app with

cordova emulate android 

If you want to test on a real device ,use an USB cable to attache your mobile device to your machine and Then run the following command

cordova run android 

Building Cordova project for iOS

Before you can build for iOS you need a MAC system with Xcode IDE .if you fulfill the requirement then just open up your terminal and enter

cordova build ios 

For emulating your app run

cordova emulate ios

For running your app on a real device enter

cordova run ios


That is the end of this post ,we have seen how to install the Cordova CLI and what requirements you need to have either to install the CLI or to build your project for target platforms .

We have also seen how to build ,emulate and run your Cordova project on Android and iOS and how to test the Cordova app on the browser by adding the browser platform and execute cordova serve .

See you on the next post where we are going to see how to access and use some key native features of mobile devices with Cordova such as the Camera ,the Geolocation API and the contacts list etc .

We are going also to see how to use Bootstrap to style our app and Angular framework to handle business logic for our application .

Then how to handle scrolling and touch events .

mrnerd is a Web Entrepreneur & Developer, Digital Marketer and a Passionate Blogger. He writes about software and website development,money making tips and SEO etc.. He is a tech addict and a computer geek with a lot of hobbies.