I'm trying to deploy the same app to multiple Firebase-projects but when i try to deploy it fails:
Deploy target 1 not configured for project project-1. Configure with:
firebase target: apply hosting 1 <resources...>
Deployment failed.
I have this configuration in my .firebaserc:
{
"targets": [
{
"project-1": {
"hosting": {
"1": [
"project-1"
]
}
}
},
{
"project-2": {
"hosting": {
"2": [
"project-2"
]
}
}
}
],
"projects": {
"1": "project-1",
"2": "project-2"
}
}
And my firebase.json:
{
"hosting": [
{
"target": "1",
"public": "dist/angular",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
{
"target": "2",
"public": "dist/angular",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
]
}
Related
I am using firebase to deploy a react application.
I have 3 environments, dev/stg/prod.
I would like to set the header to "NO CACHE" in dev and stg but allow cache in production.
so basically :
for prod
{
"hosting": [
{
"target": "core",
"public": "dist/apps/core",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"headers": [
{
"source": "**/*.#(jpg|svg|jpeg|gif|png|js|css)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=5256000"
}
]
},
{
"source": "**/*.#(eot|otf|ttf|ttc|woff|font.css)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=5256000"
}
]
}
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
]
}
and this on stg dev
"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"
}
]
}
]
I couldn't find a way to specify what firebase.json config use when executing a firebase:deploy Is there some way to set something similar up ?
I'd like any traffic that comes to:
mysite.com/suppliers/add-supplier
To be directed to add-supplier.html when the path is identified in my firebase.json config file. I've tried this:
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"redirects": [
{
"source": "/suppliers/add-supplier",
"destination": "/add-supplier.html"
}
],
"cleanUrls": true
},
"storage": {
"rules": "storage.rules"
}
}
Even though this identifies and redirects correctly, it gets rid of the suppliers/add-supplier path and makes it mysite.com/add-supplier
Is there a way to retain the original URL while also redirecting to the correct HTML page?
You have two options:
Use a rewrite instead of a redirect:
"rewrites": [
{
"source": "/suppliers/add-supplier",
"destination": "/add-supplier.html"
},
{
"source": "**",
"destination": "/index.html"
}
]
Remove the redirect entirely, and place your file at suppliers/add-supplier.html instead of in the root
I combined #samthecodingman's answer with some changes and got it working:
Moved page to new directory
I moved the add-supplier.html file to a new folder called suppliers inside the public directory so that it's suppliers/add-supplier.html
firebase.json:
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
},
{
"source": "/suppliers/add-supplier",
"destination": "suppliers/add-supplier.html"
}
],
"cleanUrls": true
},
"storage": {
"rules": "storage.rules"
}
}
This will correctly load the page but the CSS, media and JS files will not be identified. To fix this, change all your resource files to have ../ in the front:
before changing: <link href="dist/css/style.css" rel="stylesheet" type="text/css">
after changing: <link href="../dist/css/style.css" rel="stylesheet" type="text/css">
I'm have been working on a CSP for my Firebase hosted website, a large number of request are block by the CSP because GTM (Google Tag Manager) is in inline script.
I'm using Firebase Analytics, which is the reason for GTM being injected into the page.
I have read that I can use a nonce [1], which in most cases is an non issue to implement.
How would this be implemented using Firebase hosting? - From my research Firebase hosting headers can't be modified after deployment.
1: https://developers.google.com/tag-manager/web/csp
Yes you can, you should have a firebase.json file in root of project folder, you can change your headers in it, check my file:
{
"hosting": {
"public": "dist/browser",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "**/*.#(jpg|jpeg|gif|png|webp|eot|otf|ttf|ttc|woff)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=7200"
}
]
},
{
"source": "**/*.#(html|js|css)",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache, no-store, must-revalidate"
}
]
},
{
"source": "**",
"headers": [
{
"key": "X-Frame-Options",
"value": "SAMEORIGIN"
}
]
},
{
"source": "**",
"headers": [
{
"key": "X-Content-Type-Options",
"value": "nosniff"
}
]
},
{
"source": "**",
"headers": [
{
"key": "Referrer-Policy",
"value": "strict-origin"
}
]
},
{
"source": "**",
"headers": [
{
"key": "Permissions-Policy",
"value": "geolocation=(), microphone=(), gyroscope=()"
}
]
}
]
}
}
Unfortunately i was obligated to remove my csp from it...
In my website i.e in my server i have googlee.technology/Verify/191711443.pdf is there, I want to know if user enters googlee.technology/Verify/191711443 without pdf extension, I want to display same results in my web page . How to do that.
This is my Firebase.json file code:
{
"hosting": {
"site": "chinnapareddy",
"public": "y",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
},
`"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint"
],
"source": "functions"`
}
}
To rewrite /Verify/191711443 to /Verify/191711443.pdf, you'd use this in your firebase.json:
"hosting": {
// ...
// Add the "rewrites" attribute within "hosting"
"rewrites": [ {
"source": "/Verify/191711443",
"destination": "/Verify/191711443.pdf"
}]
}
Update: this is what the JSON from your last comment should look like:
{
"hosting": {
"site": "chinnapareddy",
"public": "y",
"ignore": ["firebase.json", "/.*", "**/node_modules/"]
"rewrites": [{
"source": "/Verify/191711443",
"destination": "/Verify/191711443.pdf"
}]
},
"functions": {
"predeploy": ["npm --prefix \"$RESOURCE_DIR\" run lint"],
"source": "functions"
}
}
My firebase.json file looks like this:
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"headers": [{
"source": "**",
"headers": [{
"key": "Cache-Control",
"value": "max-age=960000"
}]
}],
"rewrites": [ {
"source": "**",
"destination": "/index.html"
}],
"source" : "404.html",
"headers" : [ {
"key" : "Cache-Control",
"value" : "max-age=960000"
}],
"headers": [ {
"source" : "**/*.#(eot|otf|ttf|ttc|woff|font.css)",
"headers" : [ {
"key" : "Access-Control-Allow-Origin",
"value" : "*"
} ]
}],
"cleanUrls": true,
"trailingSlash": false
}
}
Now checking the assets in the browser I cannot see any impact on the expiration headers sent through at all.
What's the matter please?
Your configuration is malformed -- you have multiple top-level headers in your hosting configuration. It should instead look more like:
{
"hosting": {
"public": "public",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"headers": [
{
"source": "**",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=960000"
}
]
},
{
"source": "404.html",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=960000"
}
]
},
{
"source": "**/*.#(eot|otf|ttf|ttc|woff|font.css)",
"headers": [
{
"key": "Access-Control-Allow-Origin",
"value": "*"
}
]
}
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"cleanUrls": true,
"trailingSlash": false
}
}