How to add Leverage browser caching to firebase.json - json

Question

I'm using Firebase on Google Cloud Platform for the first time and I've uploaded my static website but now I'd like to add:
"headers": [ {
"source" : "**/*.#(eot|otf|ttf|ttc|woff|font.css)",
"headers" : [ {
"key" : "Access-Control-Allow-Origin",
"value" : "*"
} ]
}, {
"source" : "**/*.#(jpg|jpeg|gif|png)",
"headers" : [ {
"key" : "Cache-Control",
"value" : "max-age=7200"
} ]
}, {
// Sets the cache header for 404 pages to cache for 5 minutes
"source" : "404.html",
"headers" : [ {
"key" : "Cache-Control",
"value" : "max-age=300"
} ]
} ]
to enable Leverage browser caching, but I do not understand how to add these lines of code to the firebase.json file?
The firebase init command creates a firebase.json settings file in the root of your project's directory, but how can I change it after I've created the site?
Thanks a lot

Answer 1

If you want to change the caching settings on your web site, change the relevant Change-Control header in your firebase.json and then rerun firebase deploy. This will deploy the latest firebase.json with your new settings, and ensure that all HTML/CSS/JS/etc files are up to date too.
If you lost your firebase.json, a simple default could look something like this from the Firebase Hosting reference documentation:
{
"hosting": {
"public": "app",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}