I have set up a firebase hosting project with three pages and my custom domain setup . These pages get hit based on different paths in the url. The firebase.json file is as follows
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [ {
"source": "/main",
"destination": "/index.html"
},{
"source": "/waitlistview/**",
"destination": "/waitlistview.html"
},{
"source": "/mwaitlistview/**",
"destination": "/waitlistview-minimal.html"
}
],
"cleanUrls": true
}
}
Now when i try a url :
foodini.co.in/waitlistview
Instead of getting an error with 404 page, i still hit my page
Whereas if i hit the url:
foodini.co.in/mwaitlistview
I get the 404 page as i expect.
How to i make the first url to also go to 404 page
According to firebase hosting docs, Hosting first tries to map a file inside the public directory to the path in the url. Only if there is no such file will a rewrite take effect.
In my case, I had a file /waitlistview.html directly inside the public folder. Thus firebase hosting just mapped the url to that file even without a trailing slash. The rewrite never occurred and thus there was no 404 page
Also for anyone interested:
your default domain name directly maps to index.html without the need for any specific path
Also /waitlistview** does not match /waitlistview/Ahmedabad/xyz path via GLOB matching so please have a slash before **
add
"trailingSlash": false,
before the line
"cleanUrls": true
Reason is that "foodini.co.in/waitlistview" does not match "/waitlistview/", it would match "/waitlistview".
Related
I have a proyect in firebase, with two custom domains, as show de image firebase console.
With the fist one, colademonofrozen.cl/ I get index.html file OK, but with the second, www.colademonofrozen.cl/ I get 404 not found.
Some strange thing about this case is that www.colademonofrozen.cl/anything display index.html file OK.
This is the hosting configuration:
`
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "/api/**",
"function": "app",
"region": "us-central1"
},
{
"source": "/admin",
"destination": "/admin.html"
},
{
"source": "**",
"destination": "/index.html"
}
]
},
`
I worked a lot for this project, I really appreciate any ideas.
I also appreciate anyone confirming that the domain shows an error page, so the problem cannot be ignored if it starts working.
I confirmed that it is not a cache problem.
The subdomain is configured more than two weeks ago, is not time propagation problem.
I requested a redirect at my dns provider, from the subdomain www.colademonofrozen.cl/ to colademonofrozen.cl/, but is not posible if the domain points to Firebase.
To my bad luck, the back label of the product for which I created the project are already printed.
see back label!
I change following DNS record:
name
type
value
www.colademonofrozen.cl.
CNAME
colademonofrozen.cl
for:
name
type
value
www.colademonofrozen.cl.
A
199.36.158.100
Now works OK.
I'm trying to trigger the following function "dynamicMetaTagsUpdate" I have my Firebase rewrite setup like so
"rewrites": [
{
"source": "chart/**",
"function": "dynamicMetaTagsUpdate"
},
{
"source": "**",
"destination": "/index.html"
}
]
My apps URL are, the first view https://viz.wiijii.co/#/create-chart
and where I want the function to run https://viz.wiijii.co/#/chart/?id=-MfJuHEtO2EQ3mpo682O
This is the generated chart but it's not working am I missing something
This is because you are using URL fragments in the URL (#). Everything after the # in the URL is never sent to the server and cannot be used as the basis of Firebase Hosting rewrites. Instead, the URL should be e.g. https://viz.wiijii.co/chart/?id=-MfJuHEtO2EQ3mpo682O
I want to redirect from thisdomain.com/webpage to thatdomain.com/webpage
I've tried using these globs for the source match:
/*
/**
*
**
This is my current firebase.json:
{
"hosting": {
"public":".",
// Add the "rewrites" section within "hosting"
"rewrites": [ {
"source": "/**",
"destination": "https://thisdomain.com/**"
} ]
}
}
I want someone who goes to thatdomain.com/webpage to be redirected to thisdomain.com/webpage.
Rewrites are used within a site, they do not rewrite across multiple sites.
If you mapped both domains to the Firebase Hosting project as custom domains, then no additional setup should be required. You do need to map each domain/target to the public directory though. See https://firebase.google.com/docs/hosting/multisites#define_hosting_config
Setting up a firebase hosting project, I'd like to redirect all requests except for one to another domain and retain the url segment in the redirect. For example example.com/page should redirect to www.example.com/page, while anything starting with example.com/ignore should not redirect.
In firebase.json, I wrote this rule to redirect any request not in the ignore path:
"redirects": [
{
"source": "/!(ignore)",
"destination": "https://www.example.com/",
"type": 302
}
]
This redirect works, however I want to capture any url segments in the redirect. I'm trying to followed the example from their docs where :post* is the url segment I want to retain, but I do not know how to write it in the redirect rules.
"hosting": {
// ...
"redirects": [ {
"source": "/blog/:post*", // captures the entire URL segment beginning at "post"
"destination": "https://blog.myapp.com/:post", // includes the entire URL segment identified and captured by the "source" value
"type": 301
}
I have also tried the following which works to capture the url segment in redirect, but also redirects my ignored path as well.
"redirects": [
{
"source": "/:path*",
"destination": "https://www.example.com/:path",
"type": 302
}
]
I've also tried the above snippet with the ignore folder added to the ignore rules and this did not work either.
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**",
"**/ignore/**"
],
...
}
I'd like to be able write a glob pattern to capture any path that doesn't match the ignore path and use that in the redirect, something like:
"source": "/!(ignore)**path**,
"destination: "https://www.example.com/**path**",
"type": 302
I'm seeing unexpected behaviour (at least as per me) with trailing slashes on Firebase Hosting. I expect Firebase to serve URLs with a trailing slash (except for actual files present in the hosting directory). For this I set trailingSlash to true in firebase.json.
This resulted in:
example.com redirect to example.com/index.html/
example.com/js/script.js redirect to example.com/js/script.js/
example.com/images/image.png redirect to example.com/images/image.png/
The expected behaviour would be:
example.com redirect to example.com/
example.com/js/script.js served as it is without any redirect
example.com/images/image.png served as it is without any redirect
The addition of trailing slash to actual file URLs makes the browser/server think script.js is a directory instead of file and results in a 404. The addition of index.html to the root simply isn't elegant.
Expecting cleanUrls to do the trick I set cleanUrls to true along with trailingSlash and immediately the site goes into an endless redirect loop and fails to load. How can I stop Firebase from adding "index.html" at the root and the trailing slash for the actual js or image assets?
Edit:
As requested by Frank here's the firebase.json I'm using:
{
"firebase" : "example",
"public" : "public",
"cleanUrls" : false,
"trailingSlash" : true,
"ignore" : [ "firebase.json", "**/.*", "**/node_modules/**" ],
"rewrites": [{
"source" : "**",
"destination" : "/index.html"
}],
"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=600"
}]
}, {
"source" : "**/*.#(html|js)",
"headers" : [{
"key" : "Cache-Control",
"value" : "max-age=300"
}]
}]
}
P.S.: I have tried setting both trailingSlash and cleanUrls to true and also tried setting these true/false individually.
https://firebase.google.com/docs/hosting/full-config#trailingslash
When true, it will redirect URLs to add a trailing slash. When false
it will redirect URLs to remove a trailing slash. When unspecified,
trailing slashes are used only for directory index files (e.g.
about/index.html).
Just do not add that option and it will only affect urls
As for your question, If you want to invoke the command "rewrites", Server can execute "rewirtes" command when he cannot find any index.html in your root directory.
The solution one:
you just put index.html in your root directory under your "public" folder. I switch to your public folder and deploy your server.
The solution two:
you put index.html under some folder which you can named whatever. Then use JSON format: "rewrites": [{ "source" : "**", "destination" : "/folderName/index.html" }], but you cannot put any index.html under your root folder.
The solution three:
you create root folder, put your JS/CSS/IMG/ folders and index.html under the root folder. Then you deploy server JSON file like this.
{
"firebase": "you app name",
"public": ".",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
I'm sure this is too late for Vinny, but I just ran into this same issue. Adding <base href='/'>to my html files prevented the extra unexpected trailing slash behavior for me.
"hosting": {
"public": "...",
"ignore": [...],
"trailingSlash": false
}
Simply add trailingSlash property and set it to false will remove the trailing slash when firebase redirects. Check out their details documentation here