Search code examples
androidreact-nativemetro-bundler

How to specify Metro Bundler IP adress in my React-Native dev-environment?

Not sure if this is even possible, but here goes:

Setup

  • I have a React-Native app setup using react-native cli
  • I'm trying to make network requests to my application backend
    • say, stage.foo.com/graphql
  • I start my android emulator and start the dev-server:
react-native run-android
  • This starts my metro-bundler dev-server at localhost:8081

The Problem

  • Since company foo has excellent infra and security, they've setup CORS to block all requests originating from localhost.
  • However, they've also setup a public loop-back domain local.foo.com for just such an occasion.
    • local.foo.com redirects back to localhost
  • if I access local.foo.com/graphql, it points to the endpoint I want
  • When I access local.foo.com:8081/debugger-ui (the remote-debugging URL), it correctly connects to the Metro Bundler service that's running there.

The remaining piece:

So after all this, here's my question:

  • My react-native setup is configured to load the app from locahost:8081
  • Is there a way to edit the setup to load the Application from local.foo.com:8081 instead?

Note: This is not a problem with the application code, I need some way to change the source that the application hits when it's looking for the Metro Bundler service.

Solution
    1. Open React Native application
    2. Shake the device 2-3 times
    3. Dev Settings → Debug server host -> IP address with 8081 port and reload, that's it

    In Emulator / Simulator to open Dev settings you can use the command CTRL + M. Make sure it's not Release build (not Signed APK)