Firebase not running index.html file

Question

I'm a pretty new programmer going through the Firebase tutorial. I have gone through steps 1-5 of the tutorial (https://codelabs.developers.google.com/codelabs/firebase-web/#5). I've added the "Add Firebase to your web app" js code to the html file, and set up the Firebase CLI. However, when I run the firebase server, everything seems to work other than it is not showing the code from the index.html file.

I am in the right directory, and my console says "Server listening at: http://localhost:5000." But, at localhost 5000, it shows a generic "Welcome to Firebase Hosting: You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!" box rather than the app interface code in the index.html file. It is the only html file in my directory. It seems like I am missing something very simple. Thank you for your help.

Answer 1

The website shown to you is the index.html from your public folder (or whatever you configured it to be in your firebase.json file).

The culprit might be firebase init. It tries to generate a generic index.html file for you. However, in the latest version, it should at least ask you whether or not to override (which it did not in the past!).

The problem is firebase init being unbelievably crude. It just overrides the index.html file that was in your public folder... no confirmation, no safety net, no nothing.

If you lost, or accidentally let firebase init overwrite, your index.html file, you have to re-produce it somehow. If you do not have a backup of or other means of re-producing your index.html file... well... too bad!

How does the firebase CLI work?

Generally, the steps of a firebase setup go a little like this:

1. firebase login
2. firebase init
3. your-build-command-here # (if you have a build pipeline)
4. firebase deploy

You only need to do Step #1 (login) the first time when you setup building on that machine (or maybe when a new firebase revision has been released)

You only need to do Step #2 (init) to initialize a new project. That is, when you don't have your firebase.json yet (which will be created by the init command).

To re-deploy, it's simply:

1. your-build-command-here # (if you have a build pipeline)
2. firebase deploy

Answer 2

I figured out my answer. The index.html file that was being posted was in the "public" file, which was created during the "firebase init" stage. I replaced that placeholder html file with the one for my app.

Answer 3

Firebase hosting not showing up app?

There might be two reasons for this problem

1st step:

Make sure your public folder (define in your firebase.json) 'dist' containing the index.html hasn't been modified by firebase init command, if yes replace it with your original project index.html

for reference (dist is standard but your may different)

{ "hosting": { "public": "dist"} }

2nd step:

Make sure to configure your base href in project's index.html

as

<base href="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/">

and other bundle files as

<script type="text/javascript" src="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/runtime.a66f828dca56eeb90e02.js">

<script type="text/javascript" src="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/main.2eb2046276073df361f7.js">

3rd step run command - firebase deploy

enjoy ! ;)

Answer 4

New projects

when doing firebase init select the directory which contains the index.html as the public directory.

Existing projects

update firebase.json with

"hosting": {
    "public": "dist/directoryThatContainsIndexHtml",
     ......
  }

Edited Original Answer: Available in edit history. Only for testing purposes.!! for production, use the updated version.
Contents of dist are rewritten on each build so anything you place @dist are gone each time you build.

Answer 5

For anyone else comming across this. Try launching in incognito mode - the browser was cached for me.

https://stackoverflow.com/a/56468177/2047972

Answer 6

first of all you need to check your index.html after deployment of project. after these command steps:

firebase login

firebase init

firebase deploy

your real index.html file might be overwrite by firebase generic file that's why the problem is occurred. so change code of index.html after deployment of project. if you see this box on your web page

Tip: copy your complete project anywhere in your PC before deployment.

otherwise check your directory for file path your path of index.html is must correct.