CODEWITHSUNDEEP
reactjsfirebaseurl-rewritingreact-reduxfirebase-hosting
VIN
VIN

Reputation: 6957

Firebase URL rewriting to both functions and destinations

I am building a React/Redux app and trying to rewrite to one Firebase function, with all other URLs rewriting to index.html.

Right now, I am only able to get a URL to rewrite to the function when I perform the "empty cache and hard reload" on my Chrome browser.

This is my firebase.json file.

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "build",
    "rewrites": [
       {
         "source": "/Photos/**", "function": "getPhoto"
       },
       {
         "source": "**", "destination": "/index.html"
       }
     ]
  }
}

For example, when I go to https://nameofmyapp.firebaseapp.com/Photos/2017/October/2/12345, I am routed to the root directory (index.html), when I expect to be directed to the getPhoto function.

The only time I am able to get to the "/Photos/**" rewrite URL is if I first enter the https://nameofmyapp.firebaseapp.com/Photos/2017/October/2/12345 URL in the browser, then perform a "Empty Cache and Hard Reload" in Chrome. This is the only time that the function is executed for me. (Not sure if this is related to the service-worker behavior?) Even so, on normal refresh at that URL, I end up back in index.html again.

Can anyone let me know what I am missing?

Upvotes: 2

Views: 914

Answers (1)

Gerard Walace
Gerard Walace

Reputation: 921

I've just posted an answer for a very similar problem

You need to change your "single app rewrite" :

{
  "hosting": {
    "public": "build",
    "rewrites": [
       {
         "source": "/Photos/**", "function": "getPhoto"
       },
       {
         "source": "!/Photos/**", "destination": "/index.html"
       }
     ]
  }
}

Instead of redirecting everything on index.html (as do " ** "), this rule redirect everything that is not in the Photos folder and subfolders.

Upvotes: 1

Related Questions