In-Depth Tutorial: Building a Modern, Full-Stack Web App

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

Prerequisite

• Good knowledge of object-oriented programming and java
• Good knowledge of javascript
• 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

Deploying Our Front- & Backend In The Cloud

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.

If you want to get started with Heroku I suggest you quickly skim through their website and docs. To complete this and the next tutorial you will need a free Heroku account.

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

Heroku Set-Up

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)

Create the Heroku Frontend & Backend Application

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.

Build & Deploy Apps

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!!!

As this is my first tutorial series, I would really appreciate feedback. You can find me on twitter, instagram or send me an email.

This tutorial was originally published on my personal website.