Elm Firebase

A simple repository to show Elm integration with Firebase using ports. You can read more about it in my short blog post introducing it.

You can demo the app here.

This demo runs on Elm 0.19.

Getting started

To run this app locally, you will need to :

• Set up your Firebase Cloud Firestore to handle and receive users and messages.
• Be able to run this repository

Setting up the Database and Auth

• Go to the Firebase console and create a new project
• Setup Google Signin in the Authentication part.

• Create a new Cloud Firestore in locked mode
• Change the Firestore rules so that only logged requests can be written / read.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
		match /users/{userId}/messages/{messageId} {
      allow create, read, update, delete: if request.auth.uid == userId;
    }
  }
}

Using those rules, each user will get its own space, with a messages store inside it. So this doubles down as database setup, and security.

That should be it! If needed, test your rules using the Simulator.

Running the code

To run the code, only a few steps are needed :).

• Clone the repo : $ git clone git@github.com:jlengrand/elm-firebase.git
• Move in the repo : $ cd elm-firebase
• Install necessary dependencies. The easiest way is probably to run $ npm install.
• You will need to create a .env file in your root folder to let the app know about your Firestore project. The .env file looks like this :

ELM_APP_API_KEY="AIzaSyCjjxds-Qrk2Vsjj8qktPuzEgwerggeg"
ELM_APP_AUTH_DOMAIN="test-elm-login-elererge.firebaseapp.com"
ELM_APP_DATABASE_URL="https://test-elm-login-elererge.firebaseio.com"
ELM_APP_PROJECT_ID="test-elm-login-elererge"
ELM_APP_STORAGE_BUCKET=""
ELM_APP_MESSAGING_SENDER_ID="916631954567"
ELM_APP_APP_ID="1:916631954567:web:2a755b103fe23041"

The required information is the same as described in the Firebase config object. The easiest way is to go to the settings page of your project, and scroll down until you see the javascript snippet. It will contain all the information needed.

Note : All the informationm in the .env file is not secret, and can be shared. In fact, it will be accessible to anyone using your app via the console. This is not a problem!

• Run the app : $ npm start. You will be able to test the app at http://localhost:3000!

Deploying

If for some reason you want to deploy the code somewhere, you can run $ npm run build. Now you simply have to serve the content of the build folder, and you're done!

Contributing

Contributions are more than welcome ! You can pick one of the issues of the list or simply create your own :).

Authors

• Julien Lengrand-Lambert

Happy hacking!