Firebase json configuration
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [{
"source": "**",
"destination": "/index.html"
}],
"headers": [
{
"source": "/images/*.#(jpg|jpeg|gif|png)",
"headers": [{
"key": "Cache-Control",
"value": "max-age=3600000"
}]
},
{
"source": "https://cdn.ampproject.org/v0.js",
"headers": [{
"key": "Cache-Control",
"value": "max-age=3000000"
}]
}
]
}
}
I tried to use the cdn link straight from source but it did not work. Does anyone know how I can do the https://cdn.ampproject.org/v0.js
IMAGE of Optimization for pagespeed insights i am trying to do
What you're trying to do I'm 99.9% certain can't be done. AMP controls that file, therefore you can not set custom cache headers on it. Best to just ignore that issue in the Page Speed Insights test (all other page speed metric sites will hit on it to).
AMP requires the JS files to be served from their CDN so you can't pull it down to your server either to gain control of the cache headers.
Related
We are trying to set Cache-control in order to avoid aggressive caching by browsers. Unfortunately, we can't seem to get firebase to actually set this header. Here is our
firebase.json
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "**",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache, no-store, must-revalidate"
}
]
},
{
"source": "**/*.#(jpg|jpeg|gif|png|svg|webp|eot|otf|ttf|ttc|woff|woff2)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=604800"
}
]
}
]
}
}
We thought maybe our blob pattern matching was off so we have tried every combination you can imagine. **/*, **/, /**, etc. We can't figure out why these headers are not being applied. Any help would be very appreciated.
Turns out the above actually works. It's just that chrome was caching the responses (the very thing we were trying to fix). When testing this make sure to use incognito mode.
I'm using Quasar "^1.14.1", and I'm trying to deploy to Firebase. I'm building first with quasar build -m spa, and the deployment is successful. However the resulting page is blank.
This is my firebase.json:
{
"hosting": {
"headers": [{
"source": "/**",
"headers": [{
"key": "Cache-Control",
"value": "no-cache, no-store, must-revalidate"
}]
},
{
"source": "**/*.#(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|woff2|font.css)",
"headers": [{
"key": "Cache-Control",
"value": "max-age=604800"
}]
}
],
"site": "mysitename",
"public": "dist/spa",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [{
"source": "**",
"destination": "/dist/spa/index.html"
}]
}
}
I've also tried changing the destination to "/index.html". No luck. I'm not sure what else to do. There are no errors in build or deployment.
Figured it out. I'm using Firebase and dotenv, and I forgot to include my Firebase credentials in .env.prod.
Does anyone know a good way to put a static Firebase site into maintenance mode while performing some database upgrade?
I've tried to configure the rewrite with custom headers but it's not working. Firebase hosting appears to return both the default status (200) and the custom status (503) in the response.
My firebase.json:
{
"hosting": {
"public": "public",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "**",
"headers": [
{
"key": "status",
"value": "503"
}
]
}
]
}
}
Response headers from chrome:
This is my firebase.json file:
{
"hosting": {
"target": "md-viewer",
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "/",
"destination": "create_md.html"
},
{
"source": "/view/*",
"destination": "show_md.html"
}]
}
}
When running firebase serve, the rewrites work as expected. However, deploying and opening my app ("appname.firebaseapp.com") returns 404. The deployment is succesful since I can customize the 404 page, and access my files by asking for them directly (appname.firebaseapp.com/show_md.html, for example).
What's wrong? Shouldn't firebase serve mirror online behaviour?
If the "destination" key on the rewrite rule is a file, it has to be referenced with an absolute path:
"rewrites": [
{
"source": "/",
"destination": "/create_md.html"
},
{
"source": "/view/**",
"destination": "/show_md.html"
}]
Also, the "/view" rewrite needs two asterisks, according to the documentation.
I was trying to redeploy my react app on firebase after fixing some issues. But redeploying is giving errors. Not sure what the problem is.
I also tried to look into the answers provided in other posts but nothing worked for me.
firebase.json details below:
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [{
"source": "**",
"destination": "/index.html",
"headers": [{
"key": "Cache-Control",
"value": "max-age=0"
}]
}]
}
}
Error: HTTP Error: 400, hosting.rewrites[0] is not exactly one from
[subschema 0],[subschema 1]
This is the first time I have come across this error. So no idea what the problem is.
Headers options look line inside of rewrites parameters. instead, you need to move out as:
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [{
"source": "**",
"destination": "/index.html"
}],
"headers": [{
"key": "Cache-Control",
"value": "max-age=0"
}]
}
Okays so the problem was the headers. Removing it solved the issue. I had kept it there so that the website will reload when the user refreshes the website after it's been updated. It was working fine previously. Dont know what the issue is. Going to keep this open if someone else can solve this issue or tell me what I did wrong. :)
You are missing the source option for the headers, take a look at how I structured mine:
{
"hosting": {
"public": "build",
"headers": [
{
"source": "/service-worker.js",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache"
}
]
}
]
}
}
The documentation for how to structure the headers is here.
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [{
"source": "**",
"destination": "/index.html"
}],
"headers": [{
"key": "Cache-Control",
"value": "max-age=0"
}]
}