Firebase: Pass url Param in URL Rewrite

Question

For the code examples in the firebase docs, it says to initiate a url rewrite like so:

        "hosting": {
          // Add the "rewrites" section within "hosting"
          "rewrites": [ {
            "source": "**",
            "destination": "/index.html"
          } ]
        }

What do I do when I want to pass a parameter to the index page? I tried:

        "hosting": {
          // Add the "rewrites" section within "hosting"
          "rewrites": [ {
            "source": "/item/**",
            "destination": "/item.html?i=$1"
          } ]
        }

But that doesn't do anything..

I have also tried the answer below:

 "hosting": {
  // Add the "rewrites" section within "hosting"
  "rewrites": [ {
    "source": "/item/:item",
    "destination": "/item.html?i=:item"
  } ]
}

but that just returns a 404 page.

@frank-van-puffelen - I noticed you edited this. Do you have a solution? (Also noticed you work at Firebase) — JamesG, Jul 16 '17 at 07:49
I don't think what you are trying to do is possible (the docs for rewrites don't say anything about variables or placeholders). Instead look into Cloud Functions for Firebase to redirect URLs to a function where you can write code to dissect the path and generate whatever response you want. https://firebase.google.com/docs/hosting/functions — Doug Stevenson, Jul 22 '17 at 19:47
I don't really understand why would you want to do that. Stephen Delaney's answer makes more sense IMHO — eddyP23, Apr 01 '19 at 15:42

score 9 · Answer 1 · answered Mar 11 '19 at 23:02

I know this is an old question but I had a similar issue and didn't find an answer so thought I'd share how I solved it.

{    
    "hosting": {
    // Add the "rewrites" section within "hosting"
        "rewrites": [ {
            "source": "/item/**",
            "destination": "/item.html"
        } ]
}

I solved my issue by rewriting the dynamic URL to the static html page. Since it's a rewrite the URL will stay as the source URL pattern and not change to the destination URL like a redirect would.

We can then read the source URL through window.location.pathname with Javascript on the item.html page. You can then use .split('/') to return an Array to choose the part that you need.

Hope this helps to anybody looking for a similar solution.

there are some dirty hacks yes, but this has to be the dirtiest hack I have ever witnessed :) — Ayyash, Jan 01 '20 at 13:31
Actually doesn't seem tacky at all. It's basically how you parse GET requests. Extremely smart solution! — Jacob Wood, Apr 09 '22 at 13:16

JamesG · Accepted Answer · 2017-07-28T13:42:43.913

I have just received an email from Firebase support with the follwing:

Update From Firebase support:

Your use case is not possible with Firebase Hosting alone. You will need to make use of Cloud Functions as well to do so. Firebase has just recently released a native Firebase Hosting + Functions integration which makes it possible to perform server-side processing so you can redirect URLs to a function where you can write code to dissect the path and generate whatever response you want. You may check our documentations out to know more about it in detail.

https://firebase.google.com/docs/hosting/functions

I have emailed them back to see if this is something that will be added in the future as it seems a little overkill to run to processes for one page.

Update 28/07/2017

Since this is not supported, I have filed a feature request for you. However, I am not able to share any details or timelines for now. We'll keep your feedback in consideration moving forward though.

In the meantime, you may keep an eye out on our release notes.

Have a great day.

https://firebase.google.com/support/releases

score 0 · Answer 3 · answered Jun 28 '20 at 23:07

0

I ran into this same issue as well. Although this isn't possible with rewrites, I found it is possible with redirects:

"redirects": [
  {"source": "/user/friendly/url.html",
   "destination": "/userunfriendly.html?myid=42",
   "type": 301
  },

answered Jun 28 '20 at 23:07

Upgradingdave

12,916
10
62
72

Not working here, how can I get the id from source? – Guilherme Simão Couto Jul 13 '20 at 14:51

Chris Johnston · Answer 4 · 2017-07-18T13:22:41.923

-1

    "hosting": {
      // Add the "rewrites" section within "hosting"
      "rewrites": [ {
        "source": "/item/:item",
        "destination": "/item.html?i=:item"
      } ]
    }

Give that a try.

edited Jul 18 '17 at 13:22

answered Jul 18 '17 at 13:05

Chris Johnston

96
1
9

This returns the 404 page :( – JamesG Jul 19 '17 at 06:30
If that's not working then it looks like it is currently not possible with rewrites. It would if it was a redirect. Is that an option? – Chris Johnston Jul 19 '17 at 10:10
I am trying to not have the URL change in the address bar nor specify whether the redirect type e.g 301 etc... – JamesG Jul 19 '17 at 10:47
Looks like it's not possible. Have you tried looking at rewrite functions in that case? – Chris Johnston Jul 19 '17 at 10:56
I have just had a look now. It looks like it could be possible however I really do not want to be firing off a cloud function every time I want data from the database based on an ID. It seems a little silly using two services for this, agree? – JamesG Jul 19 '17 at 13:58
Yes, i agree it would be overkill. Would be useful if someone from firebase could put some input in. But as it stands it doesn't look possible to pass params to rewrites. – Chris Johnston Jul 19 '17 at 14:01
1

Yeah, I asked @frank-van-puffelen but I cant expect him to be at my beck and call so hopefully he will get time and help if he can :) – JamesG Jul 19 '17 at 14:03

score -2 · Answer 5 · answered Jul 25 '17 at 05:35

-2

FireBase Allows for Static web hosting. It also has some Custom Behaviours

 https://firebase.google.com/docs/hosting/url-redirects-rewrites

Redirects:: this is only for page forwarding 
Rewrites:: when you want to show the same content for multiple URLs [ it is there for URL reversing ].
It also provides control over the MIME types of the HTTP requests.

Now, from the Question above I see you are trying to Query for a DOM object from the page which is what Dynamic web hosts provide.

https://www.quora.com/How-are-dynamic-websites-hosted-1

answered Jul 25 '17 at 05:35

Aloy A Sen

764
5
9

This functionality is available in static websites for example, the next version of smashing mag (https://next.smashingmagazine.com/) has this option. It is also possible to have dynamic content on a static site. – JamesG Jul 25 '17 at 06:06
the site you mentioned is a static one. I did not find any web url which is of the kind " *.html?i=:item " in the site https://next.smashingmagazine.com/ as you have done above – Aloy A Sen Jul 25 '17 at 09:46
please don't downvote a valid answer if you are not sure of it @JamesG – Aloy A Sen Jul 25 '17 at 09:49
Firstly, What the bleeders are you on about? Of course there is no url with *.html?i=:item " - its called a rewrite, they have a structure that warrants this behavior, which is obvious to anyone who calls themselves a developer. Secondly, This is not a valid answer, you simple copied info from the website and directed me to another site that has equally as shite information. You did not help or provide any other information that has not been supplied already. Lastly, I didn't downvote you, however for your attitude I have now, so now you are -2. – JamesG Jul 25 '17 at 12:48

Firebase: Pass url Param in URL Rewrite

5 Answers5

Update 28/07/2017

Linked