Jim Lynch Codes
  • Blog
  • About Jim

Writings about one coder's stories & experiences.

Setting Up A Mac For NativeScript Android Development

2/6/2021

0 Comments

 
After building a little NativeScript app with the iOS simulator and a real iPhone test device I was really struggling to get it running on an Android simulator. It kept complaining that my Java version wasn't right, then that the "Android SDK is not installed or is not configured properly"...

The tldr; is basically I need to set some environment variables in my ~/.bash_profile file and then set up a few emulators. 

Overcoming My Blockers

When I first start running the command "ns run android" and was having issues, the NativeScript compiler would keep throwing an error that, "the android sdk was not installed or configured properly"."WARNING: The Android SDK is not installed or is not configured properly"
WARNING: The Android SDK is not installed or is not configured properly

The issue seems to have been caused by me having multiple different android installations in different places. The NativeScript cli kept recognizing the "wrong one" and was trying to use that while something else wanted it to use the right one... something like that. ?

Anyway, if you are experiencing this issue make sure your environment variables are set correctly via your .bash_profile (and not being overridden later).

The in-depth guide below should help you to get things working!

Also shoutout to Igor for patiently helped me figure this out and for writing this nice setup guide!

Installing Java 8

You need the right version of java8.

Personally, I like using brew because it makes this setup a quick one-liner terminal command:
brew install --cask adoptopenjdk/openjdk/adoptopenjdk8

Installing Android Studio

Android studio comes packaged with the sdk (well it will ask if you want to install it at which point you can say "yes" and the whole installation process is quick and easy).

Official Android Studio download page

Note: Although I love Jetbrains and all their IntelliJ-esque products, I mostly use VS Code for nativescript development because it's just typescript, html, and css!

Setting Your Path Variables

These are the key ones I needed to add manually to get it working on my machine:
​
export JAVA_HOME=/Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home
export ANDROID_SDK_ROOT=~/Library/Android/sdk
export ANDROID_HOME=~/Library/Android/sdk

export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/emulator
I like to put these lines up here at the bottom of my ~/.bash_profile file.

Note: Don't forget to source your .bash_profile (or open a new terminal window) after making changes and saving the file! 
source ~/.bash_profile
​
Note: the nativescript cli may continuously write the wrong path in your .bash_profile... lol. 

If this is happening to you the things you are trying at the bottom of the file. Then when you find something that works go in and delete early lines setting that same variable since the last one is overriding all the others anyway.
Picture

NodeJS / NativeScript / Spike Project Setup

The NativeScript cli makes scaffolding a new project a breeze, and it has some yeoman-style options which allow you to choose your favorite front-end framework and optionally get mobile-friendly sidebar navigation right out of the box!

Let's make a new folder for this spike project:
mkdir android-ns-foobar-testing-123
cd android-ns-foobar-testing-123
NativeScript needs a relatively new version of node to work right.

I like to use nvm to manage my current node version. This makes it really easy and straightforward to get the latest version installed and allows you to use different versions in different projects / terminal windows...

So, suppose we want to use the latest "lts" version of node 14. We can install the latest with nvm like this: 
nvm i v14

Installing should switch to the new version automatically, but say you open a new terminal window and want that one to use the new 14.X.X version you just installed:
nvm use v14
Now that we're using a recent version of node, we just need to have the nativescript cli installed.
npm i -g nativescript
This provides a command line tool "ns" (or optionally tns). You can just type ns in the terminal within any folder to check if you have the cli tool installed:
ns


​Scaffolding a New NativeScript Project

You can scaffold a new project with the nativescript cli with the create comamnd:
ns create
This brings up a nice little interactive prompt where you can choose your pick of Angular, React, Vue, Svelt, Plain TypeScript, or Plain JavaScript! Wow!! ?
Picture
Then for each framework you'd like to use, you can choose whether you want it to scaffold out a NativeScript codebase for a blank vanilla app, one with sidebar navigation already implemented, or one with the bottom tab navigation! Awesome!  
Picture
We have a NativeScript project, woohoo!! ?

Is it too soon to buy NativeScript hoodies...? ?

Setting Up Android Emulator(s)

Ok, so at this point we have the nativescript cli ready to run and we're in our project. 

However, we're not quite ready to run it and start developing yet because the compiler will likely just shrug and say, "well I don't have any android emulators to use". 

Either that or will popup some very basic, potentially weird proportions default emulator:
Picture
I like to set up emulators by just going through the wizard pages in Android studio.

NOTE: Each emulator is set to use a specific version, and you need to create the emulators for an android version that your current android project supports!

