In-Depth Tutorial on Building a Modern, Full-Stack Web App (5 Part Series)
In this series, I want to build a modern, extensible, yet simple set up that allows me to quickly build and deploy a web-frontend, -backend and database. While this project functions as a template for future projects, we still need some sort of goal. This is why we will create the simplest todo-app ever. Todo-apps are a good use case as it is simple but still covers most aspects of a modern application. We will have to:
- connect a database to store todos
- work with that database by reading, creating, updating and deleting entries
- create a backend that exposes a REST-API for our frontend
- secure our backend properly
- build a frontend that works well with data from an API
There are several ways to build this modern web-application. I chose the following frameworks, each of which is covered in one tutorial:
- Part I: The Backend Using Java With Spring
- Part II: The server-side-rendered Frontend Using VueJS And NUXTJS
- Part III: Dockerizing Our Front- & Backend
- Part IV: Deploying Our Front- & Backend In The Cloud using Heroku dynos
- Part V: Automating The Build- And Deployment-Process using GitLab CI/CD
- Good knowledge of object-oriented programming and java
- Basic knowledge of the terminal
- A mac - While all of this should also work on windows I did not spend any time to check for or provide solutions for windows
After the first three parts all the hard work is done. We covered a lot, great job! The goal of this and the next part is that we want to deploy our web application in the cloud. This can be helpful early on to test your idea or to deploy your application later on when it's already more progressed. As with everything else, there are a million ways to do this. I wanted to specifically find a way to run the application in the cloud for free (for a limited number of hours each month). Heroku offers exactly this and makes it easy to deploy our docker containers.
I will quickly go over the basics of how Heroku works:
- An app runs on Dynos
- There three dyno configurations
- Web → "Web dynos are dynos of the “web” process type that is defined in your Procfile. Only web dynos receive HTTP traffic from the routers."
- Worker → "Worker dynos can be of any process type declared in your Procfile, other than “web”. Worker dynos are typically used for background jobs, queueing systems, and timed jobs. You can have multiple kinds of worker dynos in your application. For example, one for urgent jobs and another for long-running jobs. For more information, see Worker Dynos, Background Jobs and Queueing."
- One-off → One-off dynos are temporary dynos that can run detached, or with their input/output attached to your local terminal. They’re loaded with your latest release. They can be used to handle administrative tasks, such as database migrations and console sessions. They can also be used to run occasional background work, as with Heroku Scheduler. For more information, see One-Off Dynos.
- While each app can have multiple dynos, they all run the same program within each configuration. If you have more than one web dyno, heroku will distribute the requests between them
- With a free account you can run dynos for 450 hours for free (additional 550 hours if you add your credit card, without being charged)
- Free dynos will (with the exception of workers) will also fall asleep after being idle for 30 minutes, this way you don't have to worry about your free dyno hours
If you look into the docker-compose.yml file we created in the last tutorial, you will see that we have three apps/services.
- A database
- The backend
- The frontend
To run our application on heroku we will
- create an heroku application for our backend, that will run a web dyno (as it receives http requests)
- add a mongodb to our backend app
- create a heroku application for our frontend, that will run a web dyno (as it receives http requests)
After you created your account, go to the heroku dashboard and click on "new" and create new application. Give your application a unique name for the frontend, choose a region and create the app. For the backend, again go to the heroku dashboard and click on "new" and create new application.
For our backend we will also need a mongodb. Click on "configure add-ons" and type in the search bar. Select "mLab MongoDB" and the free sandbox plan. Thats it.
To build and deploy the apps navigate to your projects root folder in the terminal and execute the following commands.
# Login to heroku # Your heroku api key can be found in your account settings docker login -u _ -p <YOUR HEROKU API KEY> registry.heroku.com # Build the applications and tag them accordingly docker build --file=frontend.dockerfile --rm=true -t registry.heroku.com/<NAME OF YOUR FRONTEND APP>/web . docker build --file=backend.dockerfile --rm=true -t registry.heroku.com/<NAME OF YOUR BACKEND APP>/web . # Push the images to heroku docker push registry.heroku.com/<NAME OF YOUR FRONTEND APP>/web docker push registry.heroku.com/<NAME OF YOUR BACKEND APP>/web # Release/Run the apps heroku container:release web -a <NAME OF YOUR FRONTEND APP> heroku container:release web -a <NAME OF YOUR BACKEND APP>
That was it. Amazing, right? Open your frontend application in the browser with /login and you should find your login page.
Congratulations for completing this tutorial!!!
This tutorial was originally published on my personal website.