Firebase Caching Configuration for Development (and Production)

It was difficult to find a working firebase.json file that offers caching settings suitable for rapid development and deployments. The file included in this post works well with react-boilerplate and can be adopted easily.

To make it your own, open your site in development tools and observe the names of your Javascript assets, then adapt the lines below. I gave each cache type a different value so their proper assignment can be validated in developer tools.

Firebase Caching Configuration

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]
      },
      {
        "source":
          "**/*.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=1"
          }
        ]
      },
      {
        "source":
          "**/@(main|runtime).*.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=5"
          }
        ]
      },
      {
        "source":
          "**/npm*.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=604799"
          }
        ]
      },
      {
        "source":
          "**/*.@(jpg|jpeg|gif|png|svg|webp|css|eot|otf|ttf|ttc|woff|woff2|font.css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=604800"
          }
        ]
      }
    ],
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }
}

For production you probably want to change these values for longer caching. {: .info }