Today we're going to set up basic Firebase support in our application, focusing on the JavaScript side of things. Once that's done, we can introduce ports to interact with it from Elm in the next episode. Let's get started.

Project

We're starting with dailydrip/elm-svg-editor tagged before this episode.

The first thing we need to do is create a new project in the Firebase console.

Once that's done we can click "Add Firebase to your web app" and we'll be presented with a JavaScript snippet like the following:

<script src="https://www.gstatic.com/firebasejs/3.6.8/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "your-api-key",
    authDomain: "elm-svg-editor.firebaseapp.com",
    databaseURL: "https://elm-svg-editor.firebaseio.com",
    storageBucket: "elm-svg-editor.appspot.com",
    messagingSenderId: "your-sender-id"
  };
  firebase.initializeApp(config);
</script>

However, we'd like to use webpack to load firebase rather than fetching it from Google's CDN. We can add the npm package and require it:

npm install --save firebase
vim src/index.js

Then we need to require firebase and configure it:

// ...
// Firebase
let firebase = require('firebase')
firebase.initializeApp({
  apiKey: "your-api-key",
  authDomain: "elm-svg-editor.firebaseapp.com",
  databaseURL: "https://elm-svg-editor.firebaseio.com",
  storageBucket: "elm-svg-editor.appspot.com",
  messagingSenderId: "your-sender-id"
})
// ...

Now Firebase is set up in our app. We'll go into the console, pick the database, and set its rules to be publicly readable and writeable, because we don't want to bother with authentication yet:

// These rules give anyone, even people who are not users of your app,
// read and write access to your database
{
  "rules": {
    ".read": true,
    ".write": true
  }
}

We're using the database feature in firebase, so we'll follow the Firebase database setup guide.

Let's add a reference to the database in our JavaScript, and for now we'll expose it publicly on the window so we can play with it a bit in the Chrome developer tools:

vim src/index.js
// ...
let database = firebase.database()
window.database = database
// ...

Now we can play with it in the console:

database.ref("svgs/1").set({
  foo: "bar",
  baz: "whee"
})

Now if you look in your Firebase console, you can see that we've created a new node in the tree for a given SVG document. The idea will be that we either redirect to a new UUID or use the UUID provided in the URL - that way we can specify the bit of data that we're editing for a given session by the URL.

We can also listen to data changes. We'll do this in the console, logging any changes out to the console as they happen:

database.ref('svgs/1').on('value', (snapshot) => {
  console.log(snapshot.val())
})

If you then go into the Firebase console and update your database, you'll see the new value printed out to your console. We can use this to introduce collaboration on the documents.

Summary

Today we saw the basics of Firebase, and we set it up in our application. From here, we can move on to using it to store and load our Model when we start the application. We'll have persistence and collaboration pretty easily, though we'll have to ultimately rework our Model a little to make it nice.

I hope you enjoyed it. See you soon!

Resources