Serverless online store with Firebase
Background story: My brother has an online business, a small shop. It was ready-to-use PHP solution, but during the years cost me a lot of time to maintain it, and you can imagine this is a tedious task. Thus one day I decided to simplify the shop and to rebuild it using a modern stack.
But what is a modern stack? I wanted to move out of digitalocean virtual machine and unmaintainable PHP CMS which didn’t give enough options, and the same time to reduce the costs. So firebase and custom made preact solution seemed as a good choice.
Nowadays Firebase provides a lot of features ( if you are not familiar with them I suggest go and check them out ) In this post I am going to talk about: Cloud Functions, Firestore database, Auth + using MailGun and Braintree.
Firebase Functions are straightforward concept: you write a JS function that responds to an event ( for example HTTP request or database change )
HTTP trigger as Rest API
To make rest like API firebase gives HTTP triggers. The API is similar to ExpressJS one, in fact, you can quickly put the whole expresjs server to handle all HTTP requests, and Idid exactly that.
Building such a simple online store I needed few API points: list of products, checkout ( Braintree ) and shipping module
mode information about HTTP triggers
Braintree for payments
Braintree was the first choice for payment providers since supports PayPal ( and we all know that PayPal integration is painful ). It has nodejs module, so integration to cloud functions is easy, all I did is create two API points /token ( generates a token for the frontend ) and /checkout ( process payment and saves the order in DB )
Firebase Firestore for storing orders
Firestore is the new generation NoSQL database. Since it is document based, I just insert all orders as JSON object into it.
Firebase Functions + MailGun
Every time new order is added into Firestore database it triggers a function which sends a confirmation email to the customer and shop administrator. For sending emails I use MailGun, the email service provides 10000 free emails per month which are enough for a small business.
Firebase functions for resizing and optimising images
Another challenge that I had is to provide responsive pictures in different formats ( jpg / webp ), actually this was simpler than expected. Firebase has a trigger which activates every time a new file is uploaded to Firebase Storage. As you may guess I just have to upload my large pictures to firebase storage and all the images will be resized and converted to webp.
rest of the resizeImage function
Firebase Auth
Building authentication is unpleasant, I have done it many times and am quite happy that nowadays I can use a provider for that. I needed user auth for administrators of the shop and Firebase Auth cames naturally as option
I must mention some other cool features of Firebase functions like CDN, free SSL, http2, static assets hosting. Hence using services like Firebase makes the development process more enjoyable. I love the fact I don’t have to maintain any virtual machines so can focus on the things I like.
All examples: https://github.com/firebase/functions-samples
Full code of the project: https://github.com/mutebg/online-store/
