If you have come to this article, it means you are keen to learn new technology and that too Firebase. I love Firebase because it provides all basic but important features of any web application. Take for example, authentication, which is cumbersome and risky if not implemented with utmost care. And when we have the integration of Angular and Firebase, it becomes a lot easier for a developer to build such crucial modules in less time with minimal efforts.
In this article we will create a simple Angular application using Firebase. I am going ahead with the understanding that you know the benefits of Firebase and have little knowledge about it. There are plenty of posts out on the web if you are behind.
Step 1:
Install Angular CLI (if not installed).
npm install -g angular-cli
Step 2:
Create new Angular 4 project. By default now angular CLI will create Angular 4 project so you need not fret.
ng new firebase-authentication
Step 3:
Check whether the newly created app is working fine. We will run the app on Development server.
cd firebase-authentication
ng serve --open
If you see above page then you have successfully created Angular 4 application. Cheers!!!
Step 4:
Add Bootstrap for styling. We will use CDN links as below and add them inside <head> section of index.html page:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Now add Bootstrap navigation bar in src/app/app.component.html to make our app look good.
Step 5:
Create project in Firebase Console. To create the project, you need to have your account on it. You can use your Google account to sign-in if you don't want to take much pain in setting up an account.
Click on Add Project.
Give appropriate name and select the country. I have given firebase-authentication as a project name and selected country as India.
You will see below screen once the project is created successfully.
Step 6:
Install AngularFire2 and Firebase through npm. You need to be inside your project and then run below command.
npm install angularfire2 firebase --save
Step 7:
Setup @NgModule
Open src/app/app.module.ts file and inject the Firebase providers and app specific Firebase configuration. Copy the configuration from Firebase Console.
You need to copy only properties mentioned inside config object of Firebase console. No need to have <script> tags in .html file as we have already downloaded the package through npm in above step.
If you have reached this stage that means you have successfully setup the Firebase configuration. To assure yourself that you Angular 4 app is still working fine, run below command and see if you can still see Bootstrap navbar.
ng serve --open
So this article was all about setting up the ground for Authentication that we will see in upcoming posts.
If you face any difficulty in the setup please feel free to drop in your questions in comment section of this post.
Setup @NgModule
Open src/app/app.module.ts file and inject the Firebase providers and app specific Firebase configuration. Copy the configuration from Firebase Console.
You need to copy only properties mentioned inside config object of Firebase console. No need to have <script> tags in .html file as we have already downloaded the package through npm in above step.
If you have reached this stage that means you have successfully setup the Firebase configuration. To assure yourself that you Angular 4 app is still working fine, run below command and see if you can still see Bootstrap navbar.
ng serve --open
So this article was all about setting up the ground for Authentication that we will see in upcoming posts.
If you face any difficulty in the setup please feel free to drop in your questions in comment section of this post.
Comments
Post a Comment