I have a react app that runs on firebase and is required to display content in an IFrame. When running on firebase, firebase displays the index.html in the IFrame instead of the relevant page.
All files are in the same directory but firebase defaults to using the index.html instead of the requested page
When you initialized your Firebase project in the command line, pre-deployment, you probably said "Yes" to the prompt asking if this project is a single-page-app. By saying yes, the CLI tool generated the following setting in the firebase.json settings file:
This tells the Firebase server to route all page requests to your index.html file - notice the wildcards ** - so that your React app can load the appropriate page.
If you don't want a specific route included in that rule, such as the call to your other file - you need to include an additional rewrite in that firebase.json settings file:
"rewrites": [
{
"source": "/more/**",
"destination": "/more/anotherpage.html"
},
{
"source": "**",
"destination": "/index.html"
},
]
*Note that the order is important, make sure it's before the catch-all wildcard option
You can read more about rewrites in the relevant section of the official documentation.
Related
I have complete all process
Firebase Login
Firebase init
Firebase deploy
now finally i got a link https://testing-37553.firebaseapp.com/
but my website not showing so what should i have to do.
What you are seeing is the default index.html page that is created by the CLI when you create a new project.
You should adapt this index.html page as you whish (i.e. by modifying the HTML/CSS/JS code of this page, in your local project directory) and re-deploy the project with
firebase deploy
or
firebase deploy --only hosting
Go to your firebase.json file and make sure that the 'public' key under "hosting" is set to "build" like below:
"hosting": {
"public": "build"
}
It was likely set to "public" by default when you ran firebase init. In which case it would look like this:
"hosting": {
"public": "public"
}
The problem with the default is that React places all your static assets in the 'build' directory when you run npm run build, so that is where you want to point firebase to.
I faced the similar issue, my application was on react built using create react app. I was trying to deploy via firebase but getting the default page of firebase then i figured out that I havent build my application so firebase was not able to find my application html file and hence it was trying to deploy the default one.
I solved it by running yarn build, then when I do firebase init selected "hosting" option . After this step while selecting folder to deploy rather public I selected "build" and this solved my problem and my application got hosted. Hope this helps!!
For Angular 8.
If the name of your project is "ManyuDictionary".
1)Run firebase login.
2)Run firebase init and choose:
a) hosting
b) What do you want to use as your public directory? dist/ManyuDictionary
c) Configure as a single-page app (rewrite all urls to /index.html)? Yes.
Firebase will now write configuration info to firebase.json and project
information to .firebaserc.
3)Run ng build --prod.This will replace the default index.html in dist/ManyuDictionary.
4)Run firebase deploy.
And here is your website [https://manyudictionary.firebaseapp.com].
For Angular 7+, here is the straight forward solution that works for me as of August-2019
Just delete the index.html file at the root of your /dist folder.
Then, copy all the content inside the directory(named like your project main project folder's name) found in your /dist folder
Lastly, rerun firebase deploy
Enjoyed!
Solution that worked for me as of 9/17/2020
1- Finish the firebase init steps.
2- Add this to your firebase.json file:
//"public": should be, dist + project name on your computer
//"site": should be the app name which you created on your firebase cloud
{
"hosting": {
"public": "dist/your-project-name",
"site": "firebase-project-name",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
3- ng build --prod
4- firebase deploy
Firebase asks wehn you type firebase init hosting.
File dist/your-project/index.html already exists. Overwrite?
Press
NO
And you are good to go!
If you follow firebase Hosting steps, but not solve your problem.Then you can follow this step for solving your problem:
Deploy your project in netlify.
Take the live project link from netlify.
Go to firebase > your project > Hosting > Dashboard.
Click the Add custom domain Button.
Paste the netlify project live link in input box.
Click the Continue button.
That's ok.
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.
I've followed documentation in order to set dynamic links
https://firebase.google.com/docs/dynamic-links/custom-domains
My domain was already added to my hosting
So I went ahead to dynamic links and created custom prefix i.e. https://example.com/link
After that I added custom hosting configuration and deployed it
"hosting": {
"public": "hosting",
"appAssociation": "AUTO",
"rewrites": [
{
"source": "/link/**",
"dynamicLinks": true
}
]
}
Once deployed I added following key to my iOS projects .plist file
<key>FirebaseDynamicLinksCustomDomains</key>
<array>
<string>https://example.com/link</string>
</array>
Now I've cleaned my build, ran the app and sent myself a dynamic link. Url still uses firebases page.link structure. I'm not sure if there is something I'm doing wrong or am I misunderstanding what these custom domains mean?
Note: I am testing this through email link (passwordless) authentication, perhaps custom domain is just not applied there?
Firebase Auth only supports custom Firebase Dynamic Links without custom paths.
So if your custom domain is https://example.com/link, it won't work. However, configuring https://example.com as the custom domain will work.