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
}
]
}
}
Related
I use firebase.json to rewrite any request to /index.html which have link to external css in the same directory.
firebase.json:
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
However, when I go to sub url like example.com/user, the index.html the linked css did not imported. And the script resource also did not imported, instead console spit this error:
failed to load module script: expected a javascript module script but the server responded with a mime type of "text/html"
I searching in firebase docs, and find the header config that
Applies a CORS header
I did not understand, is this what I need ?
Do I need to use absolute path instead ?
I only use firebase hosting not cloud function.
Any help would appreciated 🙏
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?
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.
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.
I was trying to have my ionic single page application to have a url navigation, everything will work fine if I do
project-id.com/#/register/id.
If I enter this url I will be in the correct page and url changes to
project-id.com/register/id (I think this is because ionic doing locationStrategy:'path')
however if I want to do no # with just
project-id.com/register/id
It will try to get my static assets with project-id.com/register/blah
i.e instead of getting
project-id.com/cordova.js, it will do
project-id.com/register/cordova.js.
Now if I do
project-id.com/register/somemore/id
it will go fetch
project-id.com/register/somemore/cordova.js
I've tried many rewrites, but none of it worked,
my current one is the default rewrite. This will make every static assets become index.html
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
Any idea?
it turns out I need to give absolute path like /assets/js/something.js instead of assets/js/somthing.js