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.

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.

Code ref. of app.component.html

<nav class="navbar navbar-light" style="background-color:#f60;">
<span class="navbar-brand mb-0 h1 text-light">Coronavirus (COVID-19) Live Status</span>
</nav>
<br>
<div class="card-deck">
<div class="card text-white bg-warning">
<div class="card-header">Total Confirmed Worldwide</div>
<div class="card-body">
<p class="card-text">{{TotalConfirmed}}</p>
</div>
</div>
<div class="card text-white bg-danger">
<div class="card-header">Total Deaths Worldwide</div>
<div class="card-body">
<p class="card-text">{{TotalDeaths}}</p>
</div>
</div>
<div class="card text-white bg-success">
<div class="card-header">Total Recovered Worldwide</div>
<div class="card-body">
<p class="card-text">{{TotalRecovered}}</p>
</div>
</div>
</div>
<br>
<div class="form-group">
<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>
<select (change)="getCountry($event.target.value)" class="form-control" id="countryId">
<option selected>Choose Country....</option>
<option *ngFor="let country of countries" value={{country.Slug}}>
{{country.Country}}
</option>
</select>
</div>
<button (click)="getCoronaData()" class="btn btn-primary">Seach Corona Data</button>
<br>
<br>
<h5 class="text-center" style="color:blue;">Country Wise Till Date : {{Date|date:'medium'}}</h5>
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th style="background-color: Yellow;color: blue">Country</th>
<th style="background-color: Yellow;color: blue">Total Confirmed</th>
<th style="background-color: Yellow;color: blue">Total Recovered</th>
<th style="background-color: Yellow;color: blue">Total Deaths</th>
<th style="background-color: Yellow;color: blue">Total Active</th>
</tr>
<tr>
<td style="color: red; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">{{Country}}</td>
<td style="color: red; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">{{Confirmed}}</td>
<td style="color: red; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">{{Recovered}}</td>
<td style="color: red; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">{{Deaths}}</td>
<td style="color: red; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">{{Active}}</td>
</tr>
</table>
</div>
<br>
<footer>
<p class="bg-dark text-light text-center p-5 m-0">© Copyright {{ Year }} - Author : Satyaprakash. All rights reserved.</p>
</footer>

Code ref. of app.component.ts

This file is modified for making the current year dynamic in the footer section.

export class AppComponent {
countries:any
country:any
Confirmed:Number
Recovered:Number
Deaths:Number
Date:Date
Active:Number
Country:String
TotalConfirmed:Number
TotalDeaths:Number
TotalRecovered:Number
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,

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,

Image2 for pasting index.html,

Step 4

Then delete .firebase folder of your Angular application.

Step 5

Then delete .firebaserc file of your Angular application using Visual Studio code.

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

npm install -g firebase-tools

firebase login

It asks for some information as per the image.

After successful login it shows the below details as per the image.

firebase init

It asks for some information as per the image.

firebase deploy

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,

Coronavirus (COVID-19) Live Status

Step 7

Check Firebase console project directory in .firebaserc.

Step 8

Check firebase.json for public folder which contains the dist path and destination section contains the index.html inside dist path.

OUTPUT

This Angular app is responsive and adjustable to all types of device screens.

Link To Source Code

Coronavirus (COVID-19) 🛡️💉 Live Status Using Angular

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