Is there any way to override the default behavior of an index.html file in the public folder on Firebase Hosting? Basically, I am trying to take over the BLANK/NULL/EMPTY Glob pattern match so that I can present one page for the ROOT domain, and another for EVERYTHING else. I've tried "/", "*/", and other varieties but nothing works. Also, regardless what paths I specify, the homepage always loads index.html, even if it isn't specified in my firebase.json file...
{
"hosting": {
"public": "build",
"rewrites": [
{
"source": "/",
"destination": "/homepage.html"
},
{
"source": "*/",
"destination": "/homepage.html"
},
{
"source": "**",
"destination": "/app.html"
}
]
}
}
If you don't want Firebase Hosting to load your index.html, and instead load something else, then simply remove the file from the folder and redeploy.
Related
I have a couple of firebase hosted sites pointing to the same directory.
For this particular instance I would like a specific site to use a different default index than the public folder's index.html file.
I've set the sub-site firebase hosting deployment to something similar to this:
{
"target": "subsite",
"public": "hosting/public_mysite",
"headers": [
{
"source": "/",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache, no-store, must-revalidate"
}
]
}
],
"ignore": [
"firebase.json",
"**/node_modules/**"
],
"rewrites": [
{
"source": "/about",
"destination": "/subsite/about.html"
},
{
"source": "/reviews",
"destination": "/subsite/reviews.html"
},
{
"source": "**",
"destination": "/subsite/home.html"
}
]
}
On the sub-site, the urls /about and /reviews do indeed load the requested alternative pages listed in rewrites section.
The last rule "source": "**" seems to be completely ignored and firebase loads the /index.html anyway.
Why is it not loading /subsite/home.html instead?
The file is definitely there with the other ones.
See Priority order of Hosting responses.
Reserved namespaces that begin with a /__/* path segment
Configured redirects
Exact-match static content
Configured rewrites
Custom 404 page
Default 404 page
Visiting / will prioritize the root index.html before matching against any rewrites. If you want to render a different resource you'll have to deploy without the root index.html.
Let's say I have a domain example.com. And I created a second website through hosting and cli as sub.example.com.
{
"hosting": [
{
"target": "app",
"public": "public",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
{
"target": "promos",
"public": "public",
"appAssociation": "AUTO",
"rewrites": [
{
"source": "**",
"dynamicLinks": true
}
]
}
]
}
Now when I go to create Dynamic Link for sub.example.com without any path prefix, it gives me a red flag saying:
It looks like you already have content served on this path. Specify a different path prefix to avoid conflicts with existing content.
What am I doing wrong?
Also, if this subdomain is only for links, I still have to put public field? I don't want to show anything on it, just links...
I fixed it by adding (or rather ignoring) the public folder for the dynamic links subdomain.
"ignore": [
"*"
],
I saw this post: https://github.com/firebase/firebase-tools/issues/566 and someone asked similar question for functions and the answer was to delete dist/index.html. But since my actual site depends on it, I tried just ignoring it and it seems to work.
I fixed the same issue with #cocacrave's answer. Just sharing the full firebase.json file. * There should be a public folder and settings but my public folder is empty.
{
"hosting": {
"public": "public",
"ignore": [
"*"
],
"appAssociation": "AUTO",
"rewrites": [
{
"source": "/**",
"dynamicLinks": true
}
]
}
}
I have a react app and have the usual rewrite rule in firebase hosting:
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
I also have a separate /images directory with images I don't want to be rewritten.
How do I exclude the /images directory from the rewrite?
I'm a bit late but I found this question while searching for a similar problem.
Use this rewrites rule :
"rewrites": [
{
"source": "!/images/**",
"destination": "/index.html"
}
]
The key is that "source" (as a lot of fields in firebase.json) use a glob pattern matching notation.
Instead of redirecting everything on index.html (as do " ** "), this rule redirect everything that is not in the images folder and subfolders.
"hosting": {
"rewrites": [
{
"source": "/images/**",
"destination": "/something.html"
},
{
"source": "**",
"destination": "/index.html"
}
]
}
This will exclude everything inside your /images folder rewriting it to /something.html
I have a polymer starter kit app and added an extra static html file called extra.html.
I followed the rewrite rule as advised in polymer docs and was expecting that if I navigate to this url , it will display extra.html. However, it's always fetching index.html instead.
My firebase.json is as follows:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "build/unbundled",
"rewrites": [
{
"source": "!/__/**",
"destination": "/index.html"
},
{
"source": "**/!(*.js|*.html|*.css|*.json|*.svg|*.png|*.jpg|*.jpeg)",
"destination": "/index.html"
}
]
}
}
How do I get it to display extra.html when i navigate to https://firebaseUrl/extra.html? Thanks.
I just used the Firebase CLI to init a static hosting project. What exactly happens when you enable the "configure as a single-page app" option? I'm looking for a description of exactly which files are modified, and what kind of effect this has on the Firebase backend.
That option simply sets a flag in the firebase.json file to redirect all URLs to /index.html.
"rewrites": [ {
"source": "**",
"destination": "/index.html"
} ]
See the documentation of Firebase Hosting for more information, which also contains this fuller example:
"hosting": {
// ...
// Add the "rewrites" attribute within "hosting"
"rewrites": [ {
// Serves index.html for requests to files or directories that do not exist
"source": "**",
"destination": "/index.html"
}, {
// Serves index.html for requests to both "/foo" and "/foo/**"
// Using "/foo/**" only matches paths like "/foo/xyz", but not "/foo"
"source": "/foo{,/**}",
"destination": "/index.html"
}, {
// Excludes specified pathways from rewrites
"source": "!/#(js|css)/**",
"destination": "/index.html"
} ]
}
Full example:
{
"hosting": {
"public": ".",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
If you set it to yes, then all invalid URLs like www.example.com/some-invalid-url will be redirected to index.html of your site which is a good thing. You can also set it to your custom 404.html.
firebase.json
{
"hosting": {
"public": "pubic",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"cleanUrls": true
}
}
Bonus: set the cleanUrls to true to remove .html extensions from your deployed website urls else all urls without .html will redirect to index.html.
As a note: if you would like to have Server-Side Rendering (SSR), type No and set up your rewrites as follow:
"rewrites": [
{
"function": "angularUniversalFunction",
"source": "**"
}
]
After all, whatever you will choose you can always change this in a firebase.json file.
Official Firebase explanation:
We had used that option last year (Q1 & Q2) but it seemed to do nothing, but nowadays when we apply it, definitely things work very different.
The complete official explanation of what it does comes in here:
https://firebase.google.com/docs/hosting/url-redirects-rewrites#section-rewrites
There's even some useful information about Headers usage in the next section of the same page.