Vue, Nuxt, Firebase (Auth, DB, Hosting, Cloud Functions).
Smart way to “minimum Full Stack”
From a simple SPA to a multi-functional PWA.
Motivation. This article is intended for developers who previously created simple static SPAs and would like to expand the capabilities of their sites without learning the classical backend.
I think the most common view is that you need to implement the backend through learning:
- Server language
- Database
- Server deployment
- Make a lot of related settings …
For each of these points, you can spend months of diligent training and obviously this is only the basis.
My development experience began with Java / Groovy, relational databases (Oracle / MySQL) and magical server settings. When I’ve come over to freelancing, I began to realize that creating projects that are slightly more complicated than a static page using these technologies takes a long time. At the same time, I wanted to create projects that are more flexible in terms of functionality and design than those that can be implemented in the CMS. In general, I was interested in such an intermediate position between CMS projects and Enterprise projects.
If this is close to you, then I have for you an excellent suggestion which can save you months of training. At the same time, you will achieve the same functionality as in the “classical model”.
No tricks, only new technologies that all the time give us new opportunities, they need to be used. Let's go!
SPA upgrade
Level 1
What can you might need in the first place after creating a simple SPA?
Many of you will think about the user registration. We can do this without the own server using the excellent client side Firebase SDK. Write to me necessarily, if you find an easier and more comprehensive way to register users than via Firebase Authentication. It allows you to register users using email (even without a password - through email link), with Google account, Twitter, Facebook, GitHub, phone and anonymously. Listing all of this I want to note that these are really trivial tasks — thanks to Google.
TTS = ~ 1 day
Note: in this article, I will try to estimate how much work you need to make. Here and below, TTS — “time to study” — is my fictitious abbreviation indicating approximate time to study with the assumptions:
- 80% of knowledge according to the Pareto principle
- 8 hours in a day
- You have some experience in the frontend
Level 2
After you have added user registration, the next logical step is to separate the data for each user, and generally administer any content. At this stage, you need to know about the NoSQL cloud databases: Firebase Realtime Database and Firestore.
TTS = ~ 2–3 day
Important here is the concept — Realtime — all your clients share one copy of the Realtime database and automatically receive updates with the latest data. This allows you to easily make dynamically updated interfaces like chat, alerts or any changes that depend on the data. Also under the hood, the database can work offline (Firebase SDK persists your data to disk), if the connection is reestablished the client device receives any changes it is missed. And, probably, the most positive thing in this database is that it also connects via client JS code, which means that we still do not need any server (do not be afraid for the security of your data, you can always write the necessary rules for protection).
The last major bonus I will allocate for you is automatic scalability, just forget that the database can “fall down”, and have some coffee.
Life has become easier, but let’s not stop.
Level 3
After adding the database, your appetite could grow and you could ask questions: “How do I send an email message?”, “How do I create thumbnails of images?”, “How to fasten an advanced search engine”, “How do I accept payment?” …
And then Firebase Cloud Functions will help us — my favorite cherubs.
TTS = ~ 2–3 day
As well, you need minimal knowledge of Node.js, but since you have already know JS for you it’s absolutely not a problem at all. In addition, firebase has an excellent library of examples of Cloud Functions, from which it is literally possible to copy typical solutions of many existing tasks.
Cloud functions will serve as a server for you, and the site is still static, and as before you just publish it on any static hosting (Firebase Hosting, GitHub, Netify …). Now we have an architecture that has become much more powerful and functional, but server management completely hidden from the developer and it is rightly called “Serverless”.
Level 4
What else can I do?
The fact is that SPA so far has one a very unpleasant disadvantage, namely SEO. The search robots do not perceive the page as the user, they do not wait for it to load, which means that they scan only header and clean JS code that has not yet worked and as a result did not create HTML content for display. In order for search engines to index the content, you can use such tricks as rendering on outsourcing (like prerender.io) or, for example, using prerender-spa-plugin. And both solutions have their limitations, but now not about them, because I want to offer you something more attractive!
Let’s make our own mechanism for rendering HTML pages, and it will be very easy to implement using Nuxt.js in combination with Cloud Functions.
Learning the basics of Nuxt is an understanding of the structure of folders, several tricky functions and a server rendering cycle — complex things are placed in an easy-to-use framework — thanks for this Nuxt team.
The most exciting idea is that we will generate HTML using all of the same Cloud Functions. For this, there is a boilerplate that was suggested by David Royer (there is also a video of David East). This solution allows us to create a Cloud Function that will render HTML pages for all incoming requests.
TTS = ~ 2–3 day
In this case, the site should be deployed on Firebase Hosting and main SSR function should be “attached” to it. Firebase Hosting will immediately provide your application with a generated secure domain that can be changed in two steps, and I would also like to note the ability to quickly deploy and rollback the application that is also a nice option.
Conclusion
In the end, when I went this way of improving the SPA, I would be very glad that I have an automatically scalable “serverless SSR-application” although in a sense the same static site with all the advantages of dynamic!
Go through these stages I see real for 10 days, even if you are not familiar with the service Firebase and Nuxt.js.
Another very important factor is that we got the code, billing, indicators, just everything you need, is in one place and is conveniently administered, that is very cool, is not it?
In fact, it is often the tools and solutions are chosen by us can save us a huge amount of time and nerves, even with the time spent on learning a new one. Things listed above give me the opportunity to solve the same standard tasks many times faster than before (using the “old stack”). I hope that they will also be useful to some of you.
An example of my open source project based on these technologies.
