How to Deploy Angular Application on Firebase Hosting example

deploy-angular-application-on-firebase-hosting-feature-image

Firebase Hosting is production-grade web content hosting, we can quickly deploy web apps by a single command. In the tutorial, we guide how to deploy Angular application on Firebase Hosting.

Related posts:
Angular 6 dynamic Navigation Bar – add/remove Route dynamically

Technology

– Angular
– Firebase Hosting

Goal

We use Firebase Hosting to deploy Angular application ->

deploy-angular-6-on-firebase-hosting---automate-build-deployment

deploy-angular-application-on-firebase-hosting-web-page

Practice

Create Firebase Project

Login to Firebase Account then create a Firebase project as below:

Build Angular Project

– Get Angular’s Sourcecode, then build with below commandline:

ng build --prod --output-path angularapp

deploy-angular-6-on-firebase-hosting---build-angular-project

-> result:

deploy-angular-6-on-firebase-hosting---build-angular-project-result

Install Firebase Tool

– Use below cmd to install Firebase Tool:

npm install -g firebase-tools

deploy-angular-application-on-firebase-hosting-install-firebase-tools

Firebase Login

Use Firebase’s CLI tools to login to Firebase:

firebase login

-> Your browser will open to authentication:

deploy-angular-application-on-firebase-hosting-authen-successfully-console

deploy-angular-application-on-firebase-hosting-authen-successfully

Firebase Init

Link our local Angular app to our Firebase Project with below cmd:

firebase init

The list of questions Firebase tools will ask:

  • ? Are you ready to proceed? Yes
  • Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.
    ( ) Database: Deploy Firebase Realtime Database Rules
    ( ) Firestore: Deploy rules and create indexes for Firestore
    ( ) Functions: Configure and deploy Cloud Functions
    >(*) Hosting: Configure and deploy Firebase Hosting sites
    ( ) Storage: Deploy Cloud Storage security rules
  • ? Select a default Firebase project for this directory:
    [create a new project]
    [don’t setup a default project]
    > grokonez-angulardeploy (AngularDeploy)
    jsa-cloud-firestore (JSA Cloud Firestore)
    jsa-firebaseauth-6d45a (JSA FirebaseAuth)
    (Move up and down to reveal more choices)
  • ? What do you want to use as your public directory? (public) angularapp
  • ? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y
  • ? File angularapp/index.html already exists. Overwrite? No

deploy-angular-6-on-firebase-hosting---build-angular-project-init-project

-> Firebase CLI will create 2 files for linking:

.firebaserc file -> Sets the Firebase project we’re linking to :

firebase.json -> Sets the deployed folder and rewrites :

Firebase Deploy

Now we had build Angular application, and result is folder angularapp. We deploy it by cmd:

firebase deploy

deploy-angular-6-on-firebase-hosting---firebase-deployment

-> Results:

deploy-angular-application-on-firebase-hosting-dashboard

deploy-angular-application-on-firebase-hosting-web-page

Re-Deployment

We just re-build the Angular application to apply the new changes of our implementation. Then use firebase deploy to re-deploy it on Firebase Hosting.

Automate The Build & Deployment

Open the package.json file, then add a new script as below:

Then run the cmd:

npm run deploy

deploy-angular-6-on-firebase-hosting---automate-build-deployment

Sourcecode

AngularDynamicRoutes

By grokonez | December 6, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*