Firebase hosting with react router

23
votes

I have a react app that uses react-router with a Router that looks like:

<Router>
  <div>
    <Route exact path="/" component={Homepage} />
    <Route path="/map/:uid" component={Userpage} />
    <Footer />
  </div>
</Router>

The app is hosted using Firebase hosting.

If I open my website and click around such that the router takes me to /map/uid, it loads fine. But if I close the browser and then try to explicitly navigate to <domain>/map/<known uid>, I get a "no page found" page from Firebase. This is my first time using react-router.

enter image description here

Update #1

I have updated my firebase.json to:

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

I no longer receive the "Page not found" page; however, the content of my react app never loads, and I notice in my console an error:

Uncaught SyntaxError: Unexpected token <

Update #2

I now understand why I am getting the error. Looking at the Sources tab in Chrome dev tools, my static/ folder has a strange name (static/css rather than static) only when I directly navigate to /map/{known uid}. When I navigate to the home page, all loads fine.

This explains the error. I am still not sure how to fix.

5
reactjsfirebasereact-routerfirebase-hosting

5 Answers

36
votes

For me I could see the root url but other routes like "/pricing" were giving me a 404. I added this to my firebase.json file and now it works. Also make sure firebase/auth is allowed to work on the domain. There is a setting in the auth section of firebase.

"rewrites": [ {
  "source": "**",
  "destination": "/index.html"
 }],

My full firebase.json

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "build",
    "rewrites": [ {
      "source": "**",
      "destination": "/index.html"
    }],  
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  },
  "storage": {
    "rules": "storage.rules"
  }
}
5
votes

Late answer, but I'm facing with the same issue. I solved this with 2 steps:

  1. update firebase.json like this

{
  "hosting": {
    "site": "myproject",
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
  1. set the base url in index.html like this

<!DOCTYPE html>
<html lang="en">
  <head>
    <base href="/">
.
.
.
2
votes

Late to the party, but try removing the "homepage" key from your package.json (or making sure that it is correct relative to where the homepage is stored.

1
votes

Late answer, but it solved the problem for me: When doing firebase init it will ask whether it will be Single Page App or no. Default answer is No, however, just choose Yes and it will work.

-1
votes

What about specyfying the basename in Router? Something along this:

<Router basename='/map/5AJA3RefFuTZ8z4Gn6BjMgZRgPZ2'>