I am using Firebase Hosting for my site and if someone tries a direct link like my.site/contact they see a standard 404 rendered by firebase.
I want to replace it with my own page and hence I created a page with name 404.html and placed in src/ as well as src/app/
However, this does not work. My firebase.json looks like this:
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
The another option I can live with is directing people to login page. I guess that would need to add a routing rule to firebase.json .
Please read the documentation for Custom 404/Not Found page.
Your 404.html file must be at the very top level of the public content directory, which by your configuration looks like it would be dist.
Related
I have a Vue Js app with the latest version of Vite and Vue Router.
When I push changes to Firebase Hosting, the changes reflect instantly on the Firebase provided domain (e.g mycompany.web.app), but takes days to be reflected on my custom domain (e.g mycompany.com)
When I open the custom domain (e.g mycompany.com), you see a blank page with error on browser console.
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
From firefox this is displayed
Loading module from “https://staging.company.app/assets/index.3794b176.js” was blocked because of a disallowed MIME type (“text/html”).
Loading failed for the module with source “https://staging.company.app/assets/index.3794b176.js”.
The Firebase provided domain loads the page with the newly deployed changes without any issues.
In firebase.json
{
"target": "qa",
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
I tried adding a cache policy on the firebase.json without any luck.
I also deployed the app on Netlify and it seems to work well.
*** Updated
When index.html changed title and application is redeployed, the browser does not change the title, still refers to previous title
I ran into a similar problem recently where the Firebase provided domain worked fine but my custom domain would croak with a similar error. I solved it finally by doing
firebase deploy
instead of
firebase deploy --only hosting
Hope this helps!
I'm trying to host my website using NextJS on firebase. All the online help that I've gotten so far speaks about setting up NextJS app and then initialising Firebase project. The thing is that I have already created firebase functions for various purposes and already have a statically hosted website. I want to know how can I replace my currently hosted static website using NextJS project.
You can do the order of operations either way, the files are independent of one another and will just need to be modified per your Next.js setup, this being SSR, SPA, Static, etc.
The key notes are to ensure you have hosting enabled inside your firebase.json file and the correct rewrites if needed.
Since you are using static generation, make sure the hosting path points to your build folder rather than the default "public" and if you are generating a SPA you will need to rewrite all paths to the index.html
Snippet example: firebase.json
"hosting": {
"public": "dist/spa",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
I'm using Firebase Hosting to host a website and I'm using a custom domain name.
I want my website to be the destination for let's say: https://example.com
I also use firebase dynamic links that uses the same domain but using a different prefix.
Like this: https://links.example.com
The website host and dynamic links are working fine, but the problem is I don't know how to write my firebase.json rewrites in a way that allows for both the site (example.com) to work and the subdomain (links.firebase.com) that I can use for my dynamic links.
The dynamic links work if I use the following rewrite:
"rewrites": [
{
"source": "/**",
"dynamicLinks": true
}
]
But this way the main website (example.com) display a message about not being a valid dynamic link, in stead of showing the index.html
TL/DR
I'm wondering if it is possible to have both the website (example.com) and the dynamic links (links.example.com) working on the same domain (example) ?
Thanks in advance
EDIT 1:
I had renamed the index.html so that's why I wasn't seeing the website. Now that I changed it back it works, but the dynamic links do not. links.example.com shows the index.html
EDIT 2:
It finally works as intented: example.com and links.example.com point to the index.html while any format like links.example.com/aShortDynamicLinkCode activates dynamic links.
I used the following rewrites in my Firebase.json to achieve this
{
"source": "**",
"dynamicLinks": true
},
{
"source": "/**",
"dynamicLinks": true
},
If you have an index.html in your public directory, it will serve at / even if you have a rewrite like you specify (see serving priority in the docs).
If you're not seeing your index.html, that indicates that something is probably misconfigured. Double-check that your index.html is in the root of your public directory and that the number of files being deployed seems accurate.
So I successfully deployed my basic/static vuepress site via firebase deploy but nothing is showing up when I go to the url; https://nbamodel-223111.web.app/. However, it works fine when running it locally. What could it be? Firebase seems to say the version it is running, multiple files etc... I don't know what's going on.
The firebase.json is the below - could there be something wrong there?
{
"hosting": {
"public": "./vuepress/dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
I'm not sure what else to look for to resolve this issue.
I have checked your web at https://********-223111.web.app/ and it shows that is up and running, you may want to edit your question to remove that url from Stackoverflow.
Additionally you could add how you made it work!!
I am trying to host my dynamic Node.js website using Firebase Hosting but I am having difficulty based on my file structure. Here is what is looks like:
In my code, I am not using an index.html file but when I ran firebase init it automatically created one for me along with a 404.html file. When I deploy my code, only index.html file seems to execute. But when I try deploying after deleting the index.html file, I can see the 404.html file.
This is the firebase.json file. that I am using:
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
None of the files in the 'public/html' folder seem to be executing. I tried changing the public field to public/html in the firebase.json file but then I can only see Cannot GET / when deployed. How do I run the files in the 'public/html' folder when deploying along with the js files in the 'src/js' folder?
I have an error.html file in my code which is located under 'public/html/main'. If I want to use it besides the 404.html file, will I have to place in directly inside the public folder?
Additionally, I also have a lot of backend files. In order to use those, do I need to use some other service offered by firebase or that can be accomplished by using Firebase Hosting itself?
With Firebase Hosting, if you want to see web content when you load the "/" path, you will need a file called "index.html" in your public directory. It will not look in subdirectories. By default, with the configuration you're showing, all the paths are served relative to public.
It's hard to tell what you're expecting to work differently. If you want to refer to foo.html nested under html, then your path will need to be "/html/foo.html". If you want to change the hosting configuration to do something different, I suggest looking over the documentation.