DEV Community

Mikhael Esa
Mikhael Esa

Posted on

Ionic 7 + React Project Setup and Android Studio Live Reload and Debug on Real Device

  • Install Ionic CLI
$ npm i -g @ionic/cli 
Enter fullscreen mode Exit fullscreen mode
  • Run this command to scaffold project
$ ionic start my-app tabs --type=react --capacitor
Enter fullscreen mode Exit fullscreen mode
  • Install android studio latest version. link here

  • cd into your ionic project and run these command for android environment

$ ionic build
$ ionic cap add android
$ ionic cap open android
Enter fullscreen mode Exit fullscreen mode

It will build your app and setup the android environment also open the android studio.

  • If it's your first time downloading android studio, then it will download the necessary resources first automatically.

  • When the installation is done and nothing is going wrong, then press the play button on the navbar or press Shift + F10

  • Install JDK 20

  • extract JDK

  • Set environment variable for JAVA_HOME targeting the JDK directory

  • Run this command for live reload on android studio and on browser

$ ionic cap run android -l --external
Enter fullscreen mode Exit fullscreen mode

Run on Real device (Android)

  • Download and install ADB. link

  • Extract adb

  • Create an environment Path variable targeting the extracted adb directory

  • Enable developer mode on your phone and enable USB debugging. docs

  • Connect your phone to your pc and run adb from command prompt. If there's a popup in your phone asking to allow access from PC, then allow it.

  • Finally run this command to install debug version of the apk on your phone

$ ionic cap run android -l --external
Enter fullscreen mode Exit fullscreen mode

Top comments (0)