Firebase Deploy complete but website not shown

Question

it's my first time using Firebase. I deployed my angular project with the Firebase CLI, but when i navigate to the specified domain, i only see

Welcome
Firebase Hosting Setup Complete
You're seeing this because you've successfully setup Firebase Hosting.
Now it's time to go build something extraordinary!

Here's my process to deploy:

firebase login
  ✔  Success! Logged in as [...]
firebase init
  select Hosting, select project, chose 'dist' as public dir
  ✔  Firebase initialization complete!
ng build --prod
firebase deploy
  ✔  Deploy complete!

This is now over 60 minutes ago, and i can't figure out why it's not online. Is 60 minutes not enough time for firebase? Can anyone share his experience or give me a hint what could be the reason why it's not online?

Thank you in advance

Recondite

Check your dist folder. After your build, is there an index.html in the dist root or is it in another subfolder like dist/your-project-name/index.html? – Geri

there are two things in the dist-directory: index.html and my-project-name-folder. The my-project-name-folder also has an index.html inside, so i tried specifying dist/my-project-name/ as public directory, but still the same problem – Recondite

i don't exactly know what i did wrong the first time, but after trying it again it works. when i find out what the problem was on my first try, i'll post it. thank you Mr Martens – Recondite

Answer 1

I solved this by following below steps:

1. Do firebase init step properly by giving correct inputs.

   During firebase init when it asked What do you want to use as your public directory?public

   As I have given public as a answer

   Make sure you give proper link.

2. run firebase deploy again. It should work.

Happy coding!!

Mither

Answer 2

Just a bit more of detail. As you are using Angular, after you build your App to production, it creates (normally) a /dist/ProjectName folder where it puts your files. NOTE: if you want to change this, please refer to the option --outputPath on https://angular.io/cli/build

Sometimes (as newbies) we miss the right folder when asked on the firebase.init command...

No worries, it writes those settings at firebase.json, just open it and look for:

  "hosting": {
    "public": "dist/ProjectName",

Now change it to the desired path and there you go ;) Now you can repeat the firebase.deploy and it should all work.

Hope it helps

No it doesn't help because people don't use visual studio code, they use android studio like it was intended. There are no ng commands and there is certainly no dist

Towrey

Answer 3

Solution for flutter web dev

In the firebase.json file, provide web build path: "public": "build/web".

hosting: {
  "public": "build/web",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ]
}

Rollicking

Answer 4

After running firebase init you can rebuild your app by running ng build then run firebase deploy to deploy your app to firebse, it again shows welcome screen but wait for 10 to 20 minutes because server is setting up the app and take some time to up and running the app then open app.

Cracy

Answer 5

I had the same problem. I realized that I had the two index.html positions within the dist folder, as @Tim Martens suggested in the question commentary.

Then, in the firebase.json file, I changed:

"public": "dist/name-of-my-project",

...and it worked!!

Lashawna

Answer 6

instead of

 firebase deploy

use

 firebase deploy --only hosting

Seventieth

Answer 7

If deploy is completed but page not found then

go into dist folder like :"cd dist" and firebase deploy

It worked for me

Mapp

Answer 8

{

"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"]

}

your firebase json can be like above. Then change it like below.

{
“hosting”: {
“public”: “dist/your_app_name”,
“ignore”: [
“firebase.json”,
“**/.*”,
“**/node_modules/**”
],}

and then try firebase deploy

Whatnot

Answer 9

I had a similar problem with my web page in Visual Studio, what was giving me this error was that I didn't have a file called 'index.html', after renaming my file to index.html, I ran Deploy again and it worked.

Stratton

Answer 10

This work for my Angular 18 proyect: When you run the ng build command check the dist folder, there could be an extra folder called browser move the files from there and paste in the sub directory e.g dist/app/browser/files, move all the files from the browser and paste in app like so dist/app/files then firebase deploy it should work.

Speak