MDB Vue with Firebase


Topic: MDB Vue with Firebase
Published 25.07.2019 Updated 30.07.2019

Introduction

Firebase is the Google's Mobile platform for quick application management and deployment. It has built-in modules for supporting marketing, performance monitoring, testing, modifying applications and storing data in a secure manner. Thanks to Firebase, we will create a valuable web app without knowledge about any backend language. We can also use frontend frameworks or libraries, such as Angular, React or Vue.


Firebase basics

The platform has several modules which are very useful in modern App development. The most important are:

1. Authentication - a module that allows you to easily authorize, among others through a Google account, Facebook, Twitter and many more

2. Database - operating in realtime mode

3. Storage - allows you to easily upload files and link directly in our app

4. Hosting

To start using firebase features via terminal just type:

npm install -g firebase-tools


Firebase project setup and config

To setup our first app please visit the firebase console, pick Add project, define project name and  localization for Analytics.

Then you'll have to create an App within a project. In our case it would be a Web App. You can access it from the main page or project settings -> your applications -> add application. While adding new app you can also configure the hosting. 

Finally, we can create our first Cloud Database. Easily pick appropriate button from the side menu and then init database in the test mode (only for this tutorial purpose). 

The database has the following structure:

Collection > Document > Fields with values

In this tutorial we will prepare a daily planner, so in this case the collections will be days of a week and each task will be a document. Here's an example of collection:


And here's a doc:


Local config

We can create a new Vue project or clone the example one for quick start. In our case we will use the pre-configured app with MDB Vue UI KIT inside:

git clone https://github.com/smolenski-mikolaj/mdb-planner
cd ./mdb-planner
npm install

After installation let's check main.js file. There is some firebase code which need to be updated:

We have to fill in the firebaseConfig by the data which can be found in Firebase project's console > settings > your applications > configuration. The object should contain apiKey, authDomain, databaseURL, projectId, storageBucket, messagingSenderId and appId.


Task management

Inside the PreviewPage.vue we will download data from the database using Vuefire Plugin.

Let's check now the mdbPlanner.vue. There are some interesting methods to manage tasks.

Here are examples of adding, updating and deleting tasks from the remote database:

addTask() method

checkTask() method - for marking task as done:

deleteTask() method:

Please make sure that the db object is imported from the main.js file:


Authentication

To prevent adding or deleting tasks by the non-verified user we can enable authentication in our app. There are several auth methods available in Firebase. For our purposes we will use Google auth. Enabling it is extremely easy. Just go to Authentication -> Auth metods -> enable Google.

Then in our App we will need to prepare some methods for signing user:

And here's the user panel section:

As you can see the content depends on the value of user object. 

Also the content of tasks section is configured to act different for using by the authenticated user. Verified user is able to add a task, edit it or delete. Task can be deleted only by their author.


Deploy

Now we're ready to deploy our App. Let's type:

npm run build

then we need to init firebase withing the local app:

firebase login
firebase init


And finally:

firebase deploy

Great! App is ready! Here's the live-preview: 

https://mdb-planner.firebaseapp.com/#/preview


Summary

In this Quick Start Firebase tutorial I described database and authentication modules of this Google's platform. I also introduced some methods of connecting Vue App with the remote server. All this for deploying and managing an app without the need of creating complicated backend configurations.



Template was created by the MDB Vue team:

1. Magdalena Dembna 
2. Mikołaj Smoleński 

Write
Please insert min. 20 characters.