Modern PWA with Vue-CLI 3 + Vuetify + Firestore + Workbox[Part 2]

This is the second part of a series that aims to develop a complete PWA using Vue-CLI 3 and modern tools. If you haven’t read the first part yet, you can find it here.

Remember, the source code is in my Github:

Eder87rh/cropchien

[Part 2] Connect the App with an external API and setting Firestore to save data

In part 1 we’ve learned how to create a PWA from scratch using Vue-CLI. In fact, we have a very basic PWA but without much functionality.

In this second tutorial we are going to:

• Setup Firestore database.
• Connect our Project with “dog API” using Axios.
• Post and retrieve data from Firestore.

Setting up Firestore

Firestore is the new No-SQL Database created by Google. This new database technology allows us store data with more scalability than Firebase real-time database.

To learn more about Firestore, see the oficial docs.

First, we have to go to Firebase console and create a new project called cropchien.

Then go to Database option an click in Create database (be sure is Firestore database)

Then we’ll be asked for security rules, select “start in test mode”

Add Firebase package to Cropchien:

yarn add firebase

Or if you’re using npm

npm install firebase --save

Then in our project create a configFirebase.js in src folder and paste the next code:

Go back to firebase console. Click in Authentication and then click in “Web setup” button to get the Firebase configuration info, paste the info in configFirebase.js file.

We are now connected to our database.

Post a dog

Now we are ready to update Post.vue and give it some functionality, but first intall axios to make http requests:

yarn add axios

Then add a FAT(float action button) in Home.vue component with this code after v-layout tag:

In order to reuse code, we are going to create a Vue Mixin for the PostDog Method, we’ll use this Mixin in the next chapters too.

So, create a mixin folder inside components and create a new file postDog.js inside with this code:

Now, update the Post.vue with the next code:

Now you’re able to create new dog posts

But wait, we are still using the static list of dogs in Home.vue, Let’s retrieve Firestore data instead static data.

Finally there is a little bug in Details.vue if we do a navigator reload it crashes, to fix it we have to retrieve the data from firestore with the route id. Update Details.vue with this code:

Now you are retrieving data from firestore in Home.vue and Details.vue successfully.

Conclusions

I hope you enjoyed this second part. In this chapter we created a Firestore database, to store an retrieve data in real-time.

Besides, we’ve created the form to post dogs and we’ve updated the Home and Details views to always get dynamic fresh data from Firestore.

we still have a long way to go. In the next chapter we’re going to implement offline functionality.

I’ll see you there.