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:
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
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:
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:
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:
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:
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).
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:
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:
Congratulations! you have successfully run your first Cordova mobile app 🙂