Super Clean URLs

Hi,

I currently have my user profile URLs set up like website.com/profile/username

Is there any way to make them just be website.com/username ?

I should make it clear I want people to link to their profile URL from other websites so the URL needs to stay the same. Google indexing would be nice too.

You can get close. New feature available? "Field for a readable URL"

1 Like

As for why you can’t do this, here’s a description (excerpted from the link I share below):

BUT, to explain why there’s always going to be a page name. Consider the following:

Q: What page is represented by “https://funkyfuntestapp.bubbleapps.io” or in my case “https://grupz.com ”?
A: That’s the site’s index page. It’s the same as GRUPZ: Vacation Rentals in Palm Springs and Beyond | Vacation Rental Booking Tools | Vacation Rental Calendars .

Q: What happens if I construct a URL like “https:myapp.bubbleapps.io/[First][Last]”?
A: Well, [First][Last] will be interpreted as the page name. “Take me to the page called [First][Last] on that site.” Of course, unless that page has been created in the editor , that page does not exist and so it will 404, like so:


image.png2201x868 79.7 KB

Q: Could I pass a “path” type variable to the index page at all?
A: Yes, you could, but it would have to be done like this:


image.jpg2197x371 202 KB

Summary: I think you should see now why it’s just easier if there’s a page name (like “users”) before [First][Last].

NOW, clever workaround: You COULD put some logic on your 404 page such that, if there is something in the “path” (that is if “Get path from page URL is not empty”) you redirect to some other page. Like, if you get to the 404 page by https:myapp.bubbleapps.io/[First][Last], “Get path from page URL > Type: Path Type: text” will be the string “[First][Last]”. You could Navigate > /users/with_that_string

In other threads I’ve seen at least one user suggest that that is what they do. But THAT particular example was about a site with known categories (so the set of "path"s was not infinite. In the case of this FirstnameLastname scenario there are basically an infinite number of paths, right?

So what you’d want to do is the exact same search that I show you above. Only if that search results in thisUser (in my example) being non-empty would you redirect/Navigate.

If you don’t do that check, you will in fact NEVER display the 404 page. Because the URLs:

https://myapp.bubbleapps.io/JohnSmith and https://myapp.bubbleapps.io/a_page_that_does_not_existwould both be redirected to your profile type page. And you wouldn’t want that, of course.

Best regards,
Keith

For more discussion around this, see this post reply and the entire thread:

3 Likes

You may be able to do something in your DNS settings to point website.com > website.com/profile under the covers.

I don’t think you can do it with a CNAME, as root redirection is a no-no.

There are several possibles, but you would need to pretty handy with the more technical side of webpage setup.

2 Likes

@keith I don’t want to use redirects as a primary solution as that will be clunky, with changing the URL they typed to something else. Also it will be pretty slow as it has to load 2 pages(?).

If this is so hard/impossible in bubble, why do other websites like Facebook, Twitter and a ton of other websites do this easily?

@NigelG What would this do? And how does one go about doing this?

This is (almost) what you are looking for:

https://slmmr-public-sandbox.bubbleapps.io/example_username
https://slmmr-public-sandbox.bubbleapps.io/another_example

This is some hack I stumbled on a week ago. It is using the 404 page, which is also the problem with this hack because Google will not index this page.

When Google visit this page, it receives a 404 status message which is telling Google this page does not exist. It would be great if @bubble gave us the option to control the status message a 404 page (or any page) is sending out.

I want to be able to use 404-page for dynamic pages and set the status to 200 (existing page) when Bubble finds a user in the database. And if Bubble is unable to find a user, it sets the status to 404.

Here you have a link to the editor:

4 Likes

Well, the real way this is done is at the web server level. In Bubble, we do not have programmatic access to necessary web server functions to make this work exactly the way LinkedIn (for example) does it.

Now, what I’m talking about above is all without rejiggering the URL displayed in the browser address bar. Note that the Browser plugin allows you to do that.

So, to achieve (more-or-less) exactly what you want, you can (or may need to) combine techniques. The first thing, is what I’ve described in various places: That a page with what we might call a “custom path” must – just like a page where we refer to a Thing by some arbitrary value in a URL parameter – retrieve the Thing in question from the database via a Search.

The second thing is that we may still desire to rewrite the visible URL in the browser (and again the Browser plug-in enables you to do this – its operation is a little funky and takes some experimentation).

I helped @marc2 with some of this in a simple-but-nifty app that he was building and perhaps he’ll chime in and post some tips.

This sort of thing comes up enough that – even though I’m not particularly interested in actually doing any of this in a real app – I suppose sometime I should do a comprehensive demo project and video tutorial.

tl;dr: When using Bubble, you don’t have programmatic access to your entire web stack. This prevents you from doing some types of routing/URL rewriting that are used to do some types of URL customization. You can simulate/approximate such behaviors using a combination of techniques.

4 Likes

@mike_verbruggen this might be too complex for the purpose of 404 page

1 Like

This is something people do though. In one of the follow ups to the post I referenced above, I describe something very similar. I’d not thought about the actual status msg return though.

(BTW, a workflow action to return status messages would be AWESOME in general as API Workflows sorely need this.)

2 Likes

What I really want to do is let my users link to their profile via my URL (mywebsite.com/theirusername) from other websites like YouTube and Twitter. And it stays that same URL the whole time. Google indexing is also important.

I don’t think any of the workarounds proposed here does that(?).

I think I will just name the page one letter (mywebsite.com/u/username) for now until I find a solution.

ATM, this is the best and most “Bubbly” way to do it.

2 Likes

You won’t much like it, but this is possible with a lot effort.

Two options …

  1. Use an HTML frameset to pull in the “folder” page to the top level.
  2. Set up Cloudflare on your domain, and then use their DNS flattening service to CNAME the root to the relevant page.

Nigel.

You can use bubble’s ‘This url’ function to get the current url. Then use bubble’s ‘extract using regex’ with this code .*://?([^/]+) to set a state as the ‘host’ component (https://www.yoursite.com) of your website. Then set a state of ‘username’ using the ‘find & replace’ function by looking for ‘host/’ and leaving the ‘replace with’ field blank. This will take care of the slash between your url and the username. This process runs locally, i.e. instantly.

Step 1:

Step 2:

Henry

2 Likes

Except that parsing “somehost/path” is not what the OP is seeking to do.

He wants somehost/path (a page that does not exist) to redirect dynamically to a page that does exist (dynamically, based on the value of path) and then rewrite the browser’s URL to show somehost/path.

This isn’t actually possible in Bubble without throwing a 404 response before the redirect.

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.