title: Firebase hosting: How to prevent caching for the index.html of an SPA
body: <p>I'm hosting an SPA on firebase where almost all paths get rewritten to <code>index.html</code>.  I'm using webpack hash based cache busting, so I want to always prevent caching of my <code>index.html</code> but not any other files.  I'm finding it surprisingly difficult to do so.  Specifically, my file layout looks like this</p>
  
  <pre><code>/
  ├── index.html
  ├── login.html
  ├── js
  │   ├── login.ba22ef2579d744b26c65.bundle.js
  │   └── main.6d0ef60e45ae7a11063c.bundle.js
  └── public
      └── favicon-16x16.ico
  </code></pre>
  
  <p>I started naively with <code>"sources": "index.html"</code> before reading this quote from the docs.</p>
  
  <blockquote>
    <p>Each definition must have a source key that is matched against the original request path regardless of any rewrite rules using <a href="https://firebase.google.com/docs/hosting/full-config#section-glob" rel="noreferrer">glob notation</a>. </p>
  </blockquote>
  
  <p>Ok, so instead of a simple glob that specifies the files I want these headers on, I guess I need one on paths.  Since most paths redirect to index.html, I need a glob that excludes all the paths I do  not want to put these headers on.</p>
  
  <p>For reference, my <code>firebase.json</code> hosting section looks like this:</p>
  
  <pre><code>{
    "hosting": {
      "public": "dist",
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ],
      "cleanUrls": true,
      "trailingSlash": false,
      "headers": [
        {
          "source": &lt;&lt;&lt;WHAT-GOES-HERE?&gt;&gt;&gt;,
          "headers": [
            {
              "key": "Cache-Control",
              "value": "no-cache, no-store, must-revalidate"
            },
            {
              "key": "Pragma",
              "value": "no-cache"
            },
            {
              "key": "Expires",
              "value": "0"
            }
          ]
        }
      ]
    }
  }
  </code></pre>
  
  <p>So, to give some examples that redirect to index.html and should not be cached</p>
  
  <pre><code>mysite.com  
  mysite.com/  
  mysite.com/foo/bar/baz  
  mysite.com/index.html 
  </code></pre>
  
  <p><em>Note: I could live if that last one got cached since it doesn't get used in practice.</em></p>
  
  <p>And the things that do not redirect to index.html and should not be cached</p>
  
  <pre><code>**/*.* (ideally excluding index.html)
  mysite.com/login  
  </code></pre>
  
  <p>The closest I've gotten on my own is <code>**/!(login|*.*)</code> which works for almost everything listed above, but inexplicably does not work on <code>mysite.com</code> or <code>mysite.com/</code>.  Those 2 pages are not getting matched by this glob and I cannot figure out why.</p>