Firebase using Angular4 – Part 4

About The Author

Editorial Team

Agile Soft System’s Editorial Team is comprised of experienced researchers and technical writers who are committed to delivering high-quality content to our readers. Our team members have a diverse range of expertise in various industries, from the latest technologies to trends, and bring their unique perspectives and insights to every article they write.

See author's posts

Firebase Using Angular4

In previous blogs, we have implemented all features of our MVP. Now it’s time to host it on web. We could take a general approach of getting cloud server and hosting app over there. Instead, we can host our app in Firebase itself.

In this post, we will see steps to host our Angular4 app on Firebase Cloud using Firebase Hosting.

FIREBASE CLI

First we need to install firebase cli package.

  1. sudo npm install -g firebase-tools
Login into Firebase cli
  1. firebase login
Above command will open pop up window for Firebase Login.

FIREBASE INIT

Go to root folder of angular4 app. In my case, it is /home/pari/ng/blog/inventory-app
Initialize Firebase project with below command.

  1. firebase init
Choose Hosting when you have been asked to select feature.
  1. ? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.
  2.  ◯ Database: Deploy Firebase Realtime Database Rules
  3.  ◯ Functions: Configure and deploy Cloud Functions
  4. ❯◯ Hosting: Configure and deploy Firebase Hosting sites
After initialization of app, you should see output similar to below screen.
firebase hosting

FIREBASE SERVE

After initialization, we can test app before actually deploying it to Firebase Cloud.
  1. firebase serve
If you get error like below
  1. === Serving from '/home/pari/ng/blog/inventory-app'...
  2.  
  3.  Error: An unexpected error has occurred.

This means firebase init created empty firebase.json file.

Go and edit firebase.json as below

  1. {
  2.   "hosting": {
  3.     "public": "dist"
  4.   }
  5. }

Here, we have specified deployment folder (dist) of angular app which was missing.

Try running firebase serve again.

You should see output like

  1. === Serving from '/home/pari/ng/blog/inventory-app'...
  2.  
  3. i  hosting: Serving hosting files from: dist
  4. hosting: Local server: http://localhost:5000

FIREBASE DEPLOY

We are good to deploy our firebase app.

  1. firebase deploy

Deployment will take some time depending on internet speed.

After deployment, Firebase will create a sub-domain (Hosting URL).

  1. === Deploying to 'inventory-app-726af'...
  2.  
  3. i  deploying hosting
  4. i  hosting: preparing dist directory for upload...
  5.    hosting: 12 files uploaded successfully
  6. i  starting release process (may take several minutes)...
  7.    Deploy complete!
  8. Project Console: https://console.firebase.google.com/project/inventory-app-726af/overview
  9. Hosting URL: https://inventory-app-726af.firebaseapp.com
You can click on url and check inventory app.

CUSTOM DOMAIN

Firebase is generous enough to give us free sub-domain. Let’s see how to bind custom domain instead of Firebase sub-domain.

Before we make custom domain configuration, login into your DNS registrar account. Mine is Cloudflare.

Go to Firebase Console -> Hosting -> Connect Domain

We need to follow three steps –

Domain Name
Enter domain-name of your choice.
TXT Record

firebase hosting 01
Make a record entry in DNS Registrar.
cloudflare
A Records
firebase console hosting 2
Make a entry of A records in DNS Registrar.
cloudflare A records

In case of cloudflare, make sure you select DNS only option.

If open your custom domain in browser, it should redirect to inventory app.

AUTH DOMAIN

So custom domain is assigned to our app, but if you try to login into inventory app it will show below error message in browser console.
auth error

We need to add custom domain as authorized domain.
Go to -> Firebase Console -> Authentication -> Authorized Domain -> Add domain

auth domain

Try again, you should redirect to home page.

FILE NOT FOUND

One thing you could have noticed that if you click on any link e.g. manage link and refresh the page you will get page not found error.

404

We have to define redirect rules in firebase.json to resolve above error.
Edit firebase.json as below

  1. {
  2.   "hosting": {
  3.     "public": "dist",
  4.     "rewrites": [
  5.     {
  6.         "source": "**",
  7.         "destination": "/index.html"
  8.     }
  9.     ]
  10.   }
  11. }
Deploy Firebase again.
  1. firebase deploy.

You will not see error anymore.

We have hosted our app on Firebase successfully. Whats next??
Next is Cloud Functions. Stay tuned..
Cheers