Testing NativeScript on Arch Linux

Andrea Giammarchi
Jun 7, 2017 · 3 min read

Since NativeScript managed to create a basic app using Vue.js, I wanted to give it a try via hyperHTML or, in case there’s not real-world DOM in NativeScript bindings, using viperHTML goodness right away.

… but setup first !

As usual, the documentation would target Ubuntu only, pretending that’s “the meaning of Linux” and while there are good instructions there for such distribution, those won’t work on ArchLinux.

However, the following command will do the trick, simplifying most steps:

$ bash <(curl -s archibold.io/install/android)

What you have there is one of many shortcuts provided by archibold.io, and you can see its source code in the GitHub repository.

Once installed “all the things”, you’ll still need to add Android SDK 25+ tools using the command provided by NativeScript page, only after reloading current terminal/shell (exit and reopen it or simply typectr + shift + t)

$ sudo $ANDROID_HOME/tools/bin/sdkmanager "tools" "platform-tools" "build-tools;25.0.3" "extras;android;m2repository" "extras;google;m2repository"

A long Terms And Conditions for usage will be displayed, and after reading it, you’ll have to accept it or you won’t be able to move on: it’s your call 😊

Installing NativeScript via npm

If everything went fine so far, you can now install globally nativescript:

$ npm install -g nativescript --unsafe-perm

The --unsafe-perm flag is suggested in the NativeScript page, while the global installation might require sudo privileges too, it really depends on how you configured your node and npm env.

If you don’t have node or npm at all, the following command should help you as well as the android one:

$ bash <(curl -s archibold.io/install/node)

To verify that everything is fine you can simply type tns doctor and in case there is an update you should type tns update which might take a little while but it should give you all the latest things.

You might want to skip this step if you have an Android phone but I’ve forgotten to bring one with me and I usually have an iPhone (quite pointless when your main OS is Linux but … hey … I can test Web stuff there anyway), so here I am with solutions.

Genymotion is honestly the deadly-simplest way to bring a usable AVD to your system. unfortunately it’s based on Qt, rather than Gtk+, so it’ll take a little while to install it on GNOME and on top of that, the UI won’t be HiDPi friendly, but it’ll just work™, which is the most important thing.

You need to create a free account, in case you don’t have one already, and you can install it via yaourt, a package already brought in via previoust archibold android installer.

$ yaourt -S --needed genymotion

Once you have it installed, you can start it simply typing genymotion and, after logging in with your free developer account, selecting an API 25 compatible device, in my case a Custom Phone — 7.1.0 API 25.

Once installed, you can start the emulator and after that you can double check it’s available to NativeScript simply typing the following:

$ tns device android --available-devices

NativeScript + Genymotion on ArchLinux and GNOME

Testing the Vue example

Since everything started from me trying to bring vue-like features, via viperHTML, and to NativeScript, I’ve used the same repository to test this configuration.

The TL;DR version of their instructions page is the following one:

$ git clone https://github.com/rigor789/nativescript-vue.git

$ cd nativescript-vue/nativescript-vue

$ npm install

$ npm link

$ cd ../vue-sample

$ npm link nativescript-vue

$ tns run android --device DEVICE_IDENTIFIER

The DEVICE_IDENTIFIER is what the command tns device android --available-devices shows under the Device Identifier field.

If everything goes OK, you’ll find yourself with the sample up and running on the emulated Android 7.10 🎉

Best thing of all? If you have a HiDPi screen with touch screen enabled you’ll find yourself testing NativeScript apps, without a phone, and like you had one for real. Pretty awesome so far, now I just need some time to understand which tech-stack between hyper and viper HTML would fit more on NativeScript apps.

Happy hacking!

Andrea Giammarchi

Written by

Web, Mobile, IoT, and all JS things since 00's. Formerly JS engineer at @nokia, @facebook, @twitter.