A Progressive Web Application with Vue JS, Webpack & Material Design [Part 2]

[Updated on 10/30/2017]

This article is part of a serie that aims to build a basic but complete Progressive Web Application with VueJs, Webpack & Material Design, step-by-step and from scratch. If you have not yet read it, you can find the initial part here.

Code source available on this GitHub repository: https://github.com/charlesBochet/vueJSPwa

In Part 1, we have learned how to create a single page application with VueJS, Webpack and MDL. We have already met first requirements of our PWA checklist:

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.

We are now connected to our database.

Vuefire: release the power of Firebase + VueJS

Configure VueFire

We will use VueFire, a node package built to wrap firebase hooks in a vueJS application.

Add VueFire to the project:

npm install vuefire --save

Import VueFire into our src/main.js:

Import the firebase service into src/main.js:

We just created a hook between our app prop cats and the firebase node cats. Vuefire will keep them synced for us. We add .orderByChild('created_at') to have the newest cat on the top of the feed.

Post a cat

We can start pushing to data on our firebase database. Add a form src/components/PostView.vue:

Add Vue-resource to have an HTTP client for our app and a xml parser :

npm install vue-resource --save
npm install xml-parser --save

Import Vue-resource into our src/main.js:

Update PostView.vue mounted() function to load a random cat from the CatAPI (which is a great place to find cat pictures by the way). This function is triggerd when PostView component is mounted:

Finally, add postCat() function to PostView.vue methods that will push this image to Firebase instance:

That’s it! Browse your application, click on the “Plus” button to access the Post View:

Screenshot from the Post view

And click on the“Post A Cat” button. You should see a new entry in your Firebase dashboard:

Display the cat list

We are almost done. We still have some work to do on Home View to display the cat images we stored in Firebase. Update the HomeView.vue template:

Do not forget to remove our static data file data.js and import line in HomeView.vue .

Here we go:

Home View is now synced on Firebase

Futermore, this is hot-synced. Open an second tab with the app, post a cat, and see the magic happening:

Hot-synced

Update the detail view

Add lodash:

npm install lodash --save

And update DetailView.vue:

src/components/DetailView.vue

Conclusions

I hope I have convinced you of the capabilities of Firebase and VueJS to improve your app with fast and fresh datas. To cut a long story short:

• Vuefire offers an quick way to integrate a Firebase Database in your VueJS app ;
• Firebase is a very powerfull tool for creating a real time data in an app, and make sure that your users always have fresh and up-to-date data.

We checked a new point on our PWA requirements checklist:

Not yet done! In Part III, we will learn how to make our Cropchat app work offline thanks to Service Workers.