Database wont sync after importing (web)

After importing the initial_messages.json through the firebase console in the browser and adding the relevant code to main.js below:

// Loads chat messages history and listens for upcoming ones.
FriendlyChat.prototype.loadMessages = function() {
  // Reference to the /messages/ database path.
  this.messagesRef = this.database.ref('messages');
  // Make sure we remove all previous listeners.
  this.messagesRef.off();

  // Loads the last 12 messages and listen for new ones.
  var setMessage = function(data) {
    debugger // NOTE THE DEBUGGER HERE TO FREEZE PAGE IN CHROME DEV TOOLS
    var val = data.val();
    this.displayMessage(data.key, val.name, val.text, val.photoUrl, val.imageUrl);
  }.bind(this);
  this.messagesRef.limitToLast(12).on('child_added', setMessage);
  this.messagesRef.limitToLast(12).on('child_changed', setMessage);
};

the setMessage function is never called which means that the sample application is most likely not connected to the database online.

var config = {
    apiKey: "asdfasdfasdfasdfasdf",
    authDomain: "testapp-ed989.firebaseapp.com",
    databaseURL: "https://testapp-ed989.firebaseio.com", // I've checked this url is the same
    storageBucket: "testapp-ed989.appspot.com",
  };
  firebase.initializeApp(config);

I’ve initialized firebase in the bottom of my index.html within a <script> and in the database tab of my console, the url is https://testapp-ed989.firebaseio.com/ which is the same as in my config.

The only thing that I’m not sure about is the database configurations which I dont think does anything different about connecting to the database as long as I’m logged in.

{
  "rules": {
    "users": {
      "$uid": {
        ".read": "$uid === auth.uid",
        ".write": "$uid === auth.uid"
      }
    }
  }
}

The imported messages wont display regardless of how many times I reload/re-serve/deploy.

[nicolasgarnier]

It’s very strange because by default, on new projects, the Database rules are:

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

Which should work for the code. Step 9 is actually an optional step for that reason (the app would still work the same if you skipped it). For example could you try to revert the rules to the rules above? Things should still work.

[JeffreyCheng92]

Okay I see the issue here now. It wasn’t the tutorials fault at all but when I went to import the initial_messages.json it said the rules had to be changed before the database could be used.

which led me to copy this in my database.rules.json as well as in the online rules.

Thanks for clearing all of this up!