How do you tunnel a local web app with subdomains?
I work as a web developer at "Acme Hotels Inc." and we are developing a web application for our hotel management system. And our client asked if he could access our local development instance so he can see the progress in real time as we code it.
Here is what our web app looks like when running on our local development machine: http://acme-hotels.local/
https://pastebin.mozilla.org/W14pDEGc
And this is what we want to share with our client. We want to expose our local development instance to the internet so our client can access it. We considered multiple online services that provide tunneling services, and we decided to use "Cloudflare tunnels" for this purpose. We already own our domains, one of them we can use for this purpose. We will use "acme-hotels.com" domain for this purpose.
The setup with Cloudflare was super simple. We simply created a Zero Trust tunnel, installed the connecter in our network and then we were able to create public hostnames. We created a hostname "dev.acme-hotels.com" and pointed it to http://192.168.1.128:80 and specified host header "acme-hotels.local". Now our client can access our local development instance by visiting "dev.acme-hotels.com" in their browser. It works really well.
But we came across one major problem. While https://dev.acme-hotels.com/ loaded just fine in the browser and opened our local development app, when the client clicked on some of the links in our web app, they took him to http://rooms.acme-hotels.local/ or http://guests.acme-hotels.local/ or http://users.acme-hotels.local/ which are not accessible from the internet. We have many such links in our web app. And they don't seem to be working from outside. What do we do? It is cool that the main page loads but what about links that include subdomains? How is this problem solved? The subdomains seem problematic for us but that is how our web app is created. We have subdomains for different sections of our web app. How do we make them work from outside?
4 Replies
You can just add more hostnames to the tunnel config
But that won't change the urls in my app
Sorry, I should of gotten more information.
If you want to make those URLs accessible from the internet then you will need to change the domain as
.local
is reserved. I don't know about your building process but you maybe you could change them to use room.dev.acme-hotels
for dev builds and route those via tunnels.what about schema? For example we have this in our .env file:
On local machine, it needs to be http but if someone is browsing my app via Cloudflare tunnel on the internet it needs to be https. How can I handle this?