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.

Pastille

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

Neighbors

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

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.

Pastille

How to replace this public index.html file ? – Maccabean

generate a new one – Gyratory

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

Answer 3

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.

Rector

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

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 – Beatty

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. – Berhley

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

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

Answer 4

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

Belting

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

@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 – Ministration

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. – Bigamist

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

Answer 5

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

https://mcmap.net/q/355294/-firebase-hosting-showing-welcome-page-after-deploying-angular-6-app

Sharma

Answer 6

In my case when I run the command ng build --prod it created a sub folder under dist folder. Assume my project name is FirstProject. I can see a sub folder called FirstProject inside dist folder (dist/FirstProject). Give dist/[subDirectory] as your public directory

What do you want to use as your public directory? dist/FirstProject

This solved my issue

Confluent

Answer 7

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.

Raisin

Answer 8

For deploying Angular application to Firebase simple and quick tutorial you can find here.

During the process of firebase init, type N, when the question "File dist/index.html already exists. Overwrite?" appears, and your page will be displayed as it should be.

Pageantry

Answer 9

In public folder option write dist/your-folder-name. This will allow you to render your index file which is in your folder.

Sunbeam

Answer 10

npm install -g firebase-tools
firebase login
firebase init
firebase deploy
firebase open 

Select the following after scrolling down

  Hosting: Deployed Site

Sharmainesharman

Answer 11

When you build your Angular app, at least with Angular 10, by default Angular creates a folder names dist, containing a folder having the name of the application. For example, this example’s app is named blog-front, so when building the project (ng build or ng build -- prod), Angular will create a folder dist, containing a folder named blog-front:

When you reach the firebase init step asking the public directory, your folder's name should be “dist/blog-front” for this example, or “dist/yourApplicationName” as a general rule :

Dihedral

Answer 12

In my case firebase was using the wrong directory, also see here: firebase CLI didn't recognize the current project directory for 'firebase init'. While I was expecting firebase to put all created files into my project directory it was totally disconnected and put all files into my /Users/MyUserName directoy and deploying the wrong index.html from there.

This is how to fix it (no reinstall of firebase needed as suggested in the linked post):

• delete all created firebase files from /Users/MyUserName directoy (.firebaserc, firebase.json, index.html and dist-folder)
• run firebase init on project directoy
• use dist/projectname as public directory
• Configure as a single-page app "Yes"
• do not overwrite index.html (if you do, make sure to "ng build" again before deploying)
• firebase deploy

By the way, for everyone who is using Angular 7, this tutorial about deploying an angular 7 app to firebase hosting was really helpfull to me.

Osmious

Answer 13

I faced similar situation. When we run firebase init it asks couple of questions. At that time we mention the directory path from where firebase will take all files to deploy. Make sure that, directory contain index.html.

Douceur

Answer 14

Delete the index.html which is present in dist folder.

Then run the following commands:

firebase login

ng build --prod

firebase init

firebase deploy

Villein

Answer 15

This Worked for me

First Stop the project and follow these steps

npm install -g firebase-tools

firebase login

firebase init

? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites

? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes

After initialization is completed makesure to delete the created dist file before next steps

ng build --prod

firebase deploy

Livengood

Answer 16

You are seeing this error because you didn't run the command:

1. npm run build
2. make sure you use it before firebase deploy
3. and also make you are incorrect directory.
4. execute this after finishing firebase init process.

Candicecandid

Answer 17

If you get a public folder with ready index.html by firebase init. You can simply replace that index.html with yours and use the command:

firebase deploy

That should be enough to get it working. Make sure all the files are where they should be!

Snell

Answer 18

Working Solution

Just do flutter build web, then flutter deploy.

firebase init tries to generate a generic index.html file for you, and if it did that, then you first have to do flutter build web so that the index.html you need is generated, rather than the generic one, and then again flutter deploy

Voigt

Errrr, Flutter? – Kranz

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

Answer 19

My solution is just waiting a bit. Then, if it still not working. let try:

Solution 1: check your index.html inside "build" folder and index.html in your own project. They should be the same, if not, copy code index.html outside "build" folder and paste into index.html inside "build" folder.

solution 2 : delete your .firebase folder. and init it again. => firebase init ? What do you want to use as your public directory? build < == NOTE: "build" is my directory ? Configure as a single-page app (rewrite all urls to /index.html)? No <== select NO ? File build/404.html already exists. Overwrite? No <== select NO ? File build/index.html already exists. Overwrite? No <== select NO

After doing these things, I also get that notification of "Welcome Firebase Setting Host Complete" , and I just wait for a while. then reload the website.

Virgel

Answer 20

Please follow the step

npm install -g firebase-tools

If you already have a dist folder, remove it from directory

firebase login
ng build --prod
firebase init
firebase deploy

Enolaenormity

Answer 21

index.html file has that firebase default information.That's why it is showing that information. Copy and paste index.html from your original angular file and paste it to dist index.html. This fixed my issue.

Bricky

Answer 22

You should add your files to public directory folder before deploy it into firebase server(your app's index file should be there).

Meridethmeridian

Answer 23

Changing the default HTML page name in the public folder to index.html worked for me. Also, make sure you do not rewrite the index.html when firebase prompts you to in the firebase init step(follow the attached image).

Finzer

Answer 24

By default, firebase init creates a public folder and creates an index.html with the design that matches the firebase documentation.

On inspecting the fireabase.json file:

 {
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

we can find that the public key is pointing to the public folder with custom index.html for Firebase.

Two ways of resolving:

1. Point the public folder to the build folder created by - npm run build, containing the actual compiled code for your application. Example: "public" : "build".

(or)

2. Replace the files in the public folder with your build files

It would be nice to see an actual way to avoid this during the firebase init setup.

Rheta

Answer 25

In my case (react-project), I deleted the index.html file in my public folder and deleted my dist folder too, then re-ran firebase init and npm run build, firebase deploy all over before it worked.

Escorial

Answer 26

I was able to reproduce the error. I overrode the index.html on firebase init. After that, had the same page:

Welcome Firebase Hosting Setup Complete (...)

And the crazy thing is that, somehow, builds were not overriding the /public folder.

SOLUTION: I just deleted the /public folder - the ng serve was blanc - and then I ran ng build and ng serve. Everything works perfectly so far.

Republicanize