34

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.

Improve this question

9 Answers 9

Reset to default
48

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"
  }
}
Improve this answer
7

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="/">
.
.
.

Improve this answer
1
  • For me the ** is replaced with /. Hence my "rewrites" section looks like (api is the route for my nodejs API): "rewrites": [ { "source": "/", "destination": "/index.html" }, { "source": "/api", "function": "api" } ]
    – Siva
    Commented Jul 20, 2021 at 12:35
2

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.

Improve this answer
2

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.

Improve this answer
1

You're getting this error because of client-side routing. (Deep inside React)

  1. When building the react app in the build(folder) you see only one index.html file.
  2. when you hit URL with YOUR_DOMAIN/map Now firebase is trying fetch build->map->index.html but is present in your build folder.

So you can do

  1. Are you can use react-router-dom. After building application build folder , index.html you can mention <base href="/"/>.
Improve this answer
0

Try setting the cleanUrls property to true.

See Firebase docs for more info

"hosting": {
  // ...

  // Drops `.html` from uploaded URLs
  "cleanUrls": true
}
Improve this answer
0

In my case the issue was different. I was able to see the index page correctly but when I was navigating to a new route I was seeing a blank page.

Firebase was configured correctly with:

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

After the deploy I went in the request Tab and seen this.

enter image description here

I then checked the index.html file and noticed this:

enter image description here

Since my configuration builds everything in the same dist directory,

dist/index.html
dist/main.bundle.js
...

the issue was straight forward. I had to tell webpack were my assets were placed relatively to the index.html file by adjusting the webpack configuration like so:

{
  ...
  output: {
    ...
    publicPath: '/',
    ...
  }
  ...
}

now the files get required like so:

enter image description here

This will tell the browser to look into the root, where the index.html is placed.

Make sure you change the production configuration if you have multiple configurations and you are not extending them.

Improve this answer
0 
{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "cleanUrls": true
  },
  "rewrites": [
      {
        "source": "/(.*)", 
        "destination": "/index.html",
        "dynamicLinks": true
      }
    ]
}

Try this out for your firebase.json, routes should definitely work

Improve this answer
3
  • How is this different from the existing answers?
    – zoran404
    Commented Jan 2 at 2:09
  • Previous answers weren’t working for me, I then checked firebase docs then added it here with dynamic links and other stuff
    – Minav Karia
    Commented Jan 6 at 18:50
  • Would be nice if your answer also included an explanation of what was missing from other answers and what effect those properties have. If you are referencing docs, you can link to relevant parts.
    – zoran404
    Commented Jan 7 at 5:14
-1

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

<Router basename='/map/5AJA3RefFuTZ8z4Gn6BjMgZRgPZ2'>
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.