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.

Solution 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

Solution 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.

Solution 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 ! ;)

Solution 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.

Solution 5

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

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

View more solutions

Comments

[shaiban]

How to replace this public index.html file ?

[EranKT]

Thanks a lot! I couldn't solve this one. I missed the cd/dist part... Now this answer was tested on Angular 6

[JavaBeast]

Finally someone who answered this question with index.html contents info, I knew I needed to set domain in code somewhere!

[SeanMC]

not sure why do firebase init from the dist folder. I'm pretty sure it gets wiped out by each ng build. Just do it from the parent folder and set the dist folder as the public directory during the firebase init process

[Kat]

I'm using Angular and I had to specify dist/my-app-name for the public directory, as that's where angular put my index.html file after running ng build --prod. If you specify dist, you don't want to cd into the dist file to run firebase init, just run it from your main project folder.

[Mel]

@HammadJ - how do you do step 2? I have replaced my public index.html with the version from my src file - but even though I keep re-running npm run build and firebase deploy, it seems to revert to an earlier version. I don't know where to put the base href or script tags you've suggested as step 2. Thanks

[Muhammad bin Yusrat]

generate a new one

[Amit Bravo]

same with create react app , you must use File ./index.html already exists. Overwrite? No, ... and I did yes :(

[Oush]

@shaiban by running firebase init again & ensuring you don't re-write index.html

[Joe Devine]

@kat You should add this as an answer, this solved it for me as well.

[Michael Osofsky]

For me I needed to change to firebase.json from { "hosting": { "public": "public"} } { "hosting": { "public": "build"} } because I created my app with create-react-app whose yarn run build command puts the files in a directory called build not dist.

[Taslim Oseni]

Errrr, Flutter?

[Mayur Agarwal]

@TaslimOseni I was having the same problem with my flutter app. So, I just answered here after solving the problem.

[Sheikh Wahab Mahmood]

Happened with me too I think I have to create again my project from start to generate index.html file.

[Gregg Reno]

This got me part way there (the first step). I also had to remove the base href reference in my index.html