Transcript

          So then we've got our Firestore database all set up now with a collection inside that and a couple of

documents inside that.

The next logical step, I think, would be to connect to this database and the back end in general from

the front end, our website in the browser.

Now, to do that, we need to copy a little snippet of code from Firebase from the back end into the

front end of our website, and that's going to allow us to connect to this back end and use services

like the Firebase Firestore database.

So to get that snippet of code, go to project overview.

First of all, then click on this icon and that's going to give you this snippet.

Now there's a couple of things in this snippet.

The first one is the Firebase Library itself, so we need to load that in so we can use Firebase in

our application.

The next thing is this script with a config option.

Inside that and inside that config option we have this API key.

Now this API key is a bit like an identifier.

It tells the front end of our website which backend to connect to over here.

This project that we've created on Firebase because automatically it doesn't know which one to connect

to.

It needs some kind of API key to do that and that is what this is for.

Then at the bottom of this config object we have Firebase initialize app and we pass in that config.

So that is basically setting up our Firebase app on the front end to connect with the back end.

So we need to copy all of this.

Let's copy and then go to our code.

So over here, notice I've got chapter 16 open inside that an index file, not much in here at the minute,

just an H1 and a link to sandbox dot JS, which also has nothing in it.

So we need to paste in this code that we just took above sandbox dot js because we're going to eventually

use this stuff in sandbox dot JS So if I was to save this right now and then head over to the browser,

you're going to notice in the console that we get this warning and it says it looks like we're using

the development build of the Firebase SDK.

Now that basically means that we're loading in all of the development build right here, the whole Firebase

package.

So that's loading in things like firebase functions, authentication, the database, etcetera.

Now we don't need all of that stuff and that's why it's warning us.

All we need is the Firebase app, the core library, and also the Firebase Firestore.

So what we could do is load these two things in separately.

So to do that, call this first one Firebase hyphen app that is the core library that we always need.

Then I'm going to copy this line and I'm going to paste it underneath.

And this time we want Firebase Firestore as well.

So that is loading in the Firestore library.

And now if I save this, we're no longer loading in all of the library.

Just these two parts of it.

So we no longer get that warning.

All right.

So then now we have our config and we're setting up the application, the Firebase app.

There's only one more thing to do here, and that is to get a reference to our database or to initialize

the database, if you like.

Now to do that, we're going to store it in a constant called DB and set it equal to Firebase.

And we have access to Firebase because of this library that we loaded.

Then use a method called Firestore.

And we have access to this because of this library.

And what this does is initialize our Firestore connection and it stores that connection inside this

DB constant.

So every time in the future we want to communicate with the database to either add or read data from

it.

ET cetera.

We're going to use this DB constant, so that's pretty much it.

As far as setting up Firebase goes, there's one more thing I want to do in this lesson, and that is

just to create a very basic template for the rest of this chapter.

Now this is not going to be a project of any kind, but I do want a little template so it at least looks

semi decent in the browser.

So to do that, I'm going to first load in bootstrap.

So go to get started and then copy the CDN over here for the CSS.

I'm going to paste that in just above the title and then inside the body over here we want to create

some kind of HTML template.

Now, instead of me writing this out from scratch, I'm literally just going to copy this from my GitHub

repo and I'm going to delete the H1 and paste this stuff in.

So all we have is first of all a div here with a class of container keeping everything within a central

column, a margin in the Y direction of strength.

Five Then we have an H2 to say recipes a little Ul with two tags in it and then we have a form at the

bottom.

We have a label in that form and it says Add a new recipe.

Then we have a Div for an input group and an input group in bootstrap is just a selection of different

elements that form one single input group and you'll see that in a second.

So inside we have an input field which is of type text, and this is where we can add a new recipe.

And then we have a div with a class of input group amend which adds something to the end of an input

group and that thing is going to be a submit button.

It's got a value of Add and these classes just to style it.

So if I save this and preview now, it's going to look something like this in the browser.

So it's not going to win design of the year, but at least it looks a little better now.

So the whole idea of this chapter now will be to use the Firestore database to be able to add new recipes

to that database and then show them out here in real time.

And we'll start that process by reading data from the database in the next lecture.