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.

 

 

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