Showing IP Address for individual User Pages

Hello,

I’m considering an app where a user creates a public profile (avatar, user details, the whole Facebook-esque 9 yards).

I want to show the user their account’s IP address so they could plug that into their own custom domain to redirect people to the profile.

Ex:
As a user, I own www.bradfarley.com (via Google domains, GoDaddy, etc). I want that domain to redirect to my profile on the app…www.bubbleapp.com/[user profile ID]

Can I do this? How do I display the IP for the user (in their Settings page) so they can copy/paste to a registrar?

Thanks!

What you’re talking about is commonly referred to as domain forwarding. It isn’t done purely through DNS records. Most domain registrars allow forwarding to specific URLs and the interfaces are different for each one.

So you don’t need an IP address for this, just the destination URL and pointers to the documentation for common registrars.

Here’s a Google search that might help you:

https://www.google.com/search?q=forward+a+domain+to+webpage&ie=UTF-8&oe=UTF-8&hl=en-us&client=safari

Well, that was easy! I guess I was making it too complicated.

One final question: How can I set the bubbleapp.com path. So, instead of www.bubbleapp.com/u56Fgedtsb, setting it instead to www.bubbleapp.com/[User First Name][UserLast Name] ?

I think a lot of folks are confused about that (domain forwarding).

As for “friendly URLs”, this is a commonly discussed topic and there are approaches for doing that in Bubble. Check out Nigel’s comments in this thread (also searching friendly or readable URL here in the forum will show lots of discussions about this): User friendly URLs

I also cooked up my own example… One moment and I’m replying more as I think this is interesting… AND I had never tried it before!

OK, so here’s a way. Here’s a page where I extract the user’s name from the URL and then search for them:

A couple things to note:

  1. You can’t just have myapp.com/FirstnameLastname
  2. But you can have 应用宝官网-全网最新最热手机应用游戏下载
  3. (Aside: you can’t have 应用宝官网-全网最新最热手机应用游戏下载 as that seems to be a reserved word and Bubble gives a funny error message when you try to create a page with that name.)
  4. For the technique I’m about to describe to work, the User First Name and User Last Name fields MUST start with capital letters as the capital letters are used in this case as delimiters. You could get around this by extracting the name differently. For example, you could give folks the URL: 应用宝官网-全网最新最热手机应用游戏下载 (and this is really easy to extract without regex, right?)

Anyway, here’s how I set this up:

Here’s the on page load workflow:

This gets a little confusing because the page’s name is “users” – don’t let that throw you in the next screenshots! :wink:

First, let’s get the path. In my example page, this will return “KeithCrosley” and we shove that into a custom state I’ve created on the page object (which is named “users”):

Second, we extract the first name from the path. In my example, this will return “Keith” and shove that into another custom state on the page object (which again is named “users”):

^^^ I suck at Regex, so perhaps there’s a better way to do this, but this regex works for getting the first name (the string from the first capital letter up to the second capital letter). Also, I don’t quite understand why this regex returns a list… But no problem, we just take the first item in it.

Third, we can just use Bubble’s text manipulation functions to extract the last name. In my example, this will return “Crosley” and we shove that into another custom state (just for clarity and simplicity, right?):

^^^ you should understand that what we’re doing here is just snipping “Keith” out of “KeithCrosley” and leaving “Crosley”. Get it?

Now that we have a First Name and Last Name, we can “Do a search for… Users” with those parameters and grab one of them. Again, I’m taking that User object and shoving it in a custom state on the page object:

Of course, there COULD be multiple users with the same first and last names and so, if you really wanted to do things this way, you might have to have extra logic that disambiguates multiple users. For example, you could throw up a pop up or something. But what I chose to do here is simply take the first created user (the one with the earliest creation date).

For clarity, here is what the custom states on my page object look like in the inspector:

So, any user we know the name of we can display a profile page for. There’s a user in my test database called “Jennifer Hexagon”. Here would be her profile page:

Of course, there may NOT be a user with a name that we throw into the URL. Perhaps we should put up a message if so. You could do that with a condition or whatever. Like:

And so, if I don’t have a User named “Funky McChicken”, this page will show:

Anyway, this is pretty neat.

3 Likes

That’s really well thought out.

Check me if I’m misunderstanding:

  • the “official” path of the page doesn’t change…it’s still /u3dE4658373…
  • Typing in the path with the [First][Last] simply does a search for that user, and by extension finds the unique ID
  • It looks like the web address does NOT update/refresh to the u3dE4658373–it keeps the [first][last] text path
  • There’s no way to replace the default path (u3dE4658373) with a singular custom one

