Real life setup Vue.js + Firebase

A couple of months before, I posted some of my ideas about my new favourite way of creating digital online products. It didn’t come cheap and you should never believe that transitioning to a new technology is going to be easy and quick.

For the last 3 years I am constantly working as a product designer leaving behind my front end dev background and skills. Sure, I still have to write code daily but it is 90% SASS and HTML and only 10% JavaScript (to be honest jQuery most of the time). As I mentioned before, I was always trying to speed up my skills but Angular and React failed me both.

Ready for the next chapter

Up until know you should know that I chose Vue.js as my go to JS framework. What you do not know, is how to connect the missing dots. Imagine this scenario…

You trying to build a simple website that displays some information about your client and you want your users to be able to contact via a form. Do you see where this is going?

Your options:

• Setting up a backend service with a language like PHP or Node. Fair enough. It is not the most difficult thing to do, but know you need to setup a mail server. Hmm… Well, there are a number of ready made solutions, so it shouldn’t be that difficult. Sure, but know you need to learn how to make your mail server trustworthy to providers like Gmail or Outlook. Soon, you will realise that this simple contact form requires more time than your original estimation. Oh, and don’t forget supporting it in the future…
• A better alternative would be a transactional email service. Your choices are limitless. Sendgrid is a very popular one, mailgun as well, but fell free to choose what you think is best for your project. Setting up this kind of infrastructure is easier than before but you will still to authenticate on the back end…

Can I survive without a backend at all?

Absolutely! On paper you will still have to use a kind of backend, but what I am proposing here is to use a backend as a service! More specifically Firebase from Google.

Firebase is mostly known because its ability to serve as database as service for web apps or mobile apps. Recently though, and still in beta, google introduced Firebase functions. An easy way to write your own backend code in Node JS and run it on their servers. There are plenty of examples out there so you probably only need to change a few lines of code and you will be done.

In our case, the most complete way to do our job is to create a database entry every time someone tries to send a message from your contact form, and at the same time trigger a Firebase function to send you an actual email. This way, you will also have an archive of your messages on your cloud database. It’s really cool to see it live and i believe it will change the way you think about this whole procedure.

If you are ready to dive into more specifics, check this out https://github.com/firebase/functions-samples/tree/master/email-confirmation

In terms of how to use Firebase with Vue.js, the solution is Vuefire. Honestly, it took me a while to set it up, so if you got any questions please leave a comment below and I hope I can help.

Want more?

More than sending transactional emails, Firebase Cloud Functions can do so much more. If you are like me and want to spend your time and effort into the actual experience of your product, BaaS is the way to go nowadays. Unfortunately, Parse was discontinued by Facebook, but Firebase is getting more and more new features.

Check the official page for more things you can do https://firebase.google.com/docs/functions/

More real life examples https://github.com/firebase/functions-samples

PS: In case you want to use a similar service for your corporate project that has no access to Firebase, or just need more freedom, Parse Open source seems like a great alternative still. Any opinions?