32

I am looking for a tutorial on how to properly setup the firebase-tools hosting on my angular 6.0 projects, and what I found is always like this.

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

but after doing this, this is always what I've got.

default

10 Answers 10

40

I found that the ng build --prod will create a dist and an another subfolder under this where the project location is.

dist
|--TheProject_Folder
|  |--assets|index.html - This index html is not using.
|--index.html - This is the html generated in the firebase init

So what I did is to initialize again the firebase init and change the public directory from dist to dist/TheProject_Folder:

- What do you want to use as your public directory? dist/TheProject_Folder
- Configure as a single-page app (rewrite all urls to /index.html)? Yes
- Overwrite? No
7
  • 3
    Angular v6 CLI projects are making it easier to have multiple apps with shared codebases. Hence the new folder within dist. I recently launched a new guide for Angular on Firebase you might find interesting.
    – abraham
    May 17, 2018 at 18:56
  • 1
    or.. just edit firebase.json, change "public: dist" to "public: dist/your_project_folder" Aug 30, 2018 at 17:20
  • 1
    It works for me. It took effect after a couple of minutes I deployed Oct 8, 2018 at 5:45
  • 1
    Overwrite? N fixed the problem
    – Dev M
    May 23, 2019 at 14:40
  • changing the public directory from dist to dist/TheProject_Folder did the trick. Thanks a ton !! Sep 19, 2019 at 14:34
21

Below is step by step process to host angular6.0 app on firebase

1] npm install -g firebase-tool Install firebase tool

2] firebase login Use the CLI tools to login in Firebase.

After connecting to our account/Gmail-account, we will get the firebase CLI Login Successfull message in browser

3] firebase init

Here are the answers to the questions Firebase tools will ask:

? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to setup 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 (This is important! Angular creates the dist folder.)

? Configure as a single-page app (rewrite all urls to /index. html)? Yes

4] ng build --prod

This will create a brand new dist/ folder in our project with the files necessary to launch our app.

5] Before deploying the app, go to firebase.json file and specify your project public field like this

"public": "dist/your_project_name",

6] Now deploy the project in firebase using below command

firebase deploy

After depolying you will get the below message

  • Deploy complete!

Project Console: https://************ [you will get the actual url name rather than stars]

Hosting URL: https://************* [you will get the actual url name rather than stars]

you can access the website by the URL given in Hosting URL

1
  • 1
    Editing firebase.json to update public folder was key, it worked like charm. Thanks :)
    – BeingSuman
    Dec 7, 2018 at 5:22
9

it worked me after i remove cache and refresh browser, thanks.

4
  • 2
    Thanks man. I tired from deploying and trying until have read your comment and clear the cache.
    – Alaa.Kh
    Jun 13, 2019 at 12:49
  • I can't believe how many times I deployed fruitlessly, trying to get this to work. Thanks user698314!
    – Kim
    Aug 16, 2019 at 11:45
  • helped me out hugely!!
    – Rob W
    May 30, 2020 at 10:35
  • THIS WORKED! I really cant thank you enough! Mar 12, 2021 at 4:31
4

The second possible way is just to change outputPath in angular.json to dist, so the line will look like this "outputhPath": "dist"

1
  • This fixed it for me. Before it was creating a new folder in the dist that contained all the built files as well.
    – David
    Oct 5, 2018 at 5:35
1

It worked when I cleared the cache with ctrl+shift+R hard reset on the web! Make sure the correct index.html file is being deployed on firebase.

0

@bajran may have elborated all steps in detail but if you are migrating from angular 5 to 6, the only step that matters is, changing "public": "dist", to "public": "dist/your_project_name", in firebase.json

0

There's one more issue that can lead to this very same page. When we init the project by using the

firebase init

command and following the procedure, it by default overwrites the index.html file. So, if already built(to get the dist/_Project_Folder) the index.html file is overwritten. Built it again after

firebase init 
ng build --prod
0

The problem is that on the question

File dist/apps/ditectrev/index.html already exists. Overwrite?

If you'll type Y for Yes, then it'll create its own index.html file, generated by Firebase. Giving this N for No I was able to keep my original index.html, which was generated after using ng build --prod in dist/apps/ditectrev. Note: I'm using Nx workspace, but the same should apply for other Angular projects. In normal Angular project case it would be different path, which would be simply dist.

0

If u don`t have a single page app (like me), when Firebase ask

File dist/apps/ditectrev/index.html already exists. Overwrite?

Write N. I have tried so many times before figure out

0

You can check if there is a firebase.json and .firebaserc files created. If not, this solution is for you.

Step 1: After you firebase deploy and its not working, you can create the firebase.json file and paste this code :

{ "database": {
"rules": "firebase_rules.json"},
"hosting": {
"public": "dist/"yourdistfilename",
"ignore": [
  "firebase.json",
  "**/.*",
  "**/node_modules/**"
  ]  
 }
}

Step 2 : Create firebase_rules.json and paste this code:

{  "rules": {
    ".read": false,
    ".write": false
 }
}

Note that you name the file firebase.json and firebase_rules.json

Step 3: in terminal run this firebase init database. This question will appear and follow the answer.

  1. What file should be used for Realtime Database Security Rules? firebase_rules.json
  2. File firebase_rules.json already exists. Do you want to overwrite it with the Realtime Database Security Rules (y/N) y (to overwrite and update to latest code)

Step 4: Then you notice that .firebaserc have been created.

Step 5: You need to run firebase init and firebase deploy one more time. Now you can finally see your project!

It's not much but hope this can help.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.