Use "--external" hostname/ip inside app code?

I am wondering how, if it is possible, to access and use the external host value being used for a hot-reload server from within the app itself.

For example, if I start a live reload dev server with the following command:

ionic cap run -l android --external

When I open the app on my device or emulator I see the toast at the bottom of the splash screen that says the following:

Using app server http://<my-external-ip>:8100

Is there a way to read and use my-external-ip from within the Javascript of my app?

I am trying to set up Firebase emulators dynamically, based on my package.json scripts. So, if I wanted to run my app with emulated cloud functions but a production database I would run the following:

npm run em:fn npm run start:android

Which under the hood just runs this:

cross-env REACT_APP_FUNCTIONS_EMULATOR="YES" ionic cap run -l android --external

This all works great when running in my browser, but the problem starts when I use an emulator or physical device.

I’m using the following code to dynamically configure the emulators in my app:

if (process.env.REACT_APP_FUNCTIONS_EMULATOR === 'YES') {
    const functionsUrl = 'http://localhost:5001';
    console.log(`Using Cloud Functions emulator at - ${functionsUrl}`);
    firebase.functions().useFunctionsEmulator(functionsUrl);
}
if (process.env.REACT_APP_FIRESTORE_EMULATOR === 'YES') {
    const firestoreUrl = 'localhost:8080';
    console.log(`Using Firestore emulator at - ${firestoreUrl}`);
    db.settings({
        host: firestoreUrl,
        ssl: false
    });
}
if (process.env.REACT_APP_AUTH_EMULATOR === 'YES') {
    const authUrl = 'http://localhost:9099/';
    console.log(`Using Auth emulator at - ${authUrl}`);
    firebase.auth().useEmulator(authUrl);
}

So the problem is that I’m using localhost for my emulators, which is not correct when running on an external device. If I manually change localhost to <my-external-ip> then everything works great.

What I’m wondering is if there is a way to access the live-reload server’s external IP address from within my Javascript so I can keep this as generic as possible and keeping my code portable.

So something like this:

import { getAppServer } from '@ionic/some-package';

const serverHostname = getAppServer() || 'localhost';

if (process.env.REACT_APP_FIRESTORE_EMULATOR === 'YES') {

    // Use the appropriate hostname here
    const firestoreUrl = `${serverHostname}:8080`;

    console.log(`Using Firestore emulator at - ${firestoreUrl}`);
    db.settings({
        host: firestoreUrl,
        ssl: false
    });
}
// ...

Any help would be appreciated!

2 posts - 2 participants

Read full topic