How to configure capacitor converted React android app to hit the API hosted on my personal server?

This is my current capacitor.config.ts:

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

const config: CapacitorConfig = {
  appId: "test.app.id",
  appName: "test_app_name",
  webDir: "build",
  bundledWebRuntime: false,
  // remove for production
  server: {
    url: "http://10.0.8.4:2200", // the port on my PC hosting the React UI app
    cleartext: true,
  },
};

export default config;

The above config file is used when I am live testing using android emulator. The app emulator is paired with my Nokia G10 via Wifi and QR code scan.

I notice that if I leave the config file as it is and then bundle the app, release it for testing on the android add store, download it on my phone, it will still point to the React app running on my PC. If I turn off the React app on my PC, the actual downloaded and installed android app will error out.

If I want to actually bundle, publish, and install an independent version of the app running locally on my Android device, I would have to remove the server property, like so:

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

const config: CapacitorConfig = {
  appId: "test.app.id",
  appName: "test_app_name",
  webDir: "build",
  bundledWebRuntime: false,
};

export default config;

The problem with this is now the actual Android app will not be able to hit the backend API server, which is also running on my local PC. During the testing, the React app references localhost to hit the backend server API.

But I tried to remove the local host and use the actual URL to my PC, like so in my package.json file:

proxy: "http://10.0.8.4:2201", // 2201 is the port to the backend API

However, this doesn't work. The installed Android app running locally on my Nokia G10 will not be able to hit the backend API server running on my machine.

Question:

Since my android emulator on my machine is paired using QR code with my Nokia G10, why is it not able to hit my backend server running on my machine, when it is able to still hit the React UI app if I keep the server property (above) in the capacitor.config.ts file?

What is the fix?

EDITED:

I was able to hit the backend end API url on the chrome browser on my Nokia G10. So my Nokia G10 is not blocked by firewalls.

Upvotes: 0

Views: 24

Answers (0)

Related Questions