Firebase not running index.html file

问题

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.

回答1:

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.

回答2:

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.

The only way to fix this is to re-produce your own index.html file. If you do not have a backup of or other means of re-producing your index.html file... well... too bad!

Generally, the steps of a firebase setup with webpack (or other build tools) go a little like this:

firebase login
firebase init
your-build-command-here
firebase deploy

Note that you only need to perform the first two steps the first time when you setup building on that machine (or maybe when a new firebase revision has been released). To re-deploy, it's simply:

your-build-command-here
firebase deploy

UPDATE

In the latest version it at least asks you if it should override or not :)

回答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

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

回答4:

For angular 2 or 6 with cli, use . (dist) as the public directory,

$ ng build --prod
$ cd dist/
$ firebase init
 ? What do you want to use as your public directory? .
 ? Configure as a single-page app (rewrite all urls to /index.html)? Yes
 ? File ./index.html already exists. Overwrite? No
$ firebase deploy

回答5:

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

回答6:

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.

回答7:

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

回答8:

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

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

回答9:

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

Select the following after scrolling down

  Hosting: Deployed Site

回答10:

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

回答11:

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.

回答12:

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.

来源：https://stackoverflow.com/questions/38486069/firebase-not-running-index-html-file

标签

html

firebase

firebase-hosting

firebase-tools