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?
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?
Welcome to the official Cloudflare Developers server. Here you can ask for help and stay updated with the latest news
86,801Members
Resources
Was this page helpful?
