5

Edit: Fixed an mistake in which I referred to about.html as /about/ in my HTML, but am still experiencing the same issues.

I understand that this is a duplicate of a question that has been asked many times before, but the solutions of others are not working for me. What I'm trying to do is reroute, for example, index.html to /index/ and about.html to /about/.

I tried to use @louisvno's answer here, @michael-bleigh's answer here, and @HarsH's answer here, all of which were to add the following to the .json file:

"hosting": {
    "cleanUrls": true
  }

(This is also the answer on Firebase's "Control .html extensions" section of their guide to configuring hosting behavior.)

However, this had no effect. In my HTML file, I tried setting the <a> tags to href="index.html, href="/index/, and href="/index", but none of these options worked and I'm not really sure if changing it from the original <a href="index.html"> was even necessary. (Is it?)

The other solution I tried was to utilize the "redirects" property, as suggested by @ken-mueller here. I removed the "clearUrls" bit and put the following in my .json file:

  "hosting": {
    "redirects": [ {
      "source": "index.html",
      "destination": "/index",
      "type": 301
    }, {
      "source": "index.html{,/**}",
      "destination": "/index",
      "type": 3011
    }, {
      "source": "about.html",
      "destination": "/calculator",
      "type": 301
    }, {
      "source": "about.html{,/**}",
      "destination": "/solutions",
      "type": 301
    } ]
  }

(This is also the answer on Firebase's Configure redirects section of their guide to configuring hosting behavior)

This, too, had no effect. And, even when changing my HTML from <a href="about.html"> to <a href="/about/"> or <a href="/about">, it just broke the about.html page and displayed the index.html page instead.

What am I doing wrong? How can I remove the .html from the end of the URL and make sure that any time it is input in the URL, it redirects to the URL without the ending (i.e. /index/ instead of /index.html?

ttoshiro
  • 466
  • 5
  • 21
  • 1
    Setting `"cleanUrls": true` in the firebase.json file allows you to leave the `.html` off the files, so `/index.html` becomes `/index` (no trailing `/`). If that's not working for you, can you point us to a URL where you configured this? – Frank van Puffelen Jun 15 '20 at 03:48
  • Thanks for the response! I'm hosting this on carbonfootprint.dev. Still not working for some reason. – ttoshiro Jun 15 '20 at 10:41
  • 1
    The clean URLs work for me, e.g.: https://carbonfootprint.dev/calculator. But from reading the documentation it seems hosting should also auto-rewrite `https://carbonfootprint.dev/calculator.html` to `https://carbonfootprint.dev/calculator`, which does not seem to happen. You might want to [reach out to Firebase support](https://firebase.google.com/support/contact/troubleshooting/) for personalized help in troubleshooting. – Frank van Puffelen Jun 15 '20 at 15:21
  • The clean URL actually linked to the wrong page, `/calculator` should link to `calculator.html` but for some reason it displays the index. Does this mean anything? – ttoshiro Jun 16 '20 at 08:26
  • 1
    Hmmm... that sounds like you have a [rewrite](https://firebase.google.com/docs/hosting/full-config#rewrites) that overrides the clean URL redirects. I'm actually not sure how the combination of those flags is supposed to work. – Frank van Puffelen Jun 16 '20 at 14:00

1 Answers1

11

Ended up figuring out the issue thanks to Mau from Firebase Support. "cleanUrls" works fine, I just needed an opening and closing bracket (duh). For the code in my post, I also noticed one of the redirects had "type": set to 3011 instead of 301. Either way, the final code is:

{
  "hosting": {
    "cleanUrls": true,
    "trailingSlash": true
  }
}
ttoshiro
  • 466
  • 5
  • 21