Topic: MDB Vue with Firebase
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.
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
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:
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.
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:
checkTask() method - for marking task as done:
Please make sure that the db object is imported from the main.js file:
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.
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
Great! App is ready! Here's the live-preview:
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:
- Category: Vue