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.
[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.
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
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
Import the firebase service into
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
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
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:
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
Do not forget to remove our static data file data.js and import line in
Here we go:
Futermore, this is hot-synced. Open an second tab with the app, post a cat, and see the magic happening:
Update the detail view
npm install lodash --save
And update DetailView.vue:
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.