title: How to remove .html URL endings and configure redirects in Firebase?
body: <p>Edit: Fixed an mistake in which I referred to <code>about.html</code> as <code>/about/</code> in my HTML, but am still experiencing the same issues.</p>
  
  <hr>
  
  <p>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, <code>index.html</code> to <code>/index/</code> and <code>about.html</code> to <code>/about/</code>.</p>
  
  <p>I tried to use @louisvno's answer <a href="https://stackoverflow.com/questions/44173400/firebase-hosting-url-needs-html-to-display-a-page">here</a>, @michael-bleigh's answer <a href="https://stackoverflow.com/questions/60681599/remove-file-extensions-for-html-files-in-firebase">here</a>, and @HarsH's answer <a href="https://stackoverflow.com/questions/5730092/how-to-remove-html-from-url">here</a>, all of which were to add the following to the .json file:</p>
  
  <pre><code>"hosting": {
      "cleanUrls": true
    }
  </code></pre>
  
  <p>(<em>This is also the answer on Firebase's "<a href="https://firebase.google.com/docs/hosting/full-config#control_html_extensions" rel="nofollow noreferrer">Control .html extensions</a>" section of their guide to configuring hosting behavior.</em>)</p>
  
  <p>However, this had no effect. In my HTML file, I tried setting the <code>&lt;a&gt;</code> tags to <code>href="index.html</code>, <code>href="/index/</code>, and <code>href="/index"</code>, but none of these options worked and I'm not really sure if changing it from the original <code>&lt;a href="index.html"&gt;</code> was even necessary. (Is it?)</p>
  
  <p>The other solution I tried was to utilize the <code>"redirects"</code> property, as suggested by @ken-mueller <a href="https://stackoverflow.com/questions/57332661/is-there-a-way-to-remove-the-html-extensions-in-hosting-firebase">here</a>. I removed the "clearUrls" bit and put the following in my .json file:</p>
  
  <pre><code>  "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
      } ]
    }
  </code></pre>
  
  <p>(<em>This is also the answer on Firebase's <a href="https://firebase.google.com/docs/hosting/full-config#redirects" rel="nofollow noreferrer">Configure redirects section</a> of their guide to configuring hosting behavior</em>)</p>
  
  <p>This, too, had no effect. And, even when changing my HTML from <code>&lt;a href="about.html"&gt;</code> to <code>&lt;a href="/about/"&gt;</code> or <code>&lt;a href="/about"&gt;</code>, it just broke the <code>about.html</code> page and displayed the <code>index.html</code> page instead.</p>
  
  <p>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. <code>/index/</code> instead of <code>/index.html</code>?</p>