So we want to create a subdomain like this.ourmaindomainlinkedtobubble.is instead of ourdomainlinkedtobubble.is/page or /pathto/randomStringGeneratedASuniqueURL.
First thing that we’re gonna do is to change that randomstring to a name so it will be /pathto/niceURL.
There are a few tutorials around, for this example we can use @romanmg’s response (she’s awesome!) Individual URL's for users - #3 by romanmg
Then, we are going to need a hosting with cPanel (is the way I did it, maybe it works without cPanel with any another control panel for the host).
We host the domain there, not on bubble.
We Point A records of ourdomain.tld to bubble so when we go to ourdomain.tld it will load the the bubble app (baiscally it will replace the freeSudbomainWithTheApp’sName.bubbleapps.io is offering for free.
The next thing we’ll do is to create a wildcard DNS. On subdomains, we will create the subdomain * (asterisk, which is the symbol for anything) for ourdomain.tld.
Please note that this will result in creating a foldername with this name: )
_wildcard _.ourdomain.tld (there is no space between d from wildcard and _ but if I use it togeter it will make wildcard bold).
Now we can go to file manger and we will find this folder on the files and folders tree. Click on it.
On the right we have its content. Delete everything and either create a new PHP file named index.php and paste this code inside it, or download it from the link below.
This one is for live and the other one is for live:
Live/production
<?php list($first,$host) = explode(".",$_SERVER["SERVER_NAME"]); $var =""; $var .= ""; $var .= "body {margin: 0;}"; $var .= ""; echo $var; ?>
Testing:
<?php list($first,$host) = explode(".",$_SERVER["SERVER_NAME"]); $var =""; $var .= ""; $var .= "body {margin: 0;}"; $var .= ""; echo $var; ?>
Okay, so what is this code doing?
It will look at the URL that we have entered in the browser, the one that loaded the page itself, and we will have it like this:
subdomain.domain.tld. It will extract the sudomain with
$first
and then it will add the extracted information, at the end of the link: https://bubbleAppName.bubbleapps.io/HERE or https://bubbleAppName.bubbleapps.io/version-test/HERE for testing environment
This is valid if we don’t create the A record for ourdomain.tld. so We will use the bubble’s URL scheme. If we do create the A record for ourdomain.tld, then we simply replace the https://bubbleAppName.bubbleapps.io with ourdomain.tld and it will result in:
Live/production
<?php list($first,$host) = explode(".",$_SERVER["SERVER_NAME"]); $var =""; $var .= ""; $var .= "body {margin: 0;}"; $var .= ""; echo $var; ?>
Testing:
<?php list($first,$host) = explode(".",$_SERVER["SERVER_NAME"]); $var =""; $var .= ""; $var .= "body {margin: 0;}"; $var .= ""; echo $var; ?>
Now that we have extracted the subdomain and pasted at the end of the URL, no matter if we use bubble’s domain URL scheme or our own domain, the other part of the file/script will load that URL inside our subdomain page, in iFrame, without border.
Of course, we will only use the testing code while we test it. When we’re done and publish the app for live/production, then we will delete the “/version-test” part from the URL inside that code. Or we can just not use it, and go straight for live.
Don’t forget to add condition to display a 404 page if no content is loaded on the page when requested. As we are using wildcard DNS, anybody can type anything e.g. whateverishits.ourdomain.tld. If that page doesn’t exist inside bubble, then we need to load the 404 page.
Please keep in mind that since we’re using wildcard DNS, this will only work for non-secure pages (I don’t recommend it). We need to purchase a wildcard SSL certificate that is $60-100/year minimum. And the host might charge you a fee for a static IP address.
So there you have it. Instead of sending the user to ourdomain.tld/pathto/THIS or ourdomain.tld/THIS, which I personally don’t like, we can send the user to THIS.ourdomain.tld which will in fact load the ourdomain.tld/THIS or /pathto/THIS.
Good luck and have fun!
Stay creative!
Link to index.php file: subdomain.bubble.app - Google Drive
L.E. For some reason bubble won’t display the php code correctly (entirely) please find it here:
