firebase Getting started with firebase Getting started in Firebase with a simple Hello World web app in JavaScript


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. enter image description here

  • 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 enter image description here

  • Now click on Add Firebase to your web app. You will the following pop up, click on copy buttonenter image description here

  • 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. enter image description here

  • Now click on ADD button.

  • Now go the RULES section in the Database. enter image description here

  • For development purpose right now, we will right now enable all the read and write queries.

      {
        "rules": {
            ".read": "true",
            ".write": "true"
          }
      }
    

    enter image description here

  • Now open index.html in the browser

  • You will see the text value on your page as following -
    enter image description here

  • 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.