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.

Answer 1

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.

Answer 2

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

Answer 3

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
  },

Answer 4

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

Give that a try.

Answer 5

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