0

I am using javascript (pure) in a web project in firebase. I'm used to getting URL parameters canonically, like: mydomain.com/?p=ID But I would like to make the URL friendly, for example: mydomain.com/nameOfMyUser

In this way, I would like to treat what comes after the slash bar as a parameter and display the content related to it on the screen.

The user's name will come from the firestore, that is, internally I will check the uniqueness, but it will be created by the user himself.

How can I use the URL suffix (nameOfMyUser) as if it were a parameter, avoiding 404 error?

Is this possible? Can someone help me?

Thanks.

Plinio Garcia
  • 31
  • 5
  • 1
    Are you using a framework like Vue.js, Angular, etc..?? Or by "pure javascript" you mean you just use HTML and JavaScript? In the second case, I guess you generate some HTML content (i.e. modify the DOM) via JavaScript. – Renaud Tarnec Apr 03 '21 at 19:41
  • Hi @RenaudTarnec. Thank you for your interest in my question. It is a simple application. I am not using a framework. Yes, I intend to generate the content by manipulating the html DOM. But the point is that the server interprets what comes after the slash as a folder on the host and not as a parameter (error 404 appears). I would like this to be treated as a custom route, something that makes the server interpret this part of the URL as if it were a parameter of the URL, not a folder on the server. I don't know if I was clear, sorry. – Plinio Garcia Apr 03 '21 at 19:48
  • You should, in JavaScript, get the url (https://stackoverflow.com/questions/1034621/get-the-current-url-with-javascript), parse it and base on the value after the last slash, trigger a query to Firestore and then modify the DOM with the result of the query. Note that by using a framework it would be much easier and much more maintenable. For example learning how to do that with Vue.js is not very difficult. For the routing part, it depends on your hosting solution and how deep you can configure it. – Renaud Tarnec Apr 03 '21 at 19:59
  • Thanks again, @RenaudTarnec. I will learn Vue.js and see what solution it offers me for routes. It is clear to me that I should use location.href (especially if I venture to do this without a framework). But the question is: how to intercept the request before the server identifies the part after the slash as a pathname and return to me that there is no such page (404). Ps .: I will host on the firebase itself. I feel like I needed to do the same behavior that a DNS does, like that ... LOL. How twitter.com/myusername works instead of twitter.com/?uname=something – Plinio Garcia Apr 03 '21 at 21:51
  • Glad to see you found a solution. My comment “it depends on your hosting solution and how deep you can configure it” was exactly evocatingh hosting feature like the one offered by the Rewrite mode of Firebase Hosting. And you will discover that it works like a dream with SPAs like the ones doesn’t with Vue.js. I suggest learning it with https://www.vuemastery.com/. – Renaud Tarnec Apr 04 '21 at 06:41
  • Thanks for the tip. @RenaudTarnec. Regards. – Plinio Garcia Apr 04 '21 at 18:49

1 Answers1

1

I think that found the solution: rewrites!

In firebase.json I can:

"hosting": {
// ...

// Serves index.html for requests to files or directories that do not exist
"rewrites": [ {
  "source": "**",
  "destination": "/index.html"
  } ]
}

So, in the index.html, using location.href and firestore functions I can manipulate the path to show the content of my specif user passed in the URL.

Plinio Garcia
  • 31
  • 5