I'm trying to test changes to my site. But when I make changes and restart firebase serve --only hosting the changes aren't showing up.
I'm using Vuejs if that matters...
i had this problem but it turns out chrome cached my old version and is putting it every time
just disable the cache from chrome from devtools
https://www.technipages.com/google-chrome-how-to-completely-disable-cache
With Chrome, you can have the cache disable when DevTools are open by selecting the "Disable cache" option in the Network tab.
I had this issue as well. The easiest way of fixing this is to clear cache and cookies, and reload.
If I use npm run dev I see the content changes immediately with hot reloading. Not sure how npm run dev is different from firebase serve --hosting only or why you need firebase serve at all when developing hosting.
You need to run npm run build before firebase serve --hosting only too. When using firebase serve
The issues seems to be that the emulator hosting doesn't do hot reloading.
I just do this in the console
npm run build && firebase deploy
(To build into the dist folder AND deploy to firebase hosting)
my firebase.json file looks like this
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
When all this is done, I log into firebase hosting on the browser, and I delete the previous uploads. Though it will take time for Firebase to update its CDN (probably after 10 minutes), with the new code.
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!
We have picked up a very messy half built project and are trying to get it into an external beta testing state...
It is a next.js application which works fine if we run npm run build and then npm run start.
We prefer to host it on Firebase, for all the normal reasons and I believe it should be possible to do so.
However, when we install firebase and enable firebase experiments:enable webframeworks and firebase init hosting and accept the default options (Y,N) it adds the standard firebase index.html to the public folder - even though it didn't ask if we wanted that...
If we leave that index.html in place in the public folder then run firebase serve or firebase deploy, the /public/index.html is delivered as the root page of our site. When it should be the Index of the next application. If we delete the firebase index.html, and then rerun firebase serve to rebuild, then we get an 'undefined url' error (as it can't find the /public/index.html presumably).
We have an index.tsx in the /pages dir and when we run firebase serve, the build process does seem to be placing index-xxxxx.js chunk files etc. in .firebase/sitename/hosting/_next/static/chunks/pages.
We have tried adding rewrites in the firebase.json of various sorts, changed versions, everything we can think of. But still can't work out why firebase is not recognising the site root index page when it is running just fine on npm run start.
Any help appreciated to help us troubleshoot.
I have the following two hostings set up in my Firebase hosting. I don't know where the first one with the bad name came from, but anyway it's there and it's always coming up when I use firebase init from the command line as the only hosting I can use. Does anyone know how i can use Firebase init to connect my website to the second hosting address, that's the lbdsapp address? Also preferably I'd like to delete the lbds-aeb3d if possible and make the other one the default.F
Any help would be really appreciated. Thanks.
The first site lbds-aeb3d is the main site created from your project ID, When you create the project you probably entered lbds which is too short for a project ID, so some random string is automatically added. So you can not delete it since it's associated with your project.
Since you have added another site, that makes your project a multisites hosting project and you will have to configure .firebaserc and firebase.json accordingly.
You can start by giving your secondary site a name to refer to when you want set it as a deploy target. You can do this by the following command
firebase target:apply hosting <target-name> <resource-name>
In your case, if you call it myapp it would be
firebase target:apply hosting myapp lbdsapp
Then firebase will generate .firebaserc that include myapp as a target
Next, you'll have to define hosting configuration for your site in firebase.json
You will have to add the target name in the hosting config. Note that if you have more sites, you will have to configure hosting as array of config objects
{
"hosting": {
"target": "myapp",
"public": ...,
// ...
}
}
When you deploy your site, you will have to specify the target
firebase deploy --only hosting:myapp
I have a hosted site on firebase which I am not using anymore. I still want to keep the project but want to remove the hosted site. Is there any way to do this or do I just need to upload an empty directory. Doesn't seem to be an option in the UI
It can be deleted.
Run firebase hosting:disable through the firebase-tools CLI first.
Go to Firebase Console and select Hosting from the menu of the left.
You will see the deployed project with a list of your historical actions like Deployed, disabled, etc.
Only after you have disabled the site, the "three vertical dots" menu will be available for you to choose the action to delete the deployment.
If you have multiple site hosted in same project, then use -s flag to specify the site you want to disable.
firebase hosting:disable -s yoursitename
You don't need to upload empty directory.
Just open your project's root directory and enter the following command
firebase hosting:disable
CLI Response :
$ firebase hosting:disable
? Are you sure you want to disable Firebase Hosting for the site xyz
This will immediately make your site inaccessible! Yes
✔ Hosting has been disabled for xyz. Deploy a new version
to re-enable.
This will instantly disable running website also adds a Disabled status in release history. Tested on firebase CLI version 9.20.0
It's a bit hidden, but here are the steps:
Go to the Firebase Hosting console for your project, you will see your domain.
Hover over your domain. There's an overflow menu (⋮ three vertical dots) on the right.
From the overflow menu select Delete Domain
[Update]
For multiple site hosted !! use command
firebase hosting:disable --project yoursitename
for me it work!! Can your try?
You can use the following command:
firebase hosting:disable -s <firebase_project_name>
replace <firebase_project_name> with the name of your firebase project. This allows you to unsubscribe from the current project and place it in disable mode and you cannot receive traffic from the published web page. When you want to re-enable it, you can do it from the visual platform. I leave an image attached so that you can be guided.
Manually
You can easily go to the console, and click on the 3 vertical dots and delete the site.
Using CLI
Disable only
Stops serving Firebase Hosting traffic for the active Firebase
project.
Your project's Hosting URL will display a "Site Not Found" message
after running this command.
If you want to disable, as the other answers are saying use this command:
firebase hosting:disable
If you're using multi-sites, you have to specify the project name:
firebase hosting:disable --project yoursitename
Delete forever
Deletes the specified Hosting site.
Deleting a site is a permanent action. If you delete a site, Firebase doesn't maintain records of deployed files or deployment history, and the site cannot be reactivated by you or anyone else.
(Optional) Skip the confirmation prompt by passing the following flags: -f or --force
To delete this site (similar to when you go to the console > delete manually) run this command:
firebase hosting:sites:delete yoursitename -f
Be careful when using the -f, but if you're running this as a script command, it might be required.
I spent too much time on this and hopefully this can be helpful. I did deploy my stuff using firebase deploy however I was not able to see in on the firebase console. When I tried firebase hosting:disable I got this Error: HTTP Error: 400, Invalid project ID specified.
The steps below helped me delete my project.
To find the project, you have to get the output of firebase
deploy which will have a console url that looks like this:
Project Console:
https://console.firebase.google.com/project/<your-project-id>/overview.
Follow this link and go to project settings. You should be able to
delete your project in there.
I had to spend several hours removing the default website on Firebase hosting.
The way that I found was :
Enter "firebase init database" in Terminal. It initialize all websites including the default one so that you can set up a new one.
I hope it helps you.
As of now there is no proper way to bulk delete all the previous deployments in a project.
However the best thing you can do is to empty the firebase hosting folder and then deploy it using firebase deploy
This option has been given as a feature request to firebase. Lets hope its get implemented soon :)
1.Sign in to Firebase, then open your project.
2.Click the Settings icon near project Overview button, then select Project settings.
3.In the Your apps card, select the app that you want to delete.
4.Find the Delete Project button from bottom of the page , click Delete Project.
5.Check the points , then click Remove app permanently.