TOEIC Test – Part 1 Host web application in Firebase

In this tutorial series, I will show you how to build a web application for TOEIC-TEST which uses Firebase as a development platform, which helps us to host our web application, store resources as well as serve backend logic.

Because Firebase just helps us to host static resource, it means we can’t use server-side rendering technologies for our web application like Java, Ruby or PHP.  We need to choose client-side rendering technology to created Single Page Application such as Angular, React or Vue. In this series tutorial, I gonna use Angular framework.

Besides that to support dynamic data, we will use Firebase function to host our backend logic.

Kick-starting with setting up Firebase

• Go to https://console.firebase.google.com/ and sign-in by your google account
• Add new firebase project. In this firebase project, we’ll host our front-end web application as well as database, storage and backend logic

Keep in mind that Project-id would be used later as your subdomain. Unless you decide to use your own domain, you should pick a meaningful name for it.

• After the project is created successfully, we’ll redirect to overview page. In this page, on the left side, we will see a list of functionality which is given by firebase. It includes Authentication, Database, Storage, Hosting and Function. We’ll go through all of it in this tutorial series. 

Now let try to deploy an empty web application to firebase. Firstly, we need to install firebase-tool in our local machine by: (You need to install NodeJs to run this command in case you haven’t installed it before). Since this command will install firebase-tool as a global node module, so we can run this command at anywhere we want

$ npm install -g firebase-tools

Create an empty folder to put our code there:

$ mkdir topic-new
$ cd topic-new

Run firebase login :

$firebase login

It will open a tab browser to let you login into your google account. Input your google username/password and access the permission

Initialize Firebase project

Now lets run

$ firebase init

This command will initialize the firebase template project. In this first tutorial, we just want to deploy the web application to firebase hosting, so let just select Firebase Hosting feature (remember that when we need other feature, we can add it later), select the firebase project we have just created. 

Now look at the folder, you will see several files like this:

By the default, firebase will deploy public folder to it’s hosting, all the resource we want to host must be put in this folder. Now try to open public/index.html and modify something:

We want to deploy our own index, just simply run:

$ firebase deploy

Now our custom html is being hosted by firebase, try to open the “Hosting url” to check the result: 

Final words

Deploy a web application to Firebase hosting like eating a cake, it’s super simple and easy and far better: it’s free. In the next tutorial, I will show you how to connect the custom domain to this Firebase application.