How to remove .html URL endings and configure redirects in Firebase?

Question

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 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 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 to or , 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?

user_13430381 · Answer

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

How to remove .html URL endings and configure redirects in Firebase?

1 Answers