Steps To Fix Firebase Hosting 🔥 Shows Welcome Screen Instead of index.html Page Of Angular Web 🌏Application

Introduction

Today, I will show you the steps to publish an Angular application to Firebase Hosting and steps to fix the issue if a welcome screen comes after deploying the  Angular project in Firebase Hosting. Firebase is a mobile and web application development platform developed by Firebase, that was acquired by Google in 2014. 
 
Note
Before going through this session, please visit my below-mentioned sessions related to Angular app.
  1. Deploying Angular 7 App To Firebase Hosting (With Extra Tips) 
  2. Steps To Build 🏗️ Angular 7 (Beta) Desktop 🖥️ Apps With Electron 
This article is part 2 of my previous Angular article based on Covid-19 live status using rest API. Here is the link.
 
Here I have made a few modifications in app.component.html file by applying Bootstrap css and jquery. So, for this I need to install Bootstrap and jQuery from npm.
 
Run the below command using terminal,
 
npm install --save bootstrap jquery
 
Finally open the angular.json file and add the file paths of Bootstrap CSS and JS files as well as jQuery to the styles and scripts array under the build target.
 
Steps To Fix Firebase Hosting 🔥 Shows Welcome Screen Instead index.html Page Of Angular Web 🌏Application
 
Then open package.json to checkthe  installed version of Bootstrap CSS and jQuery. 
 
Steps To Fix Firebase Hosting 🔥 Shows Welcome Screen Instead index.html Page Of Angular Web 🌏Application
 
Code ref. of app.component.html
  1. <nav class="navbar navbar-light" style="background-color:#f60;">   
  2.   <span class="navbar-brand mb-0 h1 text-light">Coronavirus (COVID-19) Live Status</span>  
  3. </nav>  
  4.   
  5. <br>  
  6.   
  7. <div class="card-deck">  
  8. <div class="card text-white bg-warning">  
  9.   <div class="card-header">Total Confirmed Worldwide</div>  
  10.   <div class="card-body">  
  11.     <p class="card-text">{{TotalConfirmed}}</p>  
  12.   </div>  
  13. </div>  
  14. <div class="card text-white bg-danger">  
  15.   <div class="card-header">Total Deaths Worldwide</div>  
  16.   <div class="card-body">  
  17.     <p class="card-text">{{TotalDeaths}}</p>  
  18.   </div>  
  19. </div>  
  20. <div class="card text-white bg-success">  
  21.   <div class="card-header">Total Recovered Worldwide</div>  
  22.   <div class="card-body">  
  23.     <p class="card-text">{{TotalRecovered}}</p>  
  24.   </div>  
  25. </div>  
  26. </div>  
  27.   
  28. <br>  
  29.   
  30. <div class="form-group">  
  31.   <label for="countryId" class="col-form-label" style="font-size: large; color:blue;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">Country Name</label>  
  32.   <select (change)="getCountry($event.target.value)" class="form-control" id="countryId">  
  33.     <option selected>Choose Country....</option>  
  34.     <option *ngFor="let country of countries" value={{country.Slug}}>  
  35.     {{country.Country}}  
  36.     </option>  
  37.   </select>   
  38. </div>  
  39.   
  40.   <button (click)="getCoronaData()" class="btn btn-primary">Seach Corona Data</button>  
  41.     
  42.   <br>  
  43.   <br>  
  44.   
  45.   <h5 class="text-center" style="color:blue;">Country Wise Till Date : {{Date|date:'medium'}}</h5>  
  46.   
  47.   <div class="table-responsive">  
  48.   <table class="table table-bordered">    
  49.     <tr>    
  50.         <th style="background-color: Yellow;color: blue">Country</th>  
  51.         <th style="background-color: Yellow;color: blue">Total Confirmed</th>    
  52.         <th style="background-color: Yellow;color: blue">Total Recovered</th>    
  53.         <th style="background-color: Yellow;color: blue">Total Deaths</th>    
  54.         <th style="background-color: Yellow;color: blue">Total Active</th>    
  55.     </tr>      
  56.         <tr>    
  57.             <td style="color: red; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">{{Country}}</td>  
  58.             <td style="color: red; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">{{Confirmed}}</td>    
  59.             <td style="color: red; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">{{Recovered}}</td>    
  60.             <td style="color: red; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">{{Deaths}}</td>    
  61.             <td style="color: red; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">{{Active}}</td>    
  62.         </tr>  
  63. </table>  
  64. </div>  
  65.   
  66. <br>  
  67.   
  68. <footer>  
  69.   <p  class="bg-dark text-light text-center p-5 m-0">© Copyright {{ Year }} - Author : Satyaprakash. All rights reserved.</p>  
  70. </footer>  
Code ref. of app.component.ts
 
