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 show you how to deploy Angular application on Firebase Hosting.

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

Technology

– Angular
– Firebase Hosting

Goal

Video Guide

Objective

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]
    > ozenero-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 :


{
  "projects": {
    "default": "ozenero-angulardeploy"
  }
}

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


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

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:


"scripts": {
	...
	"deploy": "ng build --prod --output-path angularapp && firebase deploy"
},

Then run the cmd:

npm run deploy

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

Sourcecode

AngularDynamicRoutes

42 thoughts on “How to Deploy Angular Application on Firebase Hosting example”

  1. Pingback: Jane
  2. Its like you read my mind! You seem to know a lot about this, like you wrote the book in it or something.
    I think that you can do with some pics to drive the message home a little bit, but instead of that, this is great blog.
    A fantastic read. I’ll certainly be back.

  3. Hey there! This post could not be written any better!
    Reading this post reminds me of my old room mate! He always kept chatting about this.
    I will forward this post to him. Fairly certain he will have a good
    read. Thank you for sharing!

  4. Hello my loved one! I want to say that this post is awesome, great written and come with
    approximately all vital infos. I would like to look more
    posts like this .

  5. I got what you mean , thanks for posting .Woh I am lucky to find this website through google. “Being intelligent is not a felony, but most societies evaluate it as at least a misdemeanor.” by Lazarus Long.

  6. Hi, I do think this is a great blog. I stumbledupon it 😉 I am going to come back once again since I book marked it. Money and freedom is the greatest way to change, may you be rich and continue to guide other people.|

  7. Thank you, I have recently been searching for information approximately this subject for a while and yours is the greatest I’ve came upon till now. But, what about the bottom line? Are you certain concerning the source?

  8. I will right away grasp your rss as I can’t find your e-mail subscription hyperlink or newsletter service. Do you’ve any? Please permit me understand so that I may just subscribe. Thanks.

  9. Great – I should certainly pronounce, impressed with your web site. I had no trouble navigating through all tabs as well as related info ended up being truly easy to do to access. I recently found what I hoped for before you know it in the least. Quite unusual. Is likely to appreciate it for those who add forums or anything, site theme . a tones way for your client to communicate. Excellent task.

  10. Usually I don’t learn post on blogs, however I would like to say that this write-up very compelled me to check out and do so! Your writing style has been amazed me. Thank you, quite great article.

  11. Someone essentially lend a hand to make significantly articles I might state. This is the first time I frequented your website page and up to now? I surprised with the research you made to create this actual publish extraordinary. Wonderful process!

  12. hello!,I like your writing so much! share we keep in touch more approximately your article on AOL? I require an expert in this area to unravel my problem. Maybe that is you! Having a look ahead to peer you.

  13. I have not checked in here for a while because I thought it was getting boring, but the last few posts are good quality so I guess I will add you back to my daily bloglist. You deserve it my friend 🙂

Leave a Reply

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