Pretty URLs with Dynamic Links - mydomain.com/dynamiclink - Solution from Zeroqode

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:

  1. Sign up with cloudflare: https://cloudflare.com
  2. 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).
  3. 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)
  4. Click on your site in cloudflare dashboard and then go to “workers”
  5. 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
  6. 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:

  1. mydomain.com will take to your Bubble landing page at mydomain.com
  2. mydomain.com/path will take you to mydomain.com/id/path

Enjoy! :slight_smile:

Levon Terteryan

Founder @ Zeroqode

zeroqode-for-web-160x120
Bubble Templates
Zeroqode Blocks
Bubble Plugins
Bubble Courses
Convert Web to iOS & Android
No-code Development Services

33 Likes

Nice job sussing that all out, @levon!

2 Likes

Works perfect @levon thank you so much for this :smiley:

1 Like

Sure thing, Dave, welcome! :slight_smile:

1 Like

is it possible that this interferes with search for data things? Can’t get any data …

i don’t think so, it seems to work fine for us. What exactly isn’t working?

Can’t get any data… so if I search for a thing I get nothing, even the static text won’t show if it’s in the same field of the dynamic search… Will file a bug report then :slight_smile:

is it same in version-test and live?

No only with the live version…

When I enable the ‘/version-test*’ in the script I got the same problem…

when i first implemented it, the live version wouldn’t show any data from the database on the page. But then it appeared after a while. Not sure what it can be. I suggest waiting a bit before filing a bug report

1 Like

Aah ok thanks will keep you updated :slight_smile:

How long did you wait for it to show up? Still got no data :see_no_evil:

maybe try disabling HTTP proxy and leaving only DNS? (See screenshot)

Data is showing but the redirect isn’t working anymore haha… at first I turned it off and got “ERR_TOO_MANY_REDIRECTS”

So activated it again and turned off the SSL in Bubble data works when I turn it off but redirect isn’t
21

Maybe too much to ask but could you send be all the settings for your domain? Like the SSL settings in the ‘crypto’ tab… I think if I set everything the same it should be working right?

Sure, but everything was left as default in those other tabs:

hope this helps,
let me know if it works

1 Like

Thanks but still nothing… the data shows up but the ‘workers’ don’t work, so no redirect

so what’s your current configuration? Http only? You are using custom domain right?

Yes using a custom domain. This is the whole setup:



Hmm… no clue, all seems correct. Maybe copy paste the snippet for the workers again?Are you sure the workers are deployed?