How to configure a react capacitor app running on mobile by usb to make http request to sendbird as localhost instead of its IP address?

Question

I have a React webapp that I have converted it to native app using Capacitor. For live reloading, I had to edit capacitor.config.json as follows:

const config: CapacitorConfig = {
  //
  webDir: 'build',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.XXX.XXX:3000',
    cleartext: true
  },
};

This works just fine until the app makes a request to sendbird for initialization. I get the error message: 'SendBirdCall needs https connection, except for 'localhost' or '127.0.0.1'. I tried to setup an express https server but failed. Later I created two channels using ngrok - one for the server and one for the app. The sendbird request was successful but the graphql websocket was failing as ngrok does not support websocket links, also tried a tcp link but it failed as well.

I have another app that I created using the Sendbird React Native Quickstart project and I did not need to do any configuration for that. What could be done in order to make sendbird request using localhost from mobile connected via usb while also being able to have a ws connection?

Answer 1

Try to change the url :

const config: CapacitorConfig = {
  ...
  server: {
    url: 'http://localhost:3000',
    cleartext: true
  },
};

And after connecting a physical device execute the following:

cd $ANDROID_HOME/platform-tools
./adb reverse tcp:3000 tcp:3000

Where $ANDROID_HOME is the Android SDK directory.