Haya haya haya ha hay

2-Firebase setup

You are already familiar with database. Here is how we are going to structure our project:

Since we have two pieces of state, we will have to main branches from root, one is comments and the other is posts.

The comments section in the database will have a bunch of children, each having the id of the post it belongs to, and then itself having a bunch of children, each being a comment on that post.

The Posts section will have children, each having an ID, and each id has an image url, description, and id.

So in this course, we do not cover authentication (logging in and out to be able to write to the database) - :/

We will just read and write directly to the database.

You have to change authentication (see minute 4, you didn't do it).

Then go to project overview, add web app (the </> symbol). You will get a different setup than that in the video. You said yes to add hosting (more headache), and got something and posted it into your index.html file in public, before the end of the body tag.

//note, the video guy continued differently too. You then reverted everything you did below till before the line (stopped installation and so on). So I will continue like the guy did.

You posted this into your index.html:

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/7.19.1/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->

<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>

Then you npm installed something:

npm install -g firebase-tools

---

However, here is how the video guy continued (and you did too): he went to the project directory and npm install firebase there.

We still need to configure our project to be able to work with firebase. So go to src and create a folder 'database', and inside it create a new file called config.js, then go to firebase, project overview settings (up there) -> project settings -> go down a bit and choose config (in SDK section or soemthing), and then copy and paste the thing there into your config file, while adding firebase.initializeApp(firebaseConfig) and an import in the beginning:

config.js

import * as firebase from 'firebase'

const firebaseConfig = {
    apiKey: "AIzaSyBSnZYGOpaEgCD6S--Kgdmh3BcjA-lMXRI",
    authDomain: "udemy-project-f4854.firebaseapp.com",
    databaseURL: "https://udemy-project-f4854.firebaseio.com",
    projectId: "udemy-project-f4854",
    storageBucket: "udemy-project-f4854.appspot.com",
    messagingSenderId: "470881351805",
    appId: "1:470881351805:web:e35d5672a5abf9633bd914"
  };

  firebase.initializeApp(firebaseConfig)

We will be adding other stuff (action creators) to the above file later.

It is important to note that now, we will need to start using asynchronous actions (that allow us to deal with a database). To do that we need to install thunk:

npm install redux-thunk

Now we need to apply thunk somewhere between when our functions are dispatched and before they reach the reducer (applied as middleware).

So go to index, and edit the following import:

Index

//before
import {createStore} from 'redux'
//after
import {createStore, applyMiddleware} from 'redux'

then also add the following import to index

Index

import thunk from 'redux-thunk'

And now apply the middleware, also in index:

Index

//before
const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

//after
const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), applyMiddleware(thunk));

Now go to the config file and add this at the end:

config.js - 2 lines addition

  const database = firebase.database()
  export {database}

Now go to Index and import the above database:

Index - import addition

import {database} from '.database/config'

setup done

---