This post is the last in the “Making a server logs available online” series.

You can read about uploading the server logs to Firebase in part 2 and how to setup Firebase account in part 1.


Now when I had my logs available in the cloud, I just needed to add a web interface to display them to the users. Fortunately, Firebase makes it incredibly busy, the whole “project” only required 136 lines of code.

The template

I started building my app with the following template:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="form_sign_in.css">

Adding Firebase

First of all, I needed to add the link to the Firebase library

<script src=""></script>


The Firebase initialisation code went inside of the <script> tag of the <body>, like so:

var config = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  storageBucket: ""

Adding the Log in page

I’ve used jQuery to help me reduce the amount of code I needed to write, so I had to add the library into the header.

<script type="text/javascript" src=""></script>

Here is the HTML code of my “login container”

<div id="login_screen" class="container">
  <div class="form-signin">
    <h2 class="form-signin-heading">Please sign in</h2>
    <div id="login_screen_error" class="error_box" style="display: none"></div>
    <input id="username_field" type="text" class="form-control" placeholder="Email address">
    <input id="password_field" type="password" class="form-control" placeholder="Password">
    <button class="btn btn-lg btn-primary btn-block" id="btn_login">Sign in</button>

And the jQuery logic to handle the user input and displaying the error message if required (the awesome part is that the error message itself is supplied by Firebase).

  $("#btn_login").click(function() {
  var username = $("#username_field").val();
  var password = $("#password_field").val();
  firebase.auth().signInWithEmailAndPassword(username, password).then(function () {
  }).catch(function(error) {
    var login_screen_error = $("#login_screen_error");;

Displaying the logs

All I wanted to do is getting the latest 20 logs and displaying them on the page. Firebase couldn’t make it easier for me!

Html portion:

<div id="main_screen" style="display:none;" class="container">
  <div class="panel panel-primary">
  <div class="panel-heading">
  <h3 class="panel-title">Latest application logs</h3>
  <div class="panel-body" id="logs_content">

JavaScript/jQuery potion:

firebase.database().ref('/logs/' + username).limitToLast(20).on('value', function (snapshot) {
  var logs_content = $("#logs_content");
  var result = snapshot.val();
  for (var property in result) {
    if (result.hasOwnProperty(property)) {
      logs_content.append("<div>" + result[property] + "</div>");

Making it pretty

I have used bootstrap library to add responsiveness to my webpage:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>