Deploy a Full-Stack Web App Within Your Lunch Break
Splitting up your app into a frontend (web), backend (api) and database tier is a very common multitier application architecture. Though nobody really enjoys spending time setting this up, because hey, there’s another day gone… What if I told you this could be done within a lunch break, and you’d still have time left for eating your lunch? 🍔
I always dread the thought of these setups, because I need to hook up connection strings, URLs and lock things down properly on the backend. Then again, since these tiers are so common, there should be a standardized way to do it.
Introducing KintoBlocks
We realized that a lot of developers routinely have to go through the same steps whilst working on projects. Wouldn’t it be great if most of those steps could be automated? Oh, and hook up logging, a proper Continuous Integration (CI) process, and configure networking as an instantaneous bonus?
The good old Todo List
To make that point clear I wrote an example app, which is based on the excellent TodoMVC project, that showcases various framework implementations with different languages. I extended the React + Redux implementation, added the axios library to sync data to the hapi Node.js backend API, and that API stores the todos into a MongoDB.
- Frontend: React + Redux TodoMVC SPA (source)
- Backend: Node.js hapi REST API (source)
- Database: MongoDB cluster; replica set of 3 (source)
Can you start to feel the cringe already? Replica sets… A backend that needs to be exposed to the public internet but also needs to talk to the internal MongoDB custer?
Easier than you think
Back to the KintoBlocks; in KintoHub there are three flavors of KintoBlocks that are perfectly suitable for the web, API and database tiers.
First, there’s the Website block. It automatically creates an HTTPS endpoint for you. When you pick a Dynamic Web App type, then you just need to point to the internal port that your Node.js server (HTTP) runs on. Talking about Node.js, it is one of the many programming languages that are supported out of the box. Under the hood, it’s wrapping the code into a Docker container that has all the SDK stuff installed already, but you don’t need to worry about that. Simply call NPM to install the dependencies as the build command, and specify in another command how to start the app.
Second, the Microservice block is meant for internal business logic. Perfect for the backend API. However, the microservice should also serve a public endpoint for the frontend to call. No problem, you can expose a microservice through KintoHub’s auth-protected gateway, or if it is public data like in this case, simply enable public access without authentication.
Last, the Custom Service block that supports Helm charts, makes it almost too easy to deploy pre-composed cloud-native services like a MongoDB cluster. The community has built templates (charts), for which you only need to set a few arguments, to configure a complex application. You can find out more in the details of such chart.
See for yourself
All the above steps have been neatly laid out in a Todo List quick-start tutorial in our KintoHub docs. I encourage you to try it out yourself, by signing up for KintoHub. Also, if you’d like me to demo this to you in a short time — say your lunch break 😉 — feel free to book a 30min demo with us. I’m happy to show you around, and thank you for reading.
