Search code examples
angularfirebasefirebase-hosting

Firebase hosting not showing my app content

I am currently trying to deploy my angular app to firebase. My index.html keeps getting overwritten when I deploy the app and the welcome modal shows up instead of my app content. I checked all the questions related to this topic but none of the answers provided helped me.

This is what I have tried so far:

  • selecting "NO" when asked File dist/index.html already exists. Overwrite? (y/N) N
  • replacing index.html with my own index.html
  • in similar questions users suggested to switch to incognito mode in Chrome or to clear cache - didn't work either
  • configure my base href in project's index.html and add my firebase project < base href="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/">
  • deleting my dist folder and re-running ng build --prodand then firebase init and firebase deploy

Also when I redo the last step, firebase doesn't ask whether it should replace index.html it just replaces it. enter image description here

What am I doing wrong? Should I maybe switch to another hosting provider like Heroku instead?

Thanks in advance for any help!

Solution

  • You mention that you are:

    deleting my dist folder and re-running ng build --prod and then firebase init and firebase deploy

    You should not run firebase init several times. This is the command used to create your Firebase project and it should be called only once.

    So, to deploy a new version of your app, you need to put under the dist folder of your Firebase project, the result of your build (ng build --prod), replacing any file/directory that is there (in particular the default Firebase index.html file created by firebase init), and then call firebase deploy or firebase deploy --only hosting.

    Between each deployment, you don't need to delete the dist folder. Just delete its content and replace it by the files/directories that were generated by your build process.

    Note that I wrote "under the dist folder of your Firebase project" because your answer to the "What do you want to use as your public folder?" question is dist.