DEV Community

Mikhael Esa
Mikhael Esa

Posted on

1 1 1 1 1

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

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post