Connecting Front End to Bank End

Session 19

[Class Date]

{data}

putting it all together

1.2 Setup Google Firebase

• ext, setup access rules for database in Database > Rules. You should get this result.

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

1.3 Setup Google Firebase

• This means when someone want to read or write the data into database he must be authorized by server.

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

1.3 Setup Google Firebase

• init()  will create a connection between web app and firebase.

  Establish the firebase connection in  root.js  by calling  init()  from  firebase.js  in constructor.

export const init = () => {
  let config = {
    apiKey: "XXXXXXXXXXXXXXXXXXXXXX",
    authDomain: "realtime-todo-app.firebaseapp.com",
    databaseURL: "https://realtime-todo-app.firebaseio.com",
    storageBucket: "realtime-todo-app.appspot.com",
    messagingSenderId: "XXXXXXXXXXXX"
  }
  firebase.initializeApp(config)
  database = firebase.database()
}

1.4 data structure

src/components/root.js
import React, {Component} from 'react'
import {init as firebaseInit} from 'javascripts/firebase'
import {browserHistory} from 'react-router'
import Routes from './routes'
export default class Root extends Component {
  constructor(props) {
    super(props)
    firebaseInit()
  }
render() {
    return (
      <Routes history={browserHistory}/>
    )
  }
}

folder structure

• You app should be run with the same result. Nothing change in UI

  Congratulation, we just linked the firebase and web app.

  Finally, your  src  folder should look like this

src/
 |- components
   |- App/
   |- root.js
   |- routes.js
 |- javascripts
   |- firebase.js

2.1 Data structure

• Data structure in this case means what are the data look like in our database. What are we going to store.

Questions?