Deploy Angular app to Firebase and GitHub pages

Creating an angular app is a fun, but when it comes to deployment everyone struggle a lot and if you want to test your app on live server there is a cost attached to it, don't worry will be using free and easy hosting for testing our angular app on live server. Firebase provide free hosting for angular apps and GitHub pages is also a place where you can host static website. This tutorial will cover deploying angular app to Firebase and Github Pages.

Firebase Demo                                       GtHub:Pages Demo

FIREBASE DEPLOY

Deploying angular app to firebase we will use firebase-tools. The firebase CLI provides variety of tools for managing, viewing and deploying to Firebase projects. 

Install Firebase Tools

The firebase CLI requires Node.js and npm, If you have not installed yet follow the instructions on https://nodejs.org/ , and make sure you have nodejs version 5.10.0 or greater to work with firebase CLI.

 :~$ npm install -g firebase-tools  

Login to Firebase

Deploying angular app to firebase projects through firebase CLI you first need to authenticate your self. Let’s do it using below command.

 :~$ firebase login  

After firing above command google OAuth page will open in your default browser as below.

Here you have to choose which account you want to use for firebase.

Firebase CLI need access to above data, click on ALLOW

After successful login you can see above message on your terminal

Initialize Firebase

Move to your angular project root directory we are using here last tutorials angular oauth project if you missed it please clone the project from github/askadu/angular-firebase-oauth you can also go through the angular oauth article “Angular2 Firebase for Google, Facebook, Twitter and GitHub” then move to project root directory and type below command to initialize firebase.

 :~$ firebase init

 You need to choose Hosting as chosen in above screen-shot.
Once you initialize firebase in your project it will generate two files namely `.firebaserc` and `firebase.json`

.firebaserc

{
  "projects": {
    "default": "ngoauth-e36e9"
  }
}

firebase.json

{
 "hosting": {
   "public": "dist",
   "ignore": [
     "firebase.json",
     "**/.*",
     "**/node_modules/**"
   ],
   "rewrites": [
     {
       "source": "**",
       "destination": "/index.html"
     }
   ]
 }
}

Production Build

Angular production build basically creates 3 types of file that is index.html, *.js and *.css in dist folder. Let's do it using below command.

 :~$ ng build --prod  

Deploy angular app

Now we are good to deploy our app to firebase projects. To deploy your application, simply run the following command form your project root directory.

 :~$ firebase deploy  

This will deploy your project to <firebase-app-name>.firebaseapp.com As in this case url would be https://ngoauth-e36e9.firebaseapp.com

GITHUB:PAGES DEPLOY

Github Pages is a feature provided by github to host static website for free, it’s very simple you have to create gh-pages branch and push all your content there and you are done. This tutorial will use angular-cli-ghpages to deploy our angular app to GithubPages.

Let’s install angular-cli-ghpages

 :~$ npm install -g angular-cli-ghpages  

Move to project root directory and create new branch as below, do checkout to gh-pages branch.

 :~$ git branch gh-pages

 :~$ git checkout gh-pages  

Now build the angular project with flag --base-href to set correct base path.

 :~$ ng build --prod --base-href “https://<username>.github.io/<repo>/”  

Then it’s as simple as using angular-firebase-ghpages to deploy your app to github pages. (ngh is shorthand for angular-cli-ghpages)

 :~$ ngh  

Yup!! You deployed your angular app on github pages. Now access the app through https://<username>.github.io/<repo-name> As in this case url would be https://askadu.github.io/angular-firebase-oauth