Setting Up Android Emulators for NativeScript Development

Sometimes you write a blogpost to get your thoughts sorted. This post is a perfect example.
I hereby present a collection of commands for very impatient people to get a NativeScript project up and running. If you execute all of them you will be able to start any NativeScript demo, e.g. the great Groceries sample. We will set up an Android AVD and Genymotion.

On Windows systems, you can develop, build, and deploy NativeScript projects that target Android.
On OS X systems, you can develop, build, and deploy NativeScript projects that target iOS and Android.

For a detailed instruction see the getting started guide.
Make sure that you have node.js installed, then follow these steps:

1. Install JDK, Android SDK & HAXM

The Java SE Development Kit (JDK) is required for the Android SDK.

On windows

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://raw.githubusercontent.com/NativeScript/nativescript-cli/production/setup/native-script.ps1'))"`

On OS X

sudo ruby -e "$(curl -fsSL https://raw.githubusercontent.com/NativeScript/nativescript-cli/production/setup/native-script.rb)"

For both

The Android x86 emulator will be much more faster if you install the "Intel® Hardware Accelerated Execution Manager" (HAXM). You definitely want to install it to speed up Android app emulation on your host machine. A chipset with Intel VT is required, of course.

2. Install packages for the Android SDK

Locate the android executable and call:

android update sdk --filter tools,platform-tools,android-23,build-tools-23.0.2,sys-img-x86-android-22,extra-android-m2repository,extra-google-m2repository,extra-android-support --all --no-ui

Skip the --no-ui parameter if you prefer a graphical user interface.

Screenshot Android SDK Manager

3. Android SDK Tools: Create an AVD

The AVD Manager provides a graphical user interface to create and manage Android Virtual Devices (AVDs).
AVD files are executed by the Android Emulator. Launch the AVD Manager, configure a device and start it.

Screenshot Android AVD Manager

4. Start the Demo

Everything up to this point was not specific to NativeScript.
We need a starting point, for example the groceries demo:

git clone https://github.com/NativeScript/sample-Groceries.git

Change into the cloned directory and add some useful npm-scripts to the package.json:

"scripts": {
    "postinstall": "tns platform add android",
    "start": "tns run android --emulator",
    "start-geny": "tns run android --emulator --geny=\"DEVICE_NAME_HERE\"",
    "doctor": "tns doctor"
},

Lets install the nativescript-cli and angular2 via NPM.

npm install
npm start

If something goes wrong, type the following command:

npm run doctor

5. Highly recommended: Genymotion

Screenshot Genymotion

Soon you will find out that the Android Emulator still very slow and tricky to set up.
You should give Genymotion a try! The solution works on top of Oracle VM VirtualBox and is a breeze compared to the normal emulator.

Register at genymotion.com, chose the free license (Free for personal use only).
Download and install Genymotion and Oracle VM VirtualBox.
At the installation directory of Genymotion to the PATH environment variable.
Add and configure a device with the Genymotion graphical user interface.
Start the device.
Verify in the "Genymotion shell" the name of the created device:
```
devices list
```

Start the demo:

npm install -g nativescript
genyshell -c "devices list"
tns run android --emulator --geny="device name"

We use the genyshell to figure out the exact name of the device.
Then we instruct the tns command to use the given Genymotion device instead of the normal Android emulator.
Previously we also defined an NPM script for that: npm run start-geny. Keep in mind that you have to adjust the device name in the package.json first.