This file is modified for making the current year dynamic in the footer section.
  1. export class AppComponent {  
  2.   
  3.   countries:any  
  4.   country:any  
  5.   Confirmed:Number  
  6.   Recovered:Number  
  7.   Deaths:Number  
  8.   Date:Date  
  9.   Active:Number  
  10.   Country:String  
  11.   TotalConfirmed:Number  
  12.   TotalDeaths:Number  
  13.   TotalRecovered:Number  
  14.   Year: number = new Date().getFullYear();  //This line 
Steps to be followed.
 
Step 1
 
If you want to deploy the app the  first time, just kwwp production as it is and keep it ready to get hosted on Firebase Hosting. So, for that visit my link .
 
Step 2
 
After deployment of the Angular project, if the welcome screen comes instead of actual output of index.html of Angular app, then you should follow the below steps. The welcome screen looks like as mentioned below,
 
Steps To Fix Firebase Hosting 🔥 Shows Welcome Screen Instead index.html Page Of Angular Web 🌏Application
 
The reason behind the welcome screen, is because the index.html has modified itself when you selected "Y" while initializing the Firebase. It has basically replaced your own index file with this one. Check and replace the index file and next time, do not overwrite index.html file. It will work.
 
Step 3
 
Copy src/index.html to inside dist folder or dist\covid19-status folder for replacing the index.html.
 
Image1 for copying index.html,
 
Steps To Fix Firebase Hosting 🔥 Shows Welcome Screen Instead index.html Page Of Angular Web 🌏Application
 
Image2 for pasting index.html,
 
Steps To Fix Firebase Hosting 🔥 Shows Welcome Screen Instead index.html Page Of Angular Web 🌏Application
 
Step 4
 
Then delete .firebase folder of your Angular application.
 
Steps To Fix Firebase Hosting 🔥 Shows Welcome Screen Instead index.html Page Of Angular Web 🌏Application
 
Step 5
 
Then delete .firebaserc file of your Angular application using Visual Studio code.
 
Steps To Fix Firebase Hosting 🔥 Shows Welcome Screen Instead index.html Page Of Angular Web 🌏Application
 
Step 6
 
Then run the below commands in sequence. The below commands are described in detail in the previous article. Follow the above link.
 
ng build --prod --aot 
 
Steps To Fix Firebase Hosting 🔥 Shows Welcome Screen Instead index.html Page Of Angular Web 🌏Application
 
npm install -g firebase-tools
 
Steps To Fix Firebase Hosting 🔥 Shows Welcome Screen Instead index.html Page Of Angular Web 🌏Application
 
firebase login 
 
It asks for some information as per the image.
 
Steps To Fix Firebase Hosting 🔥 Shows Welcome Screen Instead index.html Page Of Angular Web 🌏Application
 
After successful login it shows the below details as per the image.
 
Steps To Fix Firebase Hosting 🔥 Shows Welcome Screen Instead index.html Page Of Angular Web 🌏Application 
Steps To Fix Firebase Hosting 🔥 Shows Welcome Screen Instead index.html Page Of Angular Web 🌏Application
 
firebase init
 
It asks for some information as per the image.
 
Steps To Fix Firebase Hosting 🔥 Shows Welcome Screen Instead index.html Page Of Angular Web 🌏Application
 
Steps To Fix Firebase Hosting 🔥 Shows Welcome Screen Instead index.html Page Of Angular Web 🌏Application
 
Steps To Fix Firebase Hosting 🔥 Shows Welcome Screen Instead index.html Page Of Angular Web 🌏Application
 
 
Steps To Fix Firebase Hosting 🔥 Shows Welcome Screen Instead index.html Page Of Angular Web 🌏Application
 
Steps To Fix Firebase Hosting 🔥 Shows Welcome Screen Instead index.html Page Of Angular Web 🌏Application
 
Steps To Fix Firebase Hosting 🔥 Shows Welcome Screen Instead index.html Page Of Angular Web 🌏Application
 
Steps To Fix Firebase Hosting 🔥 Shows Welcome Screen Instead index.html Page Of Angular Web 🌏Application
 
firebase deploy 
 
Steps To Fix Firebase Hosting 🔥 Shows Welcome Screen Instead index.html Page Of Angular Web 🌏Application
 
Finally, that's it -- you can now visit this URL to see your Angular project up and running and use Firebase Hosting service for deployment. If you are still getting the same page just press 'CTRL + F5' and it will clean the cache.
 
The url of Covid-19 live status using Angular as mentioned below,
 
 
Step 7
 
Check Firebase console project directory in .firebaserc.
 
Steps To Fix Firebase Hosting 🔥 Shows Welcome Screen Instead index.html Page Of Angular Web 🌏Application
 
Step 8
 
Check firebase.json for public folder which contains the dist path and destination section contains the index.html inside dist path.
 
Steps To Fix Firebase Hosting 🔥 Shows Welcome Screen Instead index.html Page Of Angular Web 🌏Application
 
OUTPUT
 
Steps To Fix Firebase Hosting 🔥 Shows Welcome Screen Instead index.html Page Of Angular Web 🌏Application
 
This Angular app is responsive and adjustable to all types of device screens.
 
Steps To Fix Firebase Hosting 🔥 Shows Welcome Screen Instead index.html Page Of Angular Web 🌏Application
 
Link To Source Code
 
 

Summary

 
In this write-up, we have learned how to:
  • Register to Firebase Console
  • How to set-up the project inside Google Firebase
  • Make a connection with Google Firebase by using Visual Studio Code
  • What will be the project file structure in Visual S code after a successful deployment to Firebase
  • Check the status of your uploaded project in Firebase
  • Generate the Live Url after deployment of the Angular application
  • Fix the issue if welcome screen comes after deploying Angular project in Firebase Hosting


Similar Articles