Releasing An Android Application Built With NativeScript And Vue.js

So you’ve just built an awesome new Android application using NativeScript and the Vue.js JavaScript framework and you’re wondering what’s next. Unless this is an internal application, you’re probably going to want to publish the application to a marketplace like Google Play. The thing is, up until now, you’ve probably only been working with a debug build of your Android application and binary.

We’re going to see how to take a NativeScript application that uses Vue.js and build an Android binary for release using a signing key and some command line magic.

Before jumping into this, the assumption is that you’ve already installed the NativeScript CLI and have the Android Development Toolkit (ADT) installed on your computer.

Generating a Signature Keystore for Production Android Releases

We’re going to explore two different techniques for creating an Android release build, but both techniques share the same requirement of needing a keystore for signing.

We’re going to create a keystore file which should be protected, backed up, and treated with the highest priority when it comes to your Android application. From the command line, execute the following:

keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias nativescript

The above command will create a file called my-release-key.jsk that will be valid for 10,000 days. The keystore will have an internal alias called nativescript that will be used later in our process. You can name the alias and keystore file whatever you’d like.

After executing the command, you’ll be asked a series of questions, including a prompt for a keystore password as well as an alias password. Answer all questions to the best of your ability.

I cannot stress this enough. Do not lose your keystore and do not lose any of your passwords. If you sign an Android application and release it, you will not be able to update the application without the same keystore. Google and Amazon will not help you if you mess things up, so you’ll have to release an entirely new application instead.

The keytool command used above is part of your Java installation, a requirement of Android. If you’re on a Mac, the keytool application is likely already in your path.

Manually Signing a Debug Build for Release with the Android Development Toolkit

Let’s say that you want to build and sign your Android application for release the old fashion way. Let’s create a fresh project from scratch and walk through the steps for success.

From the command line, execute the following:

vue init nativescript-vue/vue-cli-template my-project
cd my-project
npm install
npm run build:android

The above commands will create a project and build a file at dist/platforms/android/app/build/outputs/apk/debug/app-debug.apk, which is your debug build. The debug build is great for testing, not so much for production release.

The next thing we want to do is sign the application with our keystore. From the command line, execute the following:

$ANDROID_HOME/build-tools/<PLATFORM-VERSION-HERE>/apksigner sign \
    --ks ~/Desktop/my-release-key.jks \
    --out ~/Desktop/release.apk \
    dist/platforms/android/app/build/outputs/apk/debug/app-debug.apk

A few things to note about the above command:

1. Your current working directory is your NativeScript with Vue.js project.
2. You need to specify the platform version you want to use in the build-tools directory, for example, 28.0.1, or whatever you have installed.
3. Your keystore is on the Desktop and your desired output path is also the Desktop.

Make sure you revise the command above to fit your needs. However, when you run the command, you’ll be prompted to enter your keystore password. If all went well, you’ll have a release build that can be published.

Building a Signed Binary for Release with the NativeScript CLI

If you don’t like messing with your $ANDROID_HOME path and the various ADT tools, we can let NativeScript handle everything for us. Again, let’s start with a fresh project for this example:

vue init nativescript-vue/vue-cli-template my-project
cd my-project
npm install
npm run build:android

You’ll notice that we’re still doing a build. We need to build with the NPM scripts because we need to transpile our Vue.js files into an appropriate format that the NativeScript CLI can use.

With the project built, we can execute the following command:

tns build android \
    --release \
    --key-store-path ~/Desktop/my-release-key.jks \
    --key-store-alias nativescript \
    --key-store-password <KEYSTORE-PASSWORD-HERE> \
    --key-store-alias-password <ALIAS-PASSWORD-HERE>

There is a catch with the above command. You need to be in the project’s dist directory before you run it.

When the command finishes, you’ll be left with a signed release at dist/platforms/android/app/build/outputs/apk/release/app-release.apk in your project.

Conclusion

You just saw how to sign an Android build, built with NativeScript and Vue.js, for release to the marketplaces like Google Play. What’s next for your Android release? You’re going to want to take the release build and upload it along with other necessary media that we won’t discuss here.

As a next step, you might want to check out the official NativeScript documentation for publishing an Android application. When the application finally becomes published, take a look at some marketing strategies that I defined in my article titled, So You Made an App, Now What?.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.