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 :
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
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:
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.
Pingback: Connect custom domain to Firebase Hosting » Frontend development
Pingback: TOEIC Test – Part 3 Setting up React project » Frontend development
Pingback: TOEIC Test – Part 4 Setting up CI/CD workflow » Frontend development