Angular 6.0 firebase hosting deploy not working

Question

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.

score 40 · Accepted Answer · answered May 15 '18 at 23:27

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

answered May 15 '18 at 23:27

dotGitignore

1,597
2
15
34

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](https://pwa.ng/) you might find interesting. – abraham May 17 '18 at 18:56
1

or.. just edit firebase.json, change "public: dist" to "public: dist/your_project_folder" – raonirenosto Aug 30 '18 at 17:20
1

It works for me. It took effect after a couple of minutes I deployed – Haifeng Zhang Oct 08 '18 at 05:45
1

Overwrite? N fixed the problem – Dev M May 23 '19 at 14:40
changing the public directory from dist to dist/TheProject_Folder did the trick. Thanks a ton !! – Mohammed Aamir K Sep 19 '19 at 14:34
so basically, firebase added another index.html under dist which is not created by `ng build --prod` and under firebase.json we have to specify the index.html inside the `dist/your-project-name` - I hope Firebase documentation says this in its future documentation revisions. – Gel Jan 15 '20 at 14:01
Thanks so much! Now I know that I needed to point to the dist folder. Legend – dave o grady Aug 27 '20 at 01:39

score 21 · Answer 2 · edited Jun 14 '19 at 21:59

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

Editing firebase.json to update public folder was key, it worked like charm. Thanks :) — BeingSuman, Dec 07 '18 at 05:22

score 9 · Answer 3 · answered Mar 30 '19 at 18:04

9

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

answered Mar 30 '19 at 18:04

sagarDotNetMaster

155
1
6

2

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

score 4 · Answer 4 · answered Jun 01 '18 at 09:07

4

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

answered Jun 01 '18 at 09:07

joka00

2,357
1
10
27

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 05 '18 at 05:35

score 1 · Answer 5 · edited Sep 18 '19 at 09:52

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.

edited Sep 18 '19 at 09:52

thor

21,418
31
87
173

answered Sep 18 '19 at 09:34

Sushma Suresh

11
1

ishandutta2007 · Answer 6 · 2019-05-09T13:14:46.137

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

edited May 09 '19 at 13:14

answered May 09 '19 at 12:58

ishandutta2007

16,676
16
93
129

score 0 · Answer 7 · answered May 18 '19 at 10:16

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

score 0 · Answer 8 · answered May 21 '19 at 10:48

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.

score 0 · Answer 9 · answered Sep 17 '19 at 15:04

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

answered Sep 17 '19 at 15:04

Mihai Cristian

115
2
10

Muhammad Harith · Answer 10 · 2021-06-15T04:39:01.000

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.

What file should be used for Realtime Database Security Rules? firebase_rules.json
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.

Angular 6.0 firebase hosting deploy not working

10 Answers10

Linked