如何通过 usb 配置在移动设备上运行的 React 电容器应用程序，使 http 请求 sendbird 作为本地主机而不是其 IP 地址？

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.