Create an Angular 2 CLI App with Firebase Social Authentication Facebook, Google, Github and Twitter (by srinivas.tamada@gmail.com (Srinivas Tamada))


There is a lot of fun in building an AngularJS application and after you finish the application, for others to see your application you will need to deploy the project on some web server such as NodeJS, Amazon AWS, Heroku,etc,. But, this requires a long procedure for the deployment and sometimes it can even be expensive. Google provides free Firebase for deploying

AngularJS projects

. Firebase Hosting provides fast and secure static hosting for your web app. This Hosting also provides social login authentication and gives your project a subdomain for deploying. for Facebook, Google and Twitter.

This tutorial explains how to create and deploy angular CLI(Angular-cli is a powerful tool which is already pre-configured, it comes with code generator and it is easy to use with set of cli commands.) app using Google material to Firebase, also explains how Firebase provides custom domain support and social login authentication. Take a quick look at the live demo.

Live Demo

Install Angular Command-line

Open your terminal or command prompt and execute the following command, this will install AngularCli globally. Before that you must setup your machine with latest Node.js software.

$ sudo npm install angular-cli -g

Create and Launch a Angular2 Project

Here ng new command will take care the project files. Use ng serve command to launch the application.

ng new angularFirebaseProject $ cd angularFirebaseProject $ ng serve

Project Launch

Angular Cli project default port is 4200. Open your browser and launch the URL http://localhost:4200

Get Started

This project requires login and home pages. Login page contains social login buttons and Home page for displaying user details line name, email etc.

Generate Login Component

ng generating command will help you to create login component files, this will update app.module.ts all of the dependencies.

ng generate component login-page installing component   create src/app/login-page/login-page.component.css   create src/app/login-page/login-page.component.html   create src/app/login-page/login-page.component.spec.ts   create src/app/login-page/login-page.component.ts   update src/app/app.module.ts

Generate Home Component

$ ng generate component home-page

You will find all of the generated files in src folder.

Routing

We need to configure login and home pages with routing.

app.module.ts

Go to src/app/app.module.ts and import angular router module for url configurations.

import { BrowserModule } from@angular/platform-browser‘; import { NgModule } from ‘@angular/core‘; import { FormsModule } from ‘@angular/forms‘; import { HttpModule } from ‘@angular/http‘; import { RouterModule, Routes } from@angular/router‘; import { AppComponent } from ‘./app.component’; import { LoginPageComponent } from ‘./login-page/login-page.component’; import { HomePageComponent } from ‘./home-page/home-page.component’; const routes: Routes = [ { path: ‘home’, component: HomePageComponent }, { path: ”, component: LoginPageComponent } ]; @NgModule({ declarations: [     AppComponent,     LoginPageComponent,     HomePageComponent ], imports: [     BrowserModule,     FormsModule,     HttpModule,     RouterModule.forRoot(routes) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

app.component.html

Modify application component file with router outlet. Now Login page works at http://localhost:4200 and Home page works at http://localhost:4200/home

<h1>My Project</h1> <router-outlet></router-outlet>

Styling – Angular 2 Material Design

Lets do styling with angular material, execute following command to install angular material project.

$ npm install –save @angular/material@2.0.0-beta.1

app.module.ts

Import angular material module in app.module.ts

import { MaterialModule } from@angular/material; imports: [     BrowserModule,     FormsModule,     HttpModule,     RouterModule.forRoot(routes),     MaterialModule.forRoot() ],

Create a folder SASS

Create a SASS folder in src for stying.

angular-cli.json

Modify angular cli configuration file in following way.

"styles": [     "styles.css" ],

to

"styles": [     "styles.css",     "./scss/styles.scss" ],

styles.scss

Include following code in styles.scss

@import~@angular/material/core/theming/all-theme‘; @include md-core(); $primary: md-palette($md-blue); $accent: md-palette($md-red); $theme: md-light-theme($primary, $accent); @include angular-material-theme($theme);

You can use following colors for your theming.

app.component.html

Now modify application component file with angular material tags.

<header>   <md-toolbar color="primary">     <span> 9lessons Firebase Social Login Project</span>   </md-toolbar> </header> <div class="app-content">   <md-card>     <div class="app-content">       <router-outlet></router-outlet>     </div>   </md-card> </div> <footer>   <md-toolbar>     Srinivas Tamada Production   </md-toolbar> </footer>

styles.scss

You can add custo

Other code ….. ….. * {   margin: 0px;   padding: 0px } footer {   bottom: 0 !important;   position: fixed;   width: 100%; } .app-content {   padding: 20px;   md-card {     margin: 20px;   } }

Deploy to Firebase

First you need to create a project in Google Firebase, go to Google Firebase console and setup the project.

Install Firebase Tools

Install Firebase tools globally.

$ sudo npm install -g firebase-tools

Configure Firebase

Now login Firebase with your Google account. This command will redirect to Google account login page.

$ firebase login ? Allow Firebase to collect anonymous CLI usage information? No Visit this URL on any device to log in: https://accounts.google.com/o/oauth2/auth?client_id=xxxxxxxxxxxxx Waiting for authentication… Success! Logged in as youremail@gmail.com

Initialize Firebase

Go to your angular2 project folder and execute following command.

$ firebase init

Choose your firebase project by clicking down arrow.

Setup Distribution Folder

Default publishing directory is "public", replace this with "dist"

? What do you want to use as your public directory? dist ? Configure as a single-page app (rewrite all urls to /index.html)? Yes Wrote dist/index.html i Writing configuration info to firebase.json… i Writing project information to .firebaserc… Firebase initialization complete!

This process will create firebase.json initialization file.

Production Build

Use this command to build the final build, this will generate dist folder with all required packages.

$ ng build -prod

Firebase Push

$ firebase deploy

Now launch your Google Firebase application URL.

Part 2: Angular Firebase Social Authentication

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

TOP