firebase Tutorial => Getting started in Firebase with a simple...

Example

This example will demonstrate how to get started with Firebase in your web apps with JavaScript.

We are going to add a text child in our Firebase Database and display it in realtime on our web app.

Lets get started.

Go to the Firebase Console - https://console.firebase.google.com and create a new project. Enter the project name, Country/region and click on create project.

Now create a file index.html on your computer. And add the following code to it.

  <body>
      <p>Getting started with Firebase</p>
      <h1 id="bigOne"></h1>
      <script>
            // your firebase JavaScript code here
      </script>

  </body>

Now go to your project on Firebase Console and you can see this
Now click on Add Firebase to your web app. You will the following pop up, click on copy button

Now go to your index.html file and add the snippet to the script section as following

  <body>

    <p>Getting started with Firebase</p>
    <h1 id="bigOne"></h1>

    <script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js"></script>
    <script>
      // Initialize Firebase
      var config = {
        apiKey: "apiKey",
        authDomain: "authDomain",
        databaseURL: "databaseURL",
        storageBucket: "storageBucket",
        messagingSenderId: "messagingSenderId"
      };
      firebase.initializeApp(config);
    </script>
  </body>

Now you have completed adding Firebase initialization code. Now we need to get our text value from the database.

To do that add the following code (Initialize Firebase already added in last step. Don't re-add) inside the script in index.html

  <script>

      // Initialize Firebase
      var config = {
        apiKey: "apiKey",
        authDomain: "authDomain",
        databaseURL: "databaseURL",
        storageBucket: "storageBucket",
        messagingSenderId: "messagingSenderId"
      };
      firebase.initializeApp(config);
  
      // getting the text value from the database
      var bigOne = document.getElementById('bigOne');
      var dbRef = firebase.database().ref().child('text');
      dbRef.on('value', snap => bigOne.innerText = snap.val());

  </script>

Now we are all done with the index.html file and now let's go the Database in Firebase Console.
You will see that its blank and empty right now. Lets add the a text child in the database and add any value to it.
Now click on ADD button.
Now go the RULES section in the Database.
For development purpose right now, we will right now enable all the read and write queries.
```
  {
    "rules": {
        ".read": "true",
        ".write": "true"
      }
  }
```
Now open index.html in the browser
You will see the text value on your page as following -
Now if you go back to your database and change the text child value to something else, you will see that the text in the browser also changes without any refresh or reload. This is how realtime database works on Firebase.