You can view your current android sdk versions by opening up Android Studio and clicking Configure -> SDK Manager.
Picture
This will take you to the sdk manager page. You can see that on my machine I currently have android sdk versions 28 and 29 installed.
Picture

Note: you could also use this somewhat hackish command which uses the android tools "avdmanager" to see what targets we have available to use:
${ANDROID_HOME}/tools/bin/avdmanager list

Ok, so now that I know I want to use android API version 29, it's time to make some emulators!

Let's go back to that popup that appears when you first open Android Studio and click on Configure -> AVD Manager.
Picture
This should take you to a little "Virtual Devices" screen. Click the Create Virtual Device... at the bottom to get started creating a new device emulator.
Picture
​
For this example I'm going to create an emulator for two devices: the Pixel XL and Pixel 4.

I really just selected the device from the "Select Hardware" list and ran through the rest of the pages hitting "Next" and just going with the default configurations.
Picture
There was a "System Image" page though where I couldn't just hit "Next"- it wanted me to select a system image!

Remember from an earlier step the latest android sdk I had is for the v29 API. So, I this popup below I downloaded the second option, "Q" release that uses android 29.
Picture
After setting up your emulators you should see them in the Android Studio AVD Manager screen: 
Picture

This handy ns cli command will show you available android emulators:
 ns device android --available-devices
If you've set up your emulators with the proper API and targets that you're using in your NativeScript project then you should see the new devices output in the table printed to the console:
Picture
If you see the emulators here then you're good to go. Let's run the project!! 


Running The Project On An Emulator

To run the project on an android emulator, use the cli "run" command, specifying that you want to run it on android:
ns run android
Notice how the table from a previous step that showed all of our available emulators had a column named Image Identifier.

We can run our project on a specific emulator by passing the --device flag and then providing the Image Identifier for that emulator.

For example, this runs it on our Pixel XL emulator:
ns run android --device="Pixel_XL_API_29"
Behold, a glorious NativeScript application running on our Pixel XL emulator!!
Picture
Below is a screenshot of how the nice sidebar navigation looks when open- keep in mind this is all still a completely fresh scaffold, right out of the box code!

And yes, it uses the conventional router for the front-end framework you chose when scaffolding it!
Picture
Similarly, this runs it on our Pixel 4 emulator:
ns run android --device="Pixel_4_API_29"

Although this does look very similar to the Pixel XL, they are actually different aspect ratios...
Picture
Picture

Go Forth And Dev!

Welp, you should be all set up now for developing your NativeScript app on android emulators... now go build an awesome app!  ?
0 Comments

Your comment will be posted after it is approved.


Leave a Reply.

    ​Author

    Picture
    The posts on this site are written and maintained by Jim Lynch. About Jim...
    Picture
    Follow @JimLynchCodes
    Follow @JimLynchCodes

    Categories

    All
    Actionscript 3
    Angular
    AngularJS
    Automated Testing
    AWS Lambda
    Behavior Driven Development
    Blockchain
    Blogging
    Business Building
    C#
    C / C++
    ClojureScript / Clojure
    Coding
    Community Service
    CS Philosophy
    Css / Scss
    Dev Ops
    Firebase
    Fitness
    Flash
    Front End
    Functional Programming
    Git
    Go Lang
    Haskell
    Illustrations
    Investing
    Java
    Javascript
    Lean
    Life
    Linux
    Logic Pro
    Music
    Node.js
    Planning
    Productivity
    Professionalism
    Python
    React
    Redux / Ngrx
    Refactoring
    Reusable Components
    Rust
    Security
    Serverless
    Shell Scripting
    Swift
    Test Driven Development
    Things
    TypeScript
    Useful Sites
    Useful Tools
    Video
    Website Development
    WebStorm
    Writing

    Archives

    March 2023
    August 2021
    February 2021
    January 2021
    October 2020
    September 2020
    May 2020
    April 2020
    February 2020
    January 2020
    December 2019
    October 2019
    September 2019
    August 2019
    July 2019
    June 2019
    May 2019
    April 2019
    March 2019
    February 2019
    January 2019
    December 2018
    November 2018
    October 2018
    September 2018
    August 2018
    June 2018
    May 2018
    April 2018
    March 2018
    February 2018
    January 2018
    December 2017
    November 2017
    October 2017
    September 2017
    August 2017
    July 2017
    May 2017
    April 2017
    March 2017
    February 2017
    January 2017
    December 2016
    November 2016
    October 2016
    September 2016
    August 2016
    July 2016
    June 2016
    May 2016
    April 2016
    March 2016
    February 2016
    January 2016
    December 2015
    November 2015
    October 2015

    RSS Feed

  • Blog
  • About Jim
JimLynchCodes © 2023