How to create, build and run Ionic 5 Hello World app on Android

Aug 13, 2020 mobile ionic hello world
Share on:

Let’s see, step by step, how to create, build and run our first Ionic project on Android phone. This post will serve as a reference for future projects, so it will be right to the point. I am assuming Bash console on Linux is being used and npm has been already installed. Let’s get started:

We’ll create first a simple app based on the ‘sidemenu’ ionic starter template, add some Hello World code and serve the app in browser:

  • npm install -g @ionic/cli
  • ionic start myApp sidemenu
    • Framework –> Angular
    • Integrate your new app with Capacitor to target native iOS and Android? –> Yes
    • Create free Ionic account? –> No
  • cd myApp
  • vi src/app/folder/folder.page.html
    • Add some Hello world text into the file and save the file
  • ionic serve --lab
    • Install @ionic/lab? –> Yes

A browser will open on http://localhost:8200 where we can check how the app looks like. Once we check everything, we can build the app. I am assuming here that Android Studio and Android SDK are already installed:

  • Define ANDROID_SDK_ROOT environment variable and point it to Android SDK Folder.
    • Probably something like: export ANDROID_SDK_ROOT=/home/youruser/Android/Sdk is needed
  • Edit capacitor.config.json and add path to Android Studio (modify accordingly):
    • "linuxAndroidStudioPath": "/home/youruser/android-studio/bin/studio.sh"
  • ionic capacitor add android
  • ionic capacitor copy android && cd android && ./gradlew assembleDebug && cd ..

Gradle will build the APK which will be available at: android/app/build/outputs/apk/debug/app-debug.apk

Last, let’s install and run a simple webserver, so we can use our phone to download easily the APK and install it:

  • npm install -g node-static
  • static -a 0.0.0.0 -p 8080 android/app/build/outputs/apk/debug

That’s it! If the phone is connected to the same wireless network as the PC, just download the file from http://<your PCs IP Address>:8080/app-debug.apk and install the APK. Make sure that installations from Unknown sources are allowed.