A solution for this was discussed many times on this forum including by me here: Dynamic Links - pretty URLs but no good workaround was found.
What we wanted to achieve was something like this mydomain.com/dynamiclink where dynamic link would be a user ID or some kind of a variable.
Bubble doesn’t support this feature yet and we wanted to simply redirect this kind of links to something like mydomain.com/id/dynamiclink and show related content on the ID page
After some banging of our heads we have come up with a solution using Cloudflare!
Here is a step by step:
- Sign up with cloudflare: https://cloudflare.com
- Add your site
during the process cloudflare will automatically detect all the zone settings and will replicate them (double check with your current DNS provider to make sure all the records are there). - once this is complete you’ll need to change the nameservers in your domain registrar panel to those provided by cloudflare (you’ll see them at the last step of adding a site)
- Click on your site in cloudflare dashboard and then go to “workers”
- Click on "enable workers (on the screenshot above it says “launch editor” because it’s already enabled) - this service is not free but it’s really cheap, something like $5/month - workers allows to run javascript code when the URL is queried. We used javascript code to intelligently route traffic
- copy paste this snippet to the “Script” tab
addEventListener(‘fetch’, event => {
event.respondWith(fetchAndApply(event.request))
})async function fetchAndApply(request) {
const method = request.method;
const url = new URL(request.url);
const path = url.pathname;
const site = “https://mydoors.to”;
let ispath = path.startsWith(“/id/”)
if(!ispath && path.length > 1 && method != ‘POST’){
return Response.redirect(site+‘/id’+path, 301);
}else{
const response = await fetch(request,{method:method});
return response;
}}
this snippet says that if a root domain is requested (for example mydomain.com) then simply open mydomain.com, but if there is a path after it, it redirects to mydomain.com/id/path
simply change the domain name to your own and the redirect URL (instead of id you can use any other Bubble page)
in this snippet we used 302 - temporary redirect but you can change it to 301 permanent redirect
7. Configure routes
make sure to configure routes that the script applies to as well as exceptions.
8. Once you are done click on save and then deploy
Now all the traffic coming to:
- mydomain.com will take to your Bubble landing page at mydomain.com
- mydomain.com/path will take you to mydomain.com/id/path
Enjoy!
Levon Terteryan
Founder @ Zeroqode
Bubble Templates
Zeroqode Blocks
Bubble Plugins
Bubble Courses
Convert Web to iOS & Android
No-code Development Services