I have a URL structure with the following pattern, which are just aliases of each other.
example.com/products/sku/index.html
example.com/product/sku/product-slug/index.html
However, I wouldn't like to upload the same index.html file twice for accomplishing this when hosting under firebase.
I have tried to add the following to firebase.json without luck
{
"hosting": {
"rewrites": [
{ "source": "/products/*/*", "destination": "../index.html"}
]
}
}
Which would basically just take a request to example.com/product/sku/product-slug/index.html and render as example.com/product/sku/index.html, however that doesn't seem to work as the relative file seems to not be found.
Ideally something like this would be ideal:
{ "source": "/products/:sku/**", "destination": "/products/:sku/index.html"}
Is there any way to achieve this kind of behaviour on firebase hosting?
Related
I'm trying to configure a web app to use hosting for all static resources, such as jpegs, pngs, etc. But I want to route all requests to a cloud function to monitor traffic for various security reasons.
I managed to achieve this for all routes except the home route using this:
"hosting": {
"public": "public", //without this everything goes through function, with it the base url is treated like a static get for index.html
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"function": "sendWebApp"
}
]
}
The problem I'm facing is with the home route/base url request. It's ignoring the rewrite for "myurl.com" but uses the rewrite for "myurl.com/whatever-I-type-here". How can I get it to route to the function for the base url as well?
(For clarity.)
EDIT: How can I get firebase hosting not to treat the base url as a static request for index.html?
Firebase Hosting by default will always send index.html from the declared public folder when a request is made to the base URL. The only way to override this is to remove the index.html or don't include the "public" declaration in firebase.json's hosting configuration.
Because static files ignore the rewrites configuration, you can simplify your rewrites to just:
"hosting": {
// ... other props ...
// Serves the function for requests to files or directories that do not exist
"rewrites": [ {
"source": "**",
"function": "sendWebApp"
} ]
}
Importantly, if you are accessing a directory of your site, like / or /dashboard/, the index.html in those directories will be served if they exist. This means that your configured rewrite rules will never be checked in these cases.
I currently have the following configuration:
// firebase.json
{
"hosting": [
{
"rewrites": [{
"source": "/articles{,/**}",
"destination": "/articles"
},
{
"source": "**",
"destination": "/index.html"
}]
}
]
}
If I go to mysite.com/articles/<articleID> I'm taken to mysite.com when I'd expect to be taken to mysite.com/articles. What am I doing incorrectly?
I'm following this documentation.
I was able to resolve the issue after taking the following steps:
Change my source from /articles{,/**} to /articles/**
Change my destination from articles to articles.html which is a valid local file
Realize that changes to firebase.json don't change the behavior of the Firebase Hosting emulator until it is restarted.
I believe there are two possible causes.
You have set hosting as an array instead of an object (although I am not completely sure if that is an issue)
Secondly, as you can see in the documentation you shared, just above the heading Direct requests to a function, it says that the destination file must exist and as mysite.com/articles doesn't evaluate to a local file, it is caught by the second rewrite rule and redirected to index.html.
Question
I just set up firebase. However, when I load the link that firebase provided it gives me an 'Error 404'. Now I know that the website is hosted correctly, because when I ran the local host, I then entered the following extension on the end of the url: '/html/index.html' - and it worked.
However, firebase is not finding the correct page to load.
How can I change the page that loads by default, when someone visits my website?
For context
I am pretty sure I know what firebase is doing here. When I first ran the local host, it was running the default index.html that firebase provided. Now that I have deleted that default index.html. It doesn't know where to look to find the page to run.
My index.html is within a folder that is within the public folder. The name of that internal folder is html.
This is the current set up of the file structure and my attempt to fix the problem so far (based on advice of Renaud):
Update
I have now implemented the following, but it is loading #404
As explained in the doc for Hosting configuration, in order to redirect the traffic to your index.html page (or to another html file), you need to add the following to the firebase.json file which is at the root of your project directory:
"hosting": {
"public": "public",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
OR
"hosting": {
"public": "public",
"rewrites": [
{
"source": "**",
"destination": "/mySpecificHomePage.html"
}
]
},
As explained here, "the public attribute specifies which directory to deploy to Firebase Hosting. The default value is a directory named public, but you can specify any directory's path, as long as it exists in your project directory."
Update following your update (screenshot of your Firebase project file structure):
If I am not mistaking you should do as follows:
"hosting": {
"public": "html",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
Note that rewrites is within hosting!
I just finish my app and deployed it to Firebase, however I'm getting error 404 that it cant find the home file, so I'll have to manually add /home.html at the back of the URL (https://website.web.app/home.html) before it display my app on the browser. Any idea on how to set a default page in the .json file Please. I used Bootstrap, html for the app.
index.html is the default page for Firebase Hosting. According to the configuration documentation, there doesn't appear to be a way to change this. It's probably going to be easiest for you to simply use index.html instead of home.html.
You could also attempt to use a rewrite to change requests to home.html into a request for index.html, but I think it will be easier to just change the name of your file.
You can use redirects option from "firebase.json" config:
{
"hosting": {
...
"redirects": [
{
"source": "/index.html",
"destination": "/home.html",
"type": 301
},
{
"source": "/",
"destination": "/home.html",
"type": 301
}
]
}
}
I want to create a website which will work on any pathname, like domain.com/abc, domain.com/xyz and so on.
But I want to serve from home page only. The content will be generated dynamically.
I think it is possible using firebase.json file, but how do I do that?
I have tried redirect, but that didn't work as pathname wasn't preserved.
This should be configured by default, but here you go:
"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"
} ]
}
The appropriate section in the documentation can be found here.
This (rewrites) will serve content from the specified destination but not redirect to another URL.