Skip to content

Latest commit

 

History

History
86 lines (56 loc) · 3.49 KB

README.md

File metadata and controls

86 lines (56 loc) · 3.49 KB
Raw

Elm Firebase

trackgit-views

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 :

Setting up the Database and Auth

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

How to setup Google Sign-In

  • 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!

Settings page of Firebase project

  • 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

Happy hacking!