In this post we will be showing you how to set up Firebase on your machine to work with your project and we will also show you how to create new Firebase applications from the Firebase console.
Now we have completed the process of installing Firebase and @angular/fire to our machine. The next thing we’re going to go ahead and do is to create the application on our Firebase console. So, let’s head to the browser and see how we can do this. So, here We are just at the Firebase home page and we are just going to click Sign in. And we are going to enter my email address and password. Remember, you need a Google account to work with Firebase, so ensure that you do create a Google account if you don’t have one and then we are going to log in with this, put in my credentials. And now we enter and now I can see my profile picture and I can see the option to go to the console. So, we are going to go ahead and go to the console now. Now when in my console, you an see that I see all the applications that I’ve created in the past. You’re probably not going to see any applications since you’ve never worked with Firebase. However, you should still the option to add a new project and that’s what we’re going to use, so we are going to click Add new project and we are going to say this project is called Todo. we are going to accept the terms and conditions and you also have the option to change the project ID and the locations. For now, we are going to leave all of that and just click Create Project and this should take a couple of seconds to provision our application.
And at this point, the Firebase has gone ahead and provisioned our run application and I can just click Continue to go to that application. The next thing you should see is a screen that looks very familiar to what I have on screen. Now of course it is worth noting that at the time of this article, this was the design that the Firebase console had so it’s not impossible that by the time you view this post, that the design has slightly changed but the options should still be very familiar. On left-hand side, we can see a number of products that we can work with via Firebase. You can see authentication database, storage and all of that. So, for example, I might have a desktop application that uses the same database but also I could have my Todo application using the same database. The Firebase console allows me a way to provision these two different applications so that in the case that I lose support for one or I no longer want one of those applications to be able to use my database, I can just remove it instead of just having one shared provisioning detail across all my applications. So, let’s say call this todo-ionic. Register application. And remember, there is a checkbox that allows you to see if you want to use this for hosting, we’re just going to omit that. As soon as that process completes, you can see that the console shows you some provisioning details, now these are details that are going to be necessary when you want to connect your application with Firebase.
The next step is to take these details and go ahead and configure our Angular application with them. So, we are to copy this particular object here. Right here, I’ll copy those details in my clipboard and then I’ll go ahead to the code and then I can just make this a little bit larger so that we can see a lot and then the first thing I need to do is to look for my environment folder. Now this should be a top-level folder and inside of my environments folders, we are going to go to environments.ts and just after the production: false, I’ll add another line here and I’ll add firebase and I’ll paste that object. Now if you’re used to working with Angular, then the environment.ts file should be pretty familiar but if you’re not, let’s go ahead and explain briefly. Now the environment.ts file is a file that allows you to specify environmental variables for your application. It has multiple different environments, for example, by default you have development which is environment.ts and then production which is environment.prod.ts. Angular allows you a way to create different development environment. The environment.ts file by default works with the development mode, so whenever you’re serving your application with Angular, it normally reads its values from this file. When you intend to build for production, make sure you come here and you put the correct production details as well. Now we can go ahead and we can save this. The next thing we’re going to go and do is to open up our app.module.ts and configure the Angular package. So, the first thing we’re going to go ahead and do is just here on line six, we are going to import the @angular/fire Module, so I’ll say from @angular/fire and then from this path, I’ll get the @angular/fire Module. Now I go to my imports block and I add @angular/fire Module initializeApp. I’ll call the initializeApp method and this wants me to pass an object. Now if you remember clearly, we already copied the object for our configuration and we put it in our environment.ts file. So we can go ahead and now and access this environment object and then call the property Firebase to reference it. So, after this line, we are just going to do import from environments/environment, so I would say environment here and I will just call that environment and I’ll say .firebase.
Now let’s do a quick recap of what we’ve done so far. The first thing we did is we created our Firebase on the Firebase console and then we then provision our Todo Ionic application. We then got those details and then we pasted those details in our environment.ts file. We then used the @angular/fire Module, imported it into our application and then we referenced the environment.ts file and obtained the Firebase property which would then resolve all the details of our Firebase application. Now @angular/fire makes it very easy for us to work with Firebase in an Angular context
As we go ahead with more and more development with the help of Firebase Admin, you’re going to see how we’re going to do a lot of great stuff with this particular package.