Firebase does not run index.html file

Question

I am a fairly new programmer going through the Firebase tutorial. I went through steps 1-5 of the tutorial ( https://codelabs.developers.google.com/codelabs/firebase-web/#5 ). I added js code to the "Add Firebase to my web application" jt code and configured the Firebase CLI. However, when I start the Firebase server, everything seems to work differently than the code from the index.html file does not show.

I enter the correct directory and my console says: "The server is listening on: http: // localhost: 5000. " But on localhost 5000 it shows the general "Welcome to Firebase Hosting: you see this because you have successfully configured Firebase Hosting. Now it's time to do something extraordinary!" not the application interface code in the index.html file. This is the only html file in my directory. I seem to be missing something very simple. Thank you for your help.

Answer 1

I understood my answer. The index.html file that was submitted was located in a "public" file that was created during the "firebase init" phase. I replaced this html placeholder file with the one that was for my application.

Answer 2

The firebase init problem is incredibly rude. It just overrides the index.html file that was in your public folder ... no confirmation, no security mesh, nothing.

The only way to fix this is to re-create your own index.html file. Unless you have a backup or other means to re-create the index.html file ... well ... too bad!

Typically, the steps for configuring firebase with a web package (or other build tools) look something like this:

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

Please note that you need to complete the first two steps the first time you set up builds on this computer (or, possibly, when a new firebase edition is released). To redeploy, simply:

• your-build-command-here
• firebase deploy

UPDATE

In the latest version, he at least asks you whether to redefine it or not :)

Answer 3

Firebase hosting does not show application?

There may be two reasons for this problem.

1st step:

Make sure your public folder (defined in your firebase.json) 'dist' containing index.html has not been changed by the firebase initialization command, if so, replace it with the original index.html project.

for reference (the distance is standard, but yours may differ)

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

2nd step:

Be sure to configure your base href in the index.html project

as

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

and other files included

 <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 of running the command - deploy Firebase

enjoy! ;)

Answer 4

For angular 2 or 6 with cli use . (dist) as a 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 

Answer 5

To deploy your Angular application in a simple and quick Firebase tutorial, you can find it here .

In the process of initializing firebase, type N , when the question " Does the file dist / index.html already exist. Overwrite?" , and your page will be displayed as it should be.

Answer 6

In the shared folder option, write dist / your-folder-name. This will allow you to visualize your index file, which is located in your folder.

Answer 7

In my case, when I run the ng build --prod it creates a subfolder in the dist folder. Suppose my project is called FirstProject. I can see a subfolder named FirstProject inside the dist (dist / FirstProject) folder. Set dist / [subDirectory] as the shared directory.

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

This solved my problem.

Answer 8

For everyone who comes across this. Try to run in incognito mode - the browser was cached for me.

fooobar.com/questions/17713878 / ...

Answer 9

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

Select the following after scrolling down

  Hosting: Deployed Site 

Answer 10

Please follow the step

 npm install -g firebase-tools 

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

 firebase login ng build --prod firebase init firebase deploy 

Answer 11

In my case, firebase used the wrong directory , see Also here: CLI firebase did not recognize the current project directory for 'firebase init'. While I expected firebase to put all the created files in the directory of my project, it was completely disabled and put all the files in my / Users / MyUserName directory and deployed the wrong index.html from there.

Here's how to fix it (reinstalling firebase is not required, as suggested in a related post):

• delete all created firebase files from the / Users / MyUserName directory (.firebaserc, firebase.json, index.html and dist-folder)
• run firebase init in the project directory
• use dist / projectname as a public directory
• Configure as a one-page Yes application
• do not overwrite index.html (if you do, be sure to run "ng build" again before deployment)
• fire base deployment

By the way, for everyone using Angular 7, this tutorial on deploying an angular 7 application for Firebase hosting was really useful for me.

Answer 12

I faced a similar situation. When we run firebase init, he asks a couple of questions. At that time, we mention the directory path from where firebase will take all the files for deployment. Make sure the directory contains index.html.