This second tutorial focuses on providing fast and fresh data for our CropChat application. We are going to:

Setup a new Firebase database ;

Connect our Vue App to Firebase with Vuefire ;

Post and retrieve pictures from Firebase.

CropChat with fresh data

[PART 2] A Realtime PWA with Firebase

Firebase is a NoSQL Realtime Database developped by Google. It’s Cloud hosted so you don’t need to install anything on your server.

Data is synced across all clients in realtime. That makes Firebase the perfect tool to create a chat: it provides an easy way to keep a message feed up-to-date. Plus it’s free.

To learn more about Firebase, please see the official page.

Let’s start.

Configure firebase

First of all, go to the Firebase Console, sign up and create a new project:

We also need to change the database rules :

Note: This makes your database readable and writable by everyone, only good for prototyping.

Add Firebase package to Cropchat:

npm install firebase --save

Then we need to establish Firebase connection. Create a service src/service/firebase.js containing the following code:

Go back to the Firebase Console and select the Authentification tab. Click on “WEB SETUP” button to get the database information.