Firebase using Angular4 – Part 4

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.

sudo npm install -g firebase-tools

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.

firebase init

Choose Hosting when you have been asked to select feature.

? 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
◯ Functions: Configure and deploy Cloud Functions
❯◯ Hosting: Configure and deploy Firebase Hosting sites

After initialization of app, you should see output similar to below screen.

FIREBASE SERVE

After initialization, we can test app before actually deploying it to Firebase Cloud.

firebase serve

If you get error like below

=== Serving from '/home/pari/ng/blog/inventory-app'...
Error: An unexpected error has occurred.

This means firebase init created empty firebase.json file.

Go and edit firebase.json as below

{
hosting: {
```
 public: dist
```
}
}

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

Try running firebase serve again.

You should see output like

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

FIREBASE DEPLOY

We are good to deploy our firebase app.

firebase deploy

Deployment will take some time depending on internet speed.

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

=== Deploying to 'inventory-app-726af'...
i deploying hosting
i hosting: preparing dist directory for upload...

hosting: 12 files uploaded successfully

i starting release process (may take several minutes)...
```
Deploy complete!
```
Project Console: https://console.firebase.google.com/project/inventory-app-726af/overview
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

Make a record entry in DNS Registrar. A Records Make a entry of A records in DNS Registrar.

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.

We need to add custom domain as authorized domain.
Go to -> Firebase Console -> Authentication -> Authorized Domain -> Add 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.

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

{
hosting: {
```
 public: dist,
```
```
 rewrites: \[
```
```
 {
```
```
     source: \*\*,
```
```
     destination: /index.html
```
```
 }
```
```
 \]
```
}
}

Deploy Firebase again.

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