I expecting see my firebase website but instead of the web app, I seeing this image. I think I followed the Firebase Hosting docs.
Here's my firebase.json:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
After running firebase deploy, it says:
Deploy complete!
What did I miss? :(
Thanks,
Adi
This is infact your website. When you run Firebase init it prepopulates the public folder (which you selected to be your dist directory) with the sample site you are seeing. You must place all of your HTML, CSS, and JavaScript into the dist directory and the run firebase deploy --only hosting
Related
`
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
`Have an issue where the Firebase deploy link shows "Firebase Hosting Setup Complete." I've tried just about everything on stackoverflow with no success.
I have it set to "build" not "public" in my firebase.json for hosting and it's not doing anything.
I've tried messing with the index.html but then the screen just comes up white/blank.
I've also deleted firebase files completely and started the init over. Still comes back the same.
Has anyone else ran into this lately?
It's hard to tell without any code snippets or firebase config files but I believe if you specify your public location as "build" you do not need to include the rewrites property in the firebase.json file. According to The Docs,
Set up rewrites for any of these purposes:
Show the same content for multiple URLs. Learn how.
Serve a function or access a Cloud Run container from a Hosting URL. Learn how: function or container.
Create a custom domain Dynamic Link. Learn how.
How can I use SvelteKit and firebase hosting? firebase hosting requires the html file to be called Index.html while SvelteKit calls it app.html. I think it has something to do with SvelteKit adaptors
You can configure Firebase to serve the file you want.
"hosting": {
// ...
// Serves app.html for requests to files or directories that do not exist
"rewrites": [ {
"source": "**",
"destination": "/app.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 added target to firebase project because there is going to be subdomains. I've done this before, but never encountered this error. So I created the project in the firebase console. Then I opened the project in my terminal.
firebase init
... chose existing project // Website
firebase deploy // website is now live at firebase domain
Then I added a target...
firebase target:apply hosting website Website
Now I went to my firebase.json file and it looks like this
{
"hosting": {
"target": "website" // this causes Error: 404, Requested entity was not found
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
I'm getting the error after I add that target and run firebase deploy in the terminal. Maybe I need to add the target to my firebase.rc as well?
I am trying to use the cleanUrls option to drop .html in routes. Works nicely locally with firebase serve. But once deployed to prod, .html is required.
My test site: https://maptennis.firebaseapp.com/
Click on Login will drive you to /login and gives a 404. Append .html to the URL and it will work.
My firebase.json config file:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "public"
},
"cleanUrls": true,
"trailingSlash": false
}
Any insight here would be great.
I was facing similar issue. My firebase.json file looked like this:
{
"hosting": {
"public": "public"
},
"cleanUrls": true
}
I noticed I was using an older version of Firebase CLI. When I updated to the latest version and tried to deploy with same config file, following error occurred:
hosting: We found a hosting key inside firebase.json as well as
hosting configuration keys that are not nested inside the hosting key.
Please run firebase tools:migrate to fix this issue. Please note that
this will overwrite any configuration keys nested inside the hosting
key with configuration keys at the root level of firebase.json.
Error: Hosting key and legacy hosting keys are both present in
firebase.json.
I changed my json config file to this:
{
"hosting": {
"public": "public",
"cleanUrls": true
}
}
Deploy was successful and cleanUrls worked this time :)