Here's my firebase.json. I'm trying redirect /sitemaps to a dynamically generated sitemaps in Firebase Storage. Unfortunately rewrites wildcard for the rest of routes overwrites the redirection. How would be the best way to specify to rewrite everything but that one url?
"redirects": [
{
"source" : "/sitemaps",
"destination" : "https://firebasestorage.googleapis.com/v0/b/foo",
"type" : 301
}
],
"rewrites": [
{
"source": "**",
"function": "bar"
}
]
one can negate the condition with a !, in order to exclude.
"rewrites": [{
"source": "!/sitemaps",
"destination": "/index.html"
}, {
"source": "**",
"destination": "/index.html"
}]
Related
I am trying to redirect people that call mywebsite.com/poly/1 to a corresponding .png image but it is not working.
I have tried using Glob:
"rewrites": [
{
"source": "/poly/:tokenId",
"destination": "/images/:tokenId/img.png",
"type": 301,
"headers": [ {
"key": "Access-Control-Allow-Origin",
"value": "*"
}]
}
]
Regex:
"rewrites": [
{
"regex": "/poly/(\\d+)",
"destination": "/images/:1/img.png",
"type": 301,
"headers": [ {
"key": "Access-Control-Allow-Origin",
"value": "*"
}]
}
]
I always get a 404, but it works if the destination is static like:
"destination": "/images/1/img.png",
I have tested this using firebase serve.
Any ideas?
You are mixing the syntax of rewrites and redirects.
// rewrites
"hosting": {
"rewrites": [ {
"source": "**",
"destination": "/index.html"
} ]
}
// redirects
"hosting": {
"redirects": [ {
"source": "/foo",
"destination": "/bar",
"type": 301
} ]
}
Rewrites match a source and serve destination files. They don't support URL segments.
Redirects match a source and tell the browser to use the destination path instead. They do support URL segments.
You could use a rewrite if you don't mind the destination paths being available. You could upload the files to Firebase Storage and proxy the files through a Function but that would not be ideal.
I want to support https://example.com/7_8jkil (ie. a shortid) be handled by one page in my firebase app. I currently have it working as https://example.com/room/7_8jkil
I am unsure if its even possible given the pattern matching in Firebase rewrites.
Here is my current rewrite code:
"rewrites": [
{
"source": "/room/**",
"destination": "/room.html"
},
{
"source": "**",
"destination": "/index.html"
}
]
Oddly enough I tried the following and its seems to work!
"rewrites": [
{
"source": "/**",
"destination": "/room.html"
},
{
"source": "**",
"destination": "/index.html"
}
]
I need to serve dynamic content by using path parameters to fetch an id from the URL when hosting on firebase. For example:
mydomain.com/apps/4480023
In this scenario, I'd like to extract 4480023 as the ID of the resource I'm looking for. I tried the following changes in the firebase.json file:
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
},
{
"source": "/apps/**",
"destination": "/apps.html"
}
],
"cleanUrls": true
}
}
In which case, I can use a javascript function to retrieve the ID from the URL when the user browses to that resource. My problem is, this rewrite doesn't work and it directs the user to the index.html page and all the CSS/JS files end up not functioning correctly.
How can I modify this to enable this functionality?
The rewrites are checked in order. This means your first rewrite, which matches all requests, is always going to be served by index.html.
All you have to do is change the order of the rewrites to allow /apps/** to have a possibility of matching before /** captures everything else.
"rewrites": [
{
"source": "/apps/**",
"destination": "/apps.html"
},
{
"source": "**",
"destination": "/index.html"
}
]
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 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.