Firebase Deploy complete but website not shown

17
votes

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

6
angularfirebasedeploymentfirebase-hosting
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? – Tim Martens
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 – SHRX
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 – SHRX

6 Answers

2
votes

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

0
votes

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.

0
votes

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

0
votes

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

0
votes

instead of

 firebase deploy

use

 firebase deploy --only hosting
0
votes

If deploy is completed but page not found then

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

It worked for me