Firebase hosting with react router

P

9

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.

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.

Pernell answered 16/3, 2018 at 20:3 Comment(0)

P

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

Playback answered 16/5, 2019 at 18:59 Comment(0)

D

7

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

update firebase.json like this

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

set the base url in index.html like this

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

Donal answered 14/1, 2021 at 16:35 Comment(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" } ] – Annelieseannelise 20/7, 2021 at 12:35

S

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.

Spiffy answered 11/9, 2019 at 18:23 Comment(0)

C

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.

Coatbridge answered 4/5, 2021 at 22:2 Comment(0)

N

1

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

When building the react app in the build(folder) you see only one index.html file.
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

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

Numbersnumbfish answered 17/2, 2022 at 7:15 Comment(0)

P

0

Try setting the cleanUrls property to true.

See Firebase docs for more info

"hosting": {
  // ...

  // Drops `.html` from uploaded URLs
  "cleanUrls": true
}

Priapism answered 7/6, 2022 at 21:31 Comment(0)

K

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.

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

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:

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.

Katheykathi answered 8/6, 2023 at 0:26 Comment(0)

F

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

Forespeak answered 29/12, 2023 at 6:40 Comment(3)

How is this different from the existing answers? – Cassycast 2/1, 2024 at 2:9

Previous answers weren’t working for me, I then checked firebase docs then added it here with dynamic links and other stuff – Forespeak 6/1, 2024 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. – Cassycast 7/1, 2024 at 5:14

F

-1

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

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

Fertilizer answered 16/3, 2018 at 20:57 Comment(0)

Recommended topics

Hot tags