DEV Community

Julien Lengrand-Lambert
Julien Lengrand-Lambert

Posted on • Originally published at lengrand.fr on

About integrating Firebase in your Elm project

About integrating Firebase in your Elm project

During my last article, I explained the basics about Elm ports, having finally learnt how to use them myself.

The reason for me to finally get into ports is that I wanted to use Firebase in my new Elm project, and finally have a side-project with no backend to manage and maintain.

This article introduces the elm-firebase repository that I made, who can be used as a basis to support Firebase in your own application.You can try the demo here.

Why another integration, you say?

  • If you Google for elm and firebase, you'll find a few hits. For example elmfire comes first for me, followed by another elm-firebase. Except both those projects haven't been updated for years, and none support 0.19 (and the latest Firebase Cloud Firestore, to my knowledge).
  • I wanted to learn more about ports myself, and build my own integration as a learning experience.
  • I'm actively trying to create some more elm resources online to spread my love for the language :)
  • I'm working on a side project with a friend that needed a database :D.

So what is it doing?

Using the demo app I built, you can :

  • Log in using Google OAuth2. Users are saved using Firebase Authentication
  • The log in stays cached, so you don't have to log in all the time
  • You can save text messages to the database, and see the list of messages you wrote. This part makes use of the new Firebase Cloud Firestore.
  • Basic security is in place, meaning that you cannot see the messages of your fellow friends.

Here is a short video of the capabilities :

Demo of elm-firebase's (limited) capabilities

So how do I get started?

The easiest is probably to head to the repository, clone it and read the README!

Hope the repository, or even this article was useful to some of you :). If you have comments, improvements or simply wanna chat do hit me up on Twitter :).

Top comments (0)