Installation & Setup in JavaScript

The Firebase Realtime Database is a cloud-hosted database. Data is stored as JSON and synchronized in realtime to every connected client. When you build cross-platform apps with our Android, Apple platforms, and JavaScript SDKs, all of your clients share one Realtime Database instance and automatically receive updates with the newest data.

Prerequisites

If you haven't already, install the Firebase JS SDK and initialize Firebase .

Create a Database

  1. Navigate to the Realtime Database section of the Firebase console . You'll be prompted to select an existing Firebase project. Follow the database creation workflow.

  2. Select a starting mode for your Firebase Security Rules :

    Test mode

    Good for getting started with the mobile and web client libraries, but allows anyone to read and overwrite your data. After testing, make sure to review the Understand Firebase Realtime Database Rules section.

    To get started with the web, Apple, or Android SDK, select testmode.

    Locked mode

    Denies all reads and writes from mobile and web clients. Your authenticated application servers can still access your database.

  3. Choose a location for the database.

    Depending on the location of the database , the URL for the new database will be in one of the following forms:

    • DATABASE_NAME .firebaseio.com (for databases in us-central1 )

    • DATABASE_NAME . REGION .firebasedatabase.app (for databases in all other locations)

  4. Click Done.

When you enable Realtime Database , it also enables the API in the Cloud API Manager .

Configure Realtime Database Security Rules

The Realtime Database provides a declarative rules language that allows you to define how your data should be structured, how it should be indexed, and when your data can be read from and written to.

Add the Realtime Database JS SDK and initialize Realtime Database

You must specify your Realtime Database URL when initializing the JavaScript SDK.

You can find your Realtime Database URL in the Realtime Database section of the Firebase console . Depending on the location of the database , the database URL will be in one of the following forms:

  • https:// DATABASE_NAME .firebaseio.com (for databases in us-central1 )
  • https:// DATABASE_NAME . REGION .firebasedatabase.app (for databases in all other locations)

Initialize the SDK using the following code snippet:

Web

 import 
  
 { 
 initializeApp 
 } 
 from 
  
 "firebase/app" 
 ; 
  import 
  
 { 
 getDatabase 
 } 
 from 
  
 "firebase/database" 
 ; 
 // 
 TODO 
 : 
 Replace 
 the 
 following 
 with 
 your 
 app 
 's Firebase project configuration 
 // 
 See 
 : 
 https 
 : 
 // 
 firebase 
 . 
 google 
 . 
 com 
 / 
 docs 
 / 
 web 
 / 
 learn 
 - 
 more 
 #config-object 
 const 
 firebaseConfig 
 = 
 { 
 // 
 ... 
 // 
 The 
 value 
 of 
 ` 
 databaseURL 
 ` 
 depends 
 on 
 the 
  location 
 of 
 the 
 database 
 
 databaseURL 
 : 
  "https:// DATABASE_NAME 
.firebaseio.com" 
 
 , 
 }; 
 // 
 Initialize 
 Firebase 
 const 
 app 
 = 
 initializeApp 
 ( 
 firebaseConfig 
 ); 
  // 
 Initialize 
  Realtime 
 Database 
 
 and 
 get 
 a 
 reference 
 to 
 the 
 service 
 const 
 database 
 = 
 getDatabase 
 ( 
 app 
 ); 

Web

 import 
  
 firebase 
 from 
  
 "firebase/app" 
 ; 
  import 
  
 "firebase/compat/database" 
 ; 
 // 
 TODO 
 : 
 Replace 
 the 
 following 
 with 
 your 
 app 
 's Firebase project configuration 
 // 
 See 
 : 
 https 
 : 
 // 
 firebase 
 . 
 google 
 . 
 com 
 / 
 docs 
 / 
 web 
 / 
 learn 
 - 
 more 
 #config-object 
 const 
 firebaseConfig 
 = 
 { 
 // 
 ... 
 // 
 The 
 value 
 of 
 ` 
 databaseURL 
 ` 
 depends 
 on 
 the 
  location 
 of 
 the 
 database 
 
 databaseURL 
 : 
  "https:// DATABASE_NAME 
.firebaseio.com" 
 
 , 
 }; 
 // 
 Initialize 
 Firebase 
 firebase 
 . 
 initializeApp 
 ( 
 firebaseConfig 
 ); 
  // 
 Initialize 
  Realtime 
 Database 
 
 and 
 get 
 a 
 reference 
 to 
 the 
 service 
 const 
 database 
 = 
 firebase 
 . 
 database 
 (); 

You're ready to start using the Firebase Realtime Database !

Next Steps

Design a Mobile Site
View Site in Mobile | Classic
Share by: