WIP [Enhancement] Getting GUI app to run on physical Android device requires changes to setup

Overview

I have been fiddling wih setup/configuration and exploring different ways to run the app for debug/development on a physical android device.

The current procedure works well with running the app on Emulator but if I run the app on device the front-end cannot reach local vite server to communicate with the backend.

Below I outline two approaches that worked for me. Each approach requires making changes to config files in the project and some manual commands. Perhaps, we can automate this processes or simply include the steps in the README documentation since this is very specific to Android physical device.

Method 1

Step 1: Add --host flag to vite in file mobile_app/package.json such that "watch:frontend": "vite --host", Step 2: In capacitor config.ts, change the IP_ADDRESS value with local IP address of the host computer. Please note that it is assumed that the physical android device is connected to the same WiFi network as the development computer.

  case "android":
    config.server =  {
      url: "http://IP_ADDRESS:3000",
      cleartext: true
    };

Please note that when you run vite with --host flag, the backend server will be exposed to the whole network which can be considered a security risk. This should be fine if devices are on an isolated or private network though.

Finally you can use WiFi or USB debugging to run the app on a physical device.

Method 2

This method is more secure than previous one but requires a few more steps. In this approach, all IP addresses in capacitor config.ts must be set to localhost.

import { CapacitorConfig } from '@capacitor/cli';

let config: CapacitorConfig = {
  appId: "org.getoutline.sdk.example.connectivity",
  appName: "@outline_sdk_connectivity_demo/app_mobile",
  webDir: "output/frontend",
  server: {
    url: "http://localhost:3000"
  }
}

switch (process.env.CAPACITOR_PLATFORM) {
  case "android":
    config.server =  {
      url: "http://localhost:3000",
      cleartext: true,
    };
    break;
  case "ios":
  default:
    config.server =  {
      url: "http://localhost:3000"
    };
    break;
}

export default config;

Then, in terminal run:

adb -s DEVICE_NAME reverse tcp:3000 tcp:3000

where DEVICE_NAME is the name of the device returned by adb devices command. You do not need to specify the device name if adb devices only return one result. However if emulator is running in addition to physical device, you get two devices in the result. For examople:

$ adb devices
List of devices attached
adb-2A101FDH200FF3-9WeC8L._adb-tls-connect._tcp device
emulator-5554   device

The command adb reverse tcp:3000 tcp:3000 open a listening socket on the mobile device (localhost:3000) and it passes all traffic to it to the computer on network that is running vite. In this approach --host flag is not needed.

To stop reverse port forwaring, run:

adb -s DEVICE_Name reverse --remove tcp:3000

Jigsaw-Code / outline-sdk