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
WARNING: The Android SDK is not installed or is not configured properly
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
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
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
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
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.
NodeJS / NativeScript / Spike Project Setup
Let's make a new folder for this spike project:
mkdir android-ns-foobar-testing-123
cd android-ns-foobar-testing-123
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
npm i -g nativescript
ns
Scaffolding a New NativeScript Project
ns create
Is it too soon to buy NativeScript hoodies...? ?
Setting Up Android Emulator(s)
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:
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.
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.
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.
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.
This handy ns cli command will show you available android emulators:
ns device android --available-devices
Running The Project On An Emulator
ns run android
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"
And yes, it uses the conventional router for the front-end framework you chose when scaffolding it!
ns run android --device="Pixel_4_API_29"
Although this does look very similar to the Pixel XL, they are actually different aspect ratios...