Firebase hosting with react router

Question

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.

Charles Harring · Accepted Answer · 2019-07-06 09:47:10Z

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

edited Jul 6, 2019 at 9:47

answered May 16, 2019 at 18:59

Charles Harring

1,0359 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zsolt Dobak · Accepted Answer · 2021-01-14 16:35:10Z

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

answered Jan 14, 2021 at 16:35

Zsolt Dobak

912 silver badges5 bronze badges

1 Comment

Siva Over a year ago

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

RossP · Accepted Answer · 2019-09-11 18:23:12Z

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.

answered Sep 11, 2019 at 18:23

RossP

4748 silver badges10 bronze badges

Comments

airblade · Accepted Answer · 2021-05-04 22:02:43Z

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.

answered May 4, 2021 at 22:02

airblade

665 bronze badges

Comments

Tejas R · Accepted Answer · 2022-02-17 07:15:53Z

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

answered Feb 17, 2022 at 7:15

Tejas R

114 bronze badges

Comments

Abshir · Accepted Answer · 2022-06-07 21:31:38Z

0

Try setting the cleanUrls property to true.

See Firebase docs for more info

"hosting": {
  // ...

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

answered Jun 7, 2022 at 21:31

Abshir

114 bronze badges

Comments

Michael Mammoliti · Accepted Answer · 2023-06-08 00:31:24Z

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.

Minav Karia · Accepted Answer · 2023-12-29 06:40:27Z

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

answered Dec 29, 2023 at 6:40

Minav Karia

1

3 Comments

zoran404 Over a year ago

How is this different from the existing answers?

Minav Karia Over a year ago

Previous answers weren’t working for me, I then checked firebase docs then added it here with dynamic links and other stuff

zoran404 Over a year ago

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.

Lukasz 'Severiaan' Grela · Accepted Answer · 2018-03-16 20:57:41Z

-1

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

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

answered Mar 16, 2018 at 20:57

Lukasz 'Severiaan' Grela

6,2787 gold badges46 silver badges84 bronze badges

Collectives™ on Stack Overflow

Firebase hosting with react router

9 Answers 9

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related