How to set caching rules in Firebase hosting?

 

Step 1: Initialize Firebase Hosting

Begin by setting up Firebase Hosting if you haven't done so already. Ensure you have the Firebase CLI installed. You can install the Firebase CLI using npm:

npm install -g firebase-tools

Log in to your Firebase account:

firebase login

Then initialize your Firebase project:

firebase init hosting

Follow the on-screen prompts and make sure to choose the correct Firebase project and configuration settings.

 

Step 2: Open firebase.json

After setting up Firebase Hosting, open the firebase.json configuration file. This file is located in the root directory of your Firebase project and is used to define hosting configurations, including caching rules.

 

Step 3: Define Caching Rules

You will define caching rules under the headers settings of your firebase.json file. The caching rules help control how long the content should be cached on the client-side. Here is an example configuration:

{
  "hosting": {
    "public": "public",
    "headers": [
      {
        "source": "**/*.@(js|css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=31536000"
          }
        ]
      },
      {
        "source": "**/*.html",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      }
    ]
  }
}

In this example, JavaScript and CSS files are cached for one year (with max-age=31536000), while HTML files are not cached (no-cache). Modify the "source" and "value" according to your project's requirements.

 

Step 4: Deploy Your Changes

After updating firebase.json with the appropriate caching rules, deploy the changes to Firebase Hosting:

firebase deploy

This command will deploy your project and apply the new caching configurations.

 

Step 5: Verify Caching Rules

Once deployment is complete, verify that the caching rules are applied correctly. You can do this by checking the response headers in your browser's developer tools. Look for the Cache-Control header to ensure it's set according to your configuration.