Am I right?

Hey @brad.a.farley. In answer to your four questions:

  1. In my example, no. You might think you could hit this page with a User’s uniqueid at the end of it, but here’s what will happen:

Of course, one could come up with a way to check for that. (For example, I suppose that unique IDs always begin with a number… at least right now… and so we could do some regex to check if the “path” starts with a number I suppose.)

  1. That’s exactly what this does.

  2. Right. There’s no redirection or rewriting of the URL that happens.

  3. I’m not QUITE sure what you’re asking here. If you don’t have a custom domain set up, your bubble app’s url looks like this:

I’m not sure what you’re referring to with “u3dE4658373”…

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:

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:

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_exist would both be redirected to your profile type page. And you wouldn’t want that, of course.

Best regards,
Keith

You could also play around with 301 redirects. It might not suit your use case given that each url has to be entered manually, but it might still be worth playing around with for something.

Well, that’s the problem, right? We don’t have programmatic access to our web server in Bubble. (The web server level is where all of the really fancy-pants stuff of web site navigation can be controlled.)

We cannot, at present, take a list of all User accounts, construct “from” URLs based on the User’s names (or whatever), construct “to” URLs that would be the new destination, and tell the web server “Hey, redirect all this junk.”

Obviously if we COULD do that, that would be the “right” way to accomplish this (LinkedIn style profile URLs). My (quite clever I think) example above is essentially a workaround for not having programmatic access to 301 redirect functions.

One final note: Should you even care that your profile page is /profile/somename or /users/somename instead of being /somename?

You original question was about domain forwarding. Note that there are two types of forwarding “masked” and “not masked”. If forwarding is set up such that the destination is masked, if we hit www.bradfarley.com and that redirects to somesite/users/BradFarley, the browser isn’t going to show that.

The browser will continue to show www.bradfarley.com. (I think… YMMV as in all things, of course.)

Another neat application of the general approach described in my example (posted previously) is that (depending on how your domain registrar’s forwarding works) you could build a programmatic link shortener / aliasing page. (For that to work, however, your forwarding service would have to preserve relative paths. I just tried this with Godaddy and unfortunately they seem to no longer maintain relative paths – they chop anything after subdomain.example.com off, so you can’t pass a “path” to Bubble in that way. That’s kind of a bummer. Other ones preserve the path part…)

:extract with Regex is intended to break a delimited text into a list of texts.
:find & replace returns a single text, which is probably what you were intending to use.

1 Like

That explains that! (I did actually intend to :extract, just didn’t realize the exact behavior – again, the regex I’m using in the example here is not precisely right… it gets the job done, but it’s funky.) :wink:

Great explanation thanks!

I have one question about the SEO effects of making user pages like this. When people google the users name will it be possible for Google to crawl and show the grupz.com/users/KeithCrosley or will it list the original one with user/KeithCroslet-15229646x614… one?

thanks!

Man Im reading through this on one screen and trying to duplicate it on my app, and im not getting it to work right. This seems like a pretty crazy amount of steps just to get an url.

It’s really not. All we’re doing is is snagging the path from the url and then doing a search for the matching User. If you let your users pick their handle, or just told them what their handle is — and save that in the database — the lookup becomes very simple.

I just got all fancy here with dynamically decomposing the path (e.g., JohnSmith -> first name John, last name Smith) just to show how you might do it.

I have a username field that the users fill out when signing up, im just not having success with “get data from url” and displaying user info based on their username.

You might want to describe or post a video of what your problem is. I can’t guess what you’re not understanding.

Here’s an easy way to get started with this idea:

Build a page named u or user or profile or WTF you want to name it. I’m saying your page is named u.

Drop a text element on that page. In the text element, just build expression:

Get path from page URL

Now hit that page with a path:

https://mysite.com/version-test/u/somedumbstring

The text element will show:

somedumbstring

Hooray! We’re basically done, right? Now that we know how to get that string, we can Do a Search for… Users constrained by field username = Get path from page URL

Now I bet there’s no user in your database with username “somedumbstring” so such a search will return empty. So, you know, hit the page with an actual username as the path.

1 Like

I must be simple minded, but what you just said clicked the lightbulb on lol. Think I got it, thanks man!

1 Like

I thought that might be the part you were missing. #goodguesser