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
This comment has been removed by the author.
ReplyDelete