Set up a new Firebase project and connect it to your Angular application
You'll learn how to set up a new Firebase project and connect it to your Angular application, by initializing Firebase Authentication, Firestore, Storage, and Firebase Hosting.
With the ng CLI tool you'll run ng add @angular/fire. This kicks off an interactive CLI that lets you pick the Firebase API you want to include in your application.
Instructor: [0:00] We have our Angular application. For component libraries, we have a couple of options like Angular material, Tailwind UI, or in my case Ionic framework. I chose to go with Ionic because I like the default styles that they give you are more geared towards mobile development.
[0:22] For the purpose of this course, any design system that you choose will work the same. To install and initialize Firebase in our Angular application, the AngularFire team provided us with a handy schematic. To use it, we can open the terminal in the root of our application and type ng add AngularFire.
[0:43] Here, it's going to first install the AngularFire package, and once the package is installed, it's going to ask us which of the Firebase APIs we are going to use, so that it can automatically initialize all of those in our application.
[1:05] For this application, we are going to use Firebase authentication, we are going to use the Cloud Firestore database. We are going to use Cloud storage, and we are going to deploy this application to Firebase hosting.
[1:21] If you are logged into the CLI, it's going to show you your email account and the list of projects that you have. If not, it's going to prompt you to login to your Google account. Here, I can choose a Firebase project to use for this application or I can directly create a new Firebase project.
[1:42] We are going to give it a unique ID, and now, it's creating our Firebase application in the Google Cloud platform. We are going to select the default Firebase deployment URL that they give us, and it's asking us to create an application.
[2:07] This application we are creating is the web application that's going to be deployed to Firebase hosting, and once it's done, you see that it just created and updated a bunch of files for us. Let's review.
[2:21] It created the Firebase RC file, which is just showing us the project that we are using. It went into our environment files and it added our Firebase credentials. The firebase.json has the configuration for our hosting application.
[2:41] Lastly, in our app module, it went ahead and imported everything it needs and initialized it. We can see that it imported the Firebase app provider and initialized our application.
[2:57] The initialized app method takes our Firebase credentials. These are the credentials that the schematic added in the environment file. It also initialized authentication, Firestore and storage, since these are the APIs we told the CLI that we were going to use.