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.
Related
I am trying to setup firebase with a domain so that:
My functions are available on mydomain.com/api/functionName
My hosting is available on mydomain.com (or preferably mydomain.com/client/, but the other will work as well)
My firebase.json looks like this:
{
"hosting": {
"public": "build",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
},
{
"source": "/api/helloWorld",
"function": "helloWorld"
}
]
}
}
After deploying this and accessing the domain in the browser, both / and /api/helloWorld routes will always take my to my client app, not to my function.
What's really weird to me is that when running the emulator locally, hosting does not work at all but localhost:5000/api/helloWorld works as expected and calls the function.
What am I doing wrong here? It feels as if my firebase.json is not deployed at all.
Update
Here's my function definition if that has anything to do with it:
exports.helloWorld = functions
.region("europe-west3")
.https.onRequest((_, response) => {
response.send("Hello from Firebase!");
});
Rewrites work in a "first match wins" order. Since you have a ** at the top, it will match all URLs and the second rewrite is never accessed. If you switch the order, you should see it work as expected:
{
"hosting": {
// ...
"rewrites": [
{
"source": "/api/helloWorld",
"function": "helloWorld"
},
{
"source": "**",
"destination": "/index.html"
}
]
}
}
I'm using firebase hosting. I have index.html file.
It's opening via Both Firebase URL and Custom Domain.
If anyone tries open example.com it should open index.html
But if anyone try to open example.com/?link=https://google.com it should dynamically open the URL in link parameter.
I don't know what I'm doing wrong. Even if the link parameter is present. It still opens the index.html file.
Here is my firebase.json
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"appAssociation": "AUTO",
"rewrites": [
{
"source": "/?link**",
"dynamicLinks": true
},
{
"source": "!/?link**",
"destination": "/index.html"
}
]
}
}
You should remove the rewrite rule for index.html
{
"source": "!/?link**",
"destination": "/index.html"
}
and remove ? on the dynamicLinks rewrite rule source. It should look like this.
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"appAssociation": "AUTO",
"rewrites": [{
"source": "/link**",
"dynamicLinks": true
}]
}
}
Deploy the changes again and this should set https://example.com/link as your Dynamic Link domain. You can test if the FDL domain functional by manually adding FDL parameters on the domain.
i.e. https://example.com/link?link=https://google.com
My intention is to redirect https://example.com/admin to my firebase function named admin. So I have the following code in the firebase.json:
{
"hosting": {
"public": "build",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "/admin{,/**}",
"function": "admin"
},
{
"source": "**",
"destination": "/index.html"
}
]
}
}
I've followed the instructions from this website: https://firebase.google.com/docs/hosting/functions
Using my browser, if I go to https://my-server-my-project.cloudfunctions.net/admin everything works an looks fine. But if I go to https://example.com/admin, this is what I get instead:
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 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.