Deploying Angular 8 Application to Firebase Hosting

After developing a Angular 8 application next challenge is to host angular application into the production server. In this article we consider, we have an angular 8 application and we are going to deploy our application on Firebase.

I am going to show you step by step guide to host your Angular 8 application on Firebase.

{Read:- 5 Ways to Improve SEO on Your WordPress Site }

Many of the user already try to host their applications Firebase, but after hosting the application the got below message.

Welcome
Firebase Hosting Setup Complete
You’re seeing this because you’ve successfully setup Firebase Hosting. Now it’s time to go build something extraordinary!

{Read:- How to Build a WordPress Site in 1 Day }

Step by step guide to host angular app on Firebase:

1. Create your account to google firebase, Follow the below steps.

• Sign up for a firebase account on Firebase.
• Create a new project, giving it any name you like.

2. Delete your dist folder.

3. Go to your project directory

4. First you need to install the firebase tools. You can use NPM to install the firebase tools with the following command.

5. Now you need to use the CLI to login into firebase.

6. Initialize a Firebase project in this directory (i.e http://localhost:4200/)

{Read:- 10 WordPress Mistakes to Avoid }

7. Now follow the steps showing on common promont

• ? Are you ready to proceed? (Y/n) => Y
• ? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> t
  o toggle all, <i> to invert selection)
  ( ) 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
• ? What do you want to use as your public directory? (public) dist/you_applications_name i.e. dist/current-folder-name (dist/angular8)
• ? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) => Yes
• ? select N for other options. and you will get “Firebase initialization complete!” Message.

8. After completing the above steps, your firebase.json will be generated.

9. Next we need angular to create out dist files

10. Next we will deploy our application using the firebase command

you application has now been deployed and will be available for access through the link provided in the console.

visit https://your-firebase-project-name.firebaseapp.com to see it live!

{Read:- How to configure Horizontal Pod Autoscaler(HPA) in Kubernetes (EKS)? }