Deployment Of Angular App To Firebase

Firebase is a platform provided by Google that we use to build the back-end of the web/mobile applications. With Firebase, we get a real-time database that is super-fast and scalable. We get cloud messaging and hosting along with a bunch of other services.

Firebase

We get additional services here. With the firebase library, we store our data to a NoSQL real-time database. We get cloud messaging, we get storage and other services.

Front-end + Firebase is the back-end.

So, if your application needs some kind of backend and you don’t want to build the backend from scratch, you can use Firebase. Let’s see how we can use Firebase to deploy the application.

Step 1

First of all, go to the Firebase website and log in here with your Gmail id. And on the main page, we can create a new project.

 

Then, create a project. And now, our project is ready.

Step 2

Now, back on the terminal, we need to install Firebase tools via npm. And we’ll install these packages globally.

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> npm i -g firebase-tools

Next, we need to log into Firebase account in the terminal.

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> firebase login

This command displays the authentication login for Firebase. But first, it asks for your permission.

 

And then, it will open the tab in your default browser. In my case, my default browser is Microsoft Edge but here, my Gmail id is not logged in. So, it is showing me this tab and in the terminal, it is waiting for authentication.

 

Now, I will copy this tab link and paste it into Chrome since I would like to go with Chrome. Now, in Chrome, it is asking me to allow the access.

 

Finally, we’ve successfully logged in.

 

Step 3

Now, in the project folder, we need to initialize the Firebase, using the following command.

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> firebase init

Let us allow it to proceed.

 

As you can see, Firebase is showing us the services it is providing. For now, let's select hosting. Just choose the Hosting option and press Enter.

It will ask for the project name. It shows us the names of existing projects associated with the Firebase account and gives us access to create a new one from the terminal. But in our case, we’ve already created the project. So, let us select the project which we have already created.

 

Now, it is time for Hosting setup.

 

Select the options as in images and press Enter.

 

It creates 2 files in our project folder - firebase.json and .firebaserc.

Now, open the project and open firebase.json. Here, we need to do some configuration. There might be some configuration code already, like in my VS Code.

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

But we’ll write it according to our needs.

{
  "hosting": {
    "public": "dist"
  }
}

The public property contains the directory which we want to publish on the Firebase. And we want to publish our dist folder.

Step 4

Now, back in the terminal, we need to rebuild our application for production.

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> ng build --prod

Step 5

And the last step is to deploy this project to Firebase. We can do it with 1 command.

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> firebase deploy

After a few seconds, our application will be hosted on Firebase. And our terminal will provide the hosting URL which is the address of our application.

 

Now, copy this URL and paste it into the browser. We can see that our application is working fine and we’re also consuming GitHub HTTP Services.

 

It is working and showing us the followers. But when we refresh the browser, it is showing us the "404 Not Found" error.

Step 6

The reason for this error is that this application has a single HTML file, i.e., index.html. So, when we send the request to the following address, Firebase thinks this is the name of the file. 

https://github-followers-96fc2.firebaseapp.com/followers

You can see that we don’t have the file by the name "followers" in our directory. So, we need to set up a simple rule in Firebase, which will tell the system to redirect any URL to the index.html. There the Angular application loads and our routing kicks in and takes the user to the Followers page.

So back in firebase.json, here, we add a new key-value pair.

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

Make sure you write the same code with exact spellings. If there is any mistake in spelling, it will not work. The source property means any URL request, and the destination contains the URL where we redirect from the source URL.

Now, back in the terminal again,

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> firebase deploy

And now, the deployment has completed. Let us get back in the browser and test it as we’re doing above in the gif. You’ll observe that the problem is fixed.

 

Shortcut

Instead of writing the same commands in the terminal repeatedly, let’s create a shortcut and define the commands in package.json.

Open the package.json file and add one more property to the scripts object.

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "deploy:firebase": "ng build --prod && firebase deploy",
  "deploy:gh": "ng build --prod --base-href='https://techyguy786.github.io/github-followers/' && ngh"
}

Now, open the terminal and run the command.

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> npm run deploy:firebase