All language subtitles for 003 Setting up the Firebase SDK_en

In this lecture, we're going to install the Firebase SDK.

The Firebase SDK is a library that will assist us with communicating with Firebase as products.

SDK is short for software development kits.

It'll make our lives easier.

In the resource section of this lecture, I provide a link to the installation page for the SDK.

This page goes into detail on how you can install Firebase.

The SDK can be installed with NPM.

Let's try installing it.

Switch over to the command line and the command line.

Run the following command and PM i firebase at eight.

After a few moments, Firebase should have been installed.

Let's start configuring Firebase into our project.

Before adding the configuration, we should ask ourselves, where should we write the configuration?

It's possible to configure Firebase directly from the main JS file.

On the other hand, I think it would be a good idea to separate the configuration into another file.

Separation will reduce clutter in the main JS file in the includes directory.

Create a file called Firebase dot js.

You don't have to call it this, but I recommend keeping the name short and relevant.

Next, open the main JS file.

We'll import the file into the main JS file, otherwise the code inside the Firebase file will never

execute below the import statement for the validation file.

Import the Firebase module.

We can begin to configure Firebase switch back to the Firebase File.

The first thing we'll do is import the Firebase module.

We're importing a specific module from the Firebase Library called App.

The App Module is the core of the Firebase SDK.

Regardless of what services or products you plan on using, the core must always be imported.

The core module is what will help you with configuring and connecting to Firebase.

If we were to omit the app from the path, we'd be importing every Firebase feature.

This includes features we aren't actively using or need.

This will unnecessarily increase the bundle size of our app.

The proper way of importing Firebase is to individually import what we need.

The Firebase module is broken up into packages by passing in Firebase alone, you're telling it to import

all of its packages.

In almost all cases, you will need to import the app package.

This package is the core of Firebase.

The rest of the features won't be usable unless you import this first.

If you're on version nine of Firebase, the path must be updated to Firebase Slash Compat slash app.

You can verify the version of Firebase by viewing the package.

For those of you on older versions of Firebase, the compatibility path does not need to be added.

Otherwise.

Every time we import Firebase, you should always modify your path to include this directory.

The next step is to grab the connectivity details from Firebase in the browser.

Navigate to the console for the music project.

You should be on the overview page.

You can navigate there by clicking on the menu item in the sidebar.

At the top of the page, Firebase will ask us to select a platform.

We can select iOS, Android, Web or Unity.

We'll want to click on the one that says Web.

A pop up will appear asking us for more details about our project.

It's going to ask us to assign a nickname.

We'll give the project the nickname Music.

It'll ask us if we'd like to host the app on Firebase.

We'll look into that in a later section.

Let's leave this option unchecked.

We can enable hosting later if we'd like.

Let's keep moving forward.

After a while, Firebase will spit out a configuration object you can copy and paste.

We're not going to copy the entire code snippet.

Just copy the Firebase config variable.

Go back to the editor.

Paste the variable into the Firebase configuration file.

Let's go over the object together.

The very first property is the API key.

The API key is how will be able to connect to Firebase.

It's how we let Firebase know that we're the ones sending the request and not some other application.

The next property is the authentication domain.

Firebase will provide us with a URL where we can send the authentication information.

It's what we'll need if we want to add authentication to our app.

Next, there's the project ID.

It's followed by the storage bucket.

A bucket is used to describe the location where the files are stored and application can have multiple

buckets.

But we're using the free plan, which comes with one bucket.

One bucket is plenty for the application we're building.

The next property is the sender ID.

Firebase comes with a feature to push notifications between applications instantly.

We won't be using this feature, but it is there if you need it.

I'm going to remove this ID since we won't be using it.

Firebase won't throw an error if it's unavailable.

Lastly, we have the app ID property.

Firebase allows for multiple apps to be connected to a project.

We're building a web app.

If we added an iOS or Android app, they would be assigned unique IDs.

Now that we have the configuration object, we can initialize the app by calling the Firebase Dot Initialize

App function.

We can pass the configuration object into the function.

In some cases, the code snippet you copied from Firebase will try calling the function without accessing

it from the Firebase object.

If that's the case, update this line to match mine.

We're not going to structure this function.

This function will initialize firebase by connecting to it.

It'll return an instance of firebase we can use to communicate with it.

Let's export the instance under the default namespace.

This step is important.

Otherwise, the instance will not be accessible to our components.

Whenever we need to use Firebase, we can import this module, switch over to the browser to check if

everything is working.

The page loads.

Normally there's one last step we'll want to take.

Head back to the editor.

At the top of the file.

Import the fire base slash off module.

We're importing the authentication module because we'll be using Firebase to authenticate the user.

If we'd like the authentication service to be available, we'll need to import it.

I want to point out that we're not assigning the module a name.

It's not necessary because Firebase is smart enough to extend the core.

It will not export another object for you.

We're finished.

We've successfully integrated the Firebase SDK into our project.