Installing Cordova and resolving setup issues on Windows 10

There are many ways you can develop mobile applications. Naturally you may have native applications written especially for Android and iOS. On the other hand you may create a multiplatform application that can be compiled to work on both mobile platforms.

The two main multiplatform mobile development frameworks are Xamarin and Apache Cordova. You may find that Apache Cordova is equivalent to PhoneGap that also has additional commercial services. Also one of the popular frameworks based on Angular is Ionic that is an kind of wrapper on top of Cordova to speed up writing mobile apps with Angular and also has additional services.

In this post I will cover installation of Apache Cordova together with all tools required to run a Hello World application in an Android emulator. So let's start.

I'm assuming you have a bare metal Windows 10 installed and you're ready to rock.

First thing you need to install chocolatey. It is a package manager for windows and it will simplify a lot installation of other components and we will use chocolaty for it rather than the installers on the web.

So run command line as administrator and run

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

 Now you can install Node Js

choco install nodejs

 and Cordova

npm install -g cordova

Let's create a new Cordova project, change to a folder where you want the project to be create and run on command line

cordova create NotesApp

Now you have a new project created but we would like to run it both in a browser and on Android emulator. So let's add platoforms and run it.

cd NotesApp

cordova platform add browser 

cordova run browser

And you should get the application page in your default web browser

Now let's run it in Android emulator. First we'll add new platform to the project using command line again

cordova platform add android

and let's try to run it

cordova run android

Obviously this did not work because we do not have java jdk installed. Due to the licenses I suggest using the Adopt OpenJDK rather then the version from Oracle. So download the OpenJDK 8 (LTS) version from https://adoptopenjdk.net, extract and add JAVA_HOME system variable with the main folder of the JDK you've just extracted

Also modify the PATH variable and add the JDK\bin folder so java can be run without the location from command line.
Reopen command line so it picks up the new variables, change to the application folder and let's try to run it again

cordova run android

Obviously this did not work with the next error

Android Studio project detected
Failed to find 'ANDROID_HOME' environment variable. Try setting it manually.
Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to include path to valid SDK directory.

We do not have Android SDK so we need to install one. The easiest will be to just install Android Studio because it contains SDK and also tools to manage different Android platforms and Android Virtual Devices (AVD). You could install just the Android SDK that contains AVD too, but then you will have just the command line so it may be a little more complex to create new virtual machines for the emulator. So again using chocolatey in command line (run as admin)

choco install androidstudio 

After installation find Android Studio via the start button and run, you will get the welcome screen

just go through using the Next button and wait until it downloads what's needed. This will take a while so this is a good moment to move a bit and get yourself a coffee.

Hyper-V issue - begin
If you have HyperV installed and enabled you may get the following error (if not then just scroll down a bit to skip this explanation)

Running Intel® HAXM installer
Failed to install Intel HAXM. For details, please check the installation log: "C:\Users\username\AppData\Local\Temp\haxm_log.txt"
HAXM installation failed. To install HAXM follow the instructions found at: https://software.intel.com/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows

If you google this problem you may get outdated information that it will not work and you need to disable HyperV or you need to download Microsoft emulator. This is not true. In the recent versions of the tools this has been resolved already and it is completely fine to use both HyperV and HAXM to run Android emulator on one Windows 10 laptop.
So to resolve this go to Start and find Apps & Features then on the right hand side you have Programs and Features available, once you open it then open Turn windows features on or off. Enable Windows Hypervisor Platform. 

Hyper-V issue - end


Continued….

Just hit Finished button in the Android Studio installer and you will get the Welcome to Android Studio screen.

There is a little option on the bottom right of the screen to open the Configure menu. Run the SDK Manager from it. 

Select at least one platform that you want to develop for and run in the emulator. One hint is that a bit older than the newest will be smaller and starting a bit faster because they have lower hardware requirements as the real phones do. so I selected Android KitKat 4.4 that still a lot of phones has as well as the newest Android 9.0 Pie. Do not select all of them because you may not need them anyway and it takes a lot of space on the disk.

Once you hit OK and accept any licenses it will start downloading the requested components and wait until finished.

Now from the Configure option choose AVD Manager and create virtual device. Just choose the default one, which is Nexus 5X 5.2''.

Then Next and on the next page hit download on the Pie to get the image downloaded and on the x86 Images also KitKat.

Once both downloaded for the start select the KitKat 4.4 to continue. You will get the page with the summary, we will not change anything here but just hit Finish.

Now you have an emulator ready to go, so just hit the Play button to start it up.

So now we have the emulator up and running

Ok, but where is my application, we wanted to run our Apache Cordova Hello World application in Android emulator. Just run in the command line in the application folder

cordova run android

Did not work? And you got one of the following errors

Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK.

The Android application could not be compiled because it requires Gradle to do so. You will install it with chocolatey

choco install gradle

If you get

Failed to find 'ANDROID_HOME' environment variable. Try setting it manually.

Go to System (right click on the Windows Start button) and then to Advanced system settings, then to Environment Variables and set to the location of the SDK it would be 

C:\Users\<USERNAME>\AppData\Local\Android\sdk

Ok, now you should have overcome all the possible issues so run

cordova run android

and now you can enjoy the Apache Cordova Hello World application up and running in the Android emulator on Windows 10.

If you go to Apps on the emulator you will also find the app is installed and available there with its default icon.

Ok it took a while but now you're ready to start coding your app. You will find the hmtl and js files in the application folder NotesApp\www and you may start writing your own multiplatform mobile app.