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

Answer 1

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 :

Answer 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:

1. firebase login
2. firebase init
3. your-build-command-here
4. firebase deploy

Note that 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), and Step #2 (init) the first time to setup development of a new project (i.e. 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
2. firebase deploy

UPDATE

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

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

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