How to Install Apache Cordova in Windows

In this article, we are going to install Apache Cordova to build a mobile application for android on the windows machine. We will do this in 6 steps to create a working Cordova project at the end of this article.

1. Install Apache Ant

Go to Apache Ant official site and download the latest version from the link below:

Ant Download Link

Unzip downloaded files and put them into a new folder (wherever you prefer) which should look something like this:

C:\CordovaApp\ant\apache-ant-1.9.6

Using this location we will create a new environment variable called ANT_HOME and then we will add it to environment PATH value like this : %ANT_HOME%\bin

Now right click to Computer -> Properties -> Advanced system settings -> Environment Variables

ant_0

ant_1

ant_2

Note: Make sure you have “;” before adding the PATH value

 

2. Install Node.js

Before we start creating our Cordova app we have to install Node.js. Depending on your Windows platform (32 bit or 64 bit) select Windows Installer (.msi) and download it from the link below:

Node.js Download Link

After installing Node.js your installation folder should be like this:

C:\Program Files\nodejs

Node.js come along with npm (Node package Manager) which makes your life so easy to handle any node based packages. Find your \npm\bin folder inside Node.js folder and copy the folder path like this:

C:\Program Files\nodejs\node_modules\npm\bin

Now we need to add this path to environment PATH like we did before:

nmp_0

 

3. Install Cordova

We will use npm to install cordova via cmd (Command Prompt). Open cmd and enter following texts:

npm install -g cordova

This will initiate an installation process which will install Cordova globally in your system, give it some time to finish (if you receive an error try again few times, npm sometimes can’t find needed packages).

 

4. Install Java JDK

Go to the official Oracle Java site and download latest Java JDK version from the link below:

Java JDK Download Link

After installing Java JDK go to the installation folder and copy the path which should look like this (except version number):

C:\Program Files\Java\jdk1.7.0_79

Now create a new environment variable called JAVA_HOME and add a location to your JAVA installation folder. Then add it to the environment PATH, looking like this %JAVA_HOME%\bin:

java_jdk_0

java_jdk_1

 

5. Install Android Studio

Go to the official Android Studio site:Android Studio Download Link

After installing Android Studio it (this part will fail if you don’t have installed JAVA SDK also it will take some time for it to open for the first time, ). Click Start a  new Anroid Studio project, and click Next several times. When Android Studio opens, go to the toolbar and click Tools -> Android -> SDK Manager. When you open the SDK Manager for the first time, several packages are selected by default. Leave these selected but be sure you have everything you need to get started by following these steps (don’t select Android 3.X or anything lower than 2.3.3 because Cordova doesn’t support them).

android_sdk_0

Once you’ve selected all the desired packages, continue to install, click Install X packages. In the next window, double-click each package name on the left to accept the license agreement for each. Click Install. The download progress is shown at the bottom of the SDK Manager window. Do not exit the SDK Manager or it will cancel the download.

Note: This will take a lot of time so make yourself a coffee while you wait. Also, you may skip this process since Android Studio comes with API 22 by default so you can run your app there.

Now you have to add android SDK path to you environment variable. In this case, your  SDK path will be:

C:\Users\{YOUR_USER_NAME}\AppData\Local\Android\sdk

First Create new environment variable called ANDROID_HOME and add the path above. Now add two additional environment PATH locations %ANDROID_HOME%\platform-tools; and %ANDROID_HOME%\tools;. Everything should look like this:

android_sdk_1

android_sdk_2

android_sdk_3

 

6. Create Cordova Mobile Application

Create a new folder to store your project. Then open new command prompt window and go to this newly created folder and enter this:

cordova create myMobileApp

This command will create a demo project with necessary files for the app. If you get an error here then you need to add npm cordova path to your environment PATH which should look like this:

C:\Users\{YOUR_USER_NAME}\AppData\Roaming\npm\node_modules\cordova\bin

Note: AppData is a hidden folder. If there is no error while creating app then just skip this one.

Next, you have to add the android platform to run your app. Execute texts below into your command prompt window:

cordova platform add android

Note: if above command can not able to add android platform try install node.js 32bit version when you are on 64bit windows.

Now you have android platform added inside your project. Let’s build you final app by doing this into your command prompt window:

cordova build android

This will build your app as debug mode and you will get success message on the window. You can also view your newly built apk file inside this folder:

myMobileApp\platforms\android\build\outputs\apk

You can install it on BlueStacks directly from here if you want.

The last step is to start Android emulator to run your app by using this command:

cordova emulate android

You will get the success message and after a few moment, the emulator will show up.

Note: Sometimes emulator doesn’t show up due to some android studio issue. But you can you import this whole project to the android studio and run the emulator from there. For more info visit here.

Or if you connect your smartphone to your computer you can test it directly like this:

cordova run android

This should install the app to your phone and open automatically.

Finally, when everything is okay then you will see this:

final_app

Congratulations! you have successfully run your first Cordova mobile app 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *