Local HTTPS tunnel for mobile devices (ngrok etc.)

help
1

I am trying to setup a local HTTPS tunnel with services like ngrok or localtunnel. It works fine in Chrome on macOS. But if I try to open the same page on my iPhone, I get a blank page.

The reason is that Meteor tries to download modules and other files (e.g. universe:i18n localization files) using the original localhost URL instead of the tunnel’s public URL.

Is there a way around this?

1 Like
2

I’m unsure if I understood completely, but I think this API can help you in this case. If you can solve this, please share your solution!

3

When you start your Meteor server, make sure to set the ROOT_URL to the same host as your ngrok host.

2 Likes
4

Good point! Will try that.

5

Thanks, but I don’t think this would help in this case. I’m already using this API for getting absolute URLs to my app if I let users share links etc. But my issue is related by the way Meteor generates the links for HMR and bundle loading. I think @sussition’s approach could work. Will try it out and report back.

6

Unfortunately, it did not work. There is still some cases where Meteor loads from localhost instead:

image
image1920×1189 171 KB

My ROOT_URL should be correct, though:

image
image764×116 13.9 KB

7

It’s interesting that it works in a desktop Chrome browser. Shouldn’t Chrome block local host access as well if the server is running on a HTTPS domain? I checked the Network tab and saw that it is actually allowing fetch to localhost. The only error I get in Chrome is this one:

image
image704×94 13.8 KB

But the app seems to work just fine.

On Safari, it breaks, because localhost is not available. If I try to run Meteor under a local IP address instead of localhost, Chrome fails as well.

image
image1416×1234 189 KB

This is understandable, because it cannot detect whether this is local or not.

8

BTW: I saw a quite old Meteor package called tarang:ssl, which would allow me to embed such a proxy directly in the Meteor app. But this also fails as of 2024. At least with a self-signed certificate, because Chrome / macOS block this certificate and I did not find a way to workaround this. And maybe even if I did, it would be affected by the same issues as ngrok et al. again.

9

That’s weird, looks like your absoluteUrl() is being overwritten somewhere. I had a look at the universe:i18n package and it seems to reference absoluteUrl().

Are you running anything that may be overriding your ROOT_URL? Anything in your npm/node environment variables?

10

I don’t think so.

I’m starting meteor with this npm skript:

  "config": {
    "port": "3040",
    "ipaddress": "192.168.1.44"
  },
  "scripts": {
    "start": "meteor run --settings settings.json --port $npm_package_config_ipaddress:$npm_package_config_port --mobile-server $npm_package_config_ipaddress:$npm_package_config_port",
  }

I tried to set the mobile-server to another domain, but this did not work. Omitting the IP address in the port will just switch to localhost.

11

Ok, I made it work with this approach:

{
  "public": {
    "packages": {
      "dynamic-import": {
        "useLocationOrigin": true
      }
    }
  }
}

as described here:

You don’t even have to set the ROOT_URL for this.

2 Likes