Vue.js Meets Firebase: How to Develop an Application Without Writing the Backend? | by Muhammad Usman | Apr, 2022

Google developed a platform called Firebase for creating mobile and web applications. Firebase provides tools for tracking analytics, reporting and fixing app crashes, and creating marketing and product experiment. Even you can deploy your application live through Firebase without setting up the server or cloud instance.

What is Firebase?

Firebase Real-time Database is a NoSQL cloud database that is used to store and sync the data. The data from the database can be synced at a time across all the clients such as android, web as well as IOS. The data in the database is stored in the JSON format, and it updates in real-time with every connected client.
Reference: https://firebase.google.com/

The purpose of this article is to show how to connect the frontend application of any technology with Firebase without writing the single line of backend code and without configuring any database. It doesn’t mean that it works and stores the data without any backend code. The Firebase do everything on behalf of you. Thanks to the Firebase which provides such platform, and it automatically manages all your backend pain. When you create the database, it will automatically create HTTP API endpoints for the client and provide the developer’s a single reference URL. Through which we can get and insert our data into Firebase database.

Let’s start developing the application.

  1. Go to Firebase: https://firebase.google.com/
  2. Click ‘Get Started‘ or ‘Go to Console‘.
  3. Click ‘Add project‘ and enter the project name.
    I used the demo-app project name.
  4. Then click on next/continueand the new project is created.
  5. After successfully creating the project, select the ‘Realtime Database‘ from the left side of the dashboard as shown in figure-1.
Figure-1: Left panel of the dashboard

6. Click ‘Create Database‘ in the dashboard as shown in figure-2.

Figure-2: Create Realtime Database

7. It will open a wizard and ask to select the ‘database location‘ from where you want to store your data. In my case, I select ‘Belgium‘ you can select whatever you want. Next, it will ask for the ‘security rules‘. Please select the ‘Start in test mode‘ in the radio option.

8. Click on’Enable‘ button, it will create a real-time database for you as like in figure-3. I hide my URL here. The ‘null’ represent that you have empty database.

Figure-3: Overview of the data in database

9. Copy the ‘reference URL‘ of the database, that we will use later in our application to GET and POST the data into database.

You can select any technology of the front end, whatever you want. Either React, Vue, Angular, or Vanilla JavaScript. It works for all. For my ease, I select Vue.js as I have Vue.js expertise.

Prerequisite

Your system must have the node.js installed. Otherwise, download the installer from the official site according to your operating system.
NodeJS

Create a Vue project

  1. Open the terminal and run the command:
$  npm install -g @vue/cli

2. Create a Vue application by running the command:

$  vue create demo-app

3. The above command creates a project folder named demo-app. Navigate into the demo-app directory by the change directory command:

$  cd demo-app

4. Now run the application:

npm run serve

5. Open the browser and go to `http://localhost:8080/`

It will show the vue.js welcome page as shown in figure-4. It means your Vue application is working fine.

Figure-4: Vue application welcome page

Now open the project folder on the VS Code and change the content of the HelloWorld.vue file with the below code under the directory of src/components.

Sample code: src/components/HelloWorld.vue

Code Explanation

Let’s explain the code in pieces:

  1. Inside the template tag, the div tag is used for HTML elements (input, label, list) on the user interface to show the user input and output.
  2. The data property inside the script tag represents the data attributes that are needed to deal with the user’s data. fname — represents the user’s first name as a string, and it is bound with the fname input field using v-model.
    lname represents the user’s last name as a string, and it is bound with the lname input field using v-model. users is used to represent the list/array of the user’s presented in the database stored from the UI.
  3. The method property holds all the methods that are used inside the HelloWorld.vue page. The above code has two methods namely: click_post() and click_get() which are used to insert/post and fetch/get the user’s data from the real-time database in Firebase.
    click_post() method is bound with post submit button using v-on directive and is used to insert the user’s data (firstname and lastname) in to the database. The function definition uses the built-in fetch function to call the API. The method and header field are as standard and the body has the JSON content consisting of the user’s first name and last name.
    click_get() method is also bound with the get to submit button using v-on directive and is used to get the list of user’s from the Firebase real-time database. This function also uses the built-in fetch function to call the endpoint of the API. The response contains the JSON object which can be parsed and stored in the users data property.
  4. The unordered list <ul> tag inside the template iterate the ‘users’ data property and display all the user’s as list item <li>.

5. Replace the URL inside the fetch functions with the reference URL of the Firebase real-time database in both methods click_post() and click_get(). Please notice that, after the URL, there is /test.json. The ‘test‘ is the database table name where your user’s records are stored in JSON format.

Now open the application on the browser ”, it will open the user interface like:

Sample User Interface

Run the application

Enter the first and last name of the user and click on INSERT button, it will insert the record in the Firebase database as JSON.

Record stored as JSON format in Firebase realtime database

Now click on the SHOW button and it will display all the user’s stored on the Firebase database.

Show list of user’s stored on the Firebase database

That’s all. Thanks for reading.

Leave a Comment