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