Want to make an application without writing any backend logic and without configuring any database? Yes, you can do it.
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.
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.
- Go to Firebase: https://firebase.google.com/
- Click ‘Get Started‘ or ‘Go to Console‘.
- Click ‘Add project‘ and enter the project name.
I used the
- Then click on next/continueand the new project is created.
- After successfully creating the project, select the ‘Realtime Database‘ from the left side of the dashboard as shown in figure-1.
6. Click ‘Create Database‘ in the dashboard as shown in figure-2.
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.
9. Copy the ‘reference URL‘ of the database, that we will use later in our application to GET and POST the data into database.
Your system must have the node.js installed. Otherwise, download the installer from the official site according to your operating system.
Create a Vue project
- 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.
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
Let’s explain the code in pieces:
- 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.
- 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
fnameinput field using v-model.
lnamerepresents the user’s last name as a string, and it is bound with the
lnameinput field using v-model.
usersis used to represent the list/array of the user’s presented in the database stored from the UI.
- The method property holds all the methods that are used inside the
HelloWorld.vuepage. The above code has two methods namely:
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 (
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
submitbutton 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
- The unordered list
<ul>tag inside the template iterate the ‘users’ data property and display all the user’s as list item
5. Replace the URL inside the fetch functions with the
reference URL of the Firebase real-time database in both methods
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:
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.
Now click on the
SHOW button and it will display all the user’s stored on the Firebase database.
That’s all. Thanks for reading.