Web Development

Building a Modern Full-Stack Web Application using Adonis and Inertia

A full, step-by-step guide for developers seeking to implement a portfolio or blog publication with Astro.

Avatar
Yahya Eddhissa
February 2, 2024
8 min read
Cover Image
Photo by Mohammad Rahmani on Unsplash

Introduction

🚧 This post is under construction 🚧

Web development has evolved to one of the most complex fields in software engineering. With new patterns, libraries, and frameworks emerging every day, it can feel like an endless race to keep up with all the new paradigms aiming to fix problems we face in our daily life as web developers. One of the biggest issues is maintaining speed and efficiency in the development process.

The modular monolith

If you’re a solo web developer, whether freelancer or working within a company, you most likely faced the complexity of building and managing multiple parts of an app. It quickly gets very messy, building one or multiple frontend apps, connecting them to a backend, managing API versions, integrating the project with third-party services, authentication and authorization, and so on.

You have probably tried various patterns to streamline your workflow, perhaps using a monorepo to manage both your backend and frontend, juggling multiple repositories, or even exploring microservices. You then realize that most of the patterns are aimed to solve issues within teams working on large-scale products, and are basically an overkill for small to medium projects. However, there’s one pattern that remains very underrated, which is the modular monolith.

The modular monolith is a software architecture paradigm similar to the traditional monolith, that offers the simplicity and cohesiveness needed for these kinds of projects.

Advantages of a modular monolith

  • Single Deployment Unit: Since everything is packaged in one application, deployment is straightforward compared to microservices, which require multiple deployments and managing inter-service communication.

  • Modular Organization: The codebase is structured into distinct modules, each responsible for a specific business domain. This improves maintainability and makes it easier for teams to work on different parts of the system without stepping on each other’s toes.

Overview of AdonisJS

One of the best frameworks for building a modular monolith is AdonisJS. AdonisJS is designed to offer a structured and opinionated approach to web development, making it well-suited for building modular, maintainable applications within a monolithic structure.

According to the Official AdonisJS Documentation:

AdonisJS is a TypeScript-first web framework for Node.js. You can use it to create a full-stack web application or a JSON API server.

At the fundamental level, AdonisJS provides structure to your applications, configures a seamless TypeScript development environment, configures HMR for your backend code, and offers a vast collection of well-maintained and extensively documented packages.

AdonisJS takes the best aspects of traditional frameworks—such as clear structure, built-in tools, and ease of use—and combines them with modern features for building full-stack applications. When paired with tools like InertiaJS for seamless frontend integration and Prisma for powerful, type-safe database management, AdonisJS becomes the backbone of a modern web stack that allows you to build sophisticated apps without the complexity of microservices or fragmented codebases.

Overview of InertiaJS

According to the Official InertiaJS Documentation

Inertia is a new approach to building classic server-driven web apps. We call it the modern monolith.

Inertia allows you to create fully client-side rendered, single-page apps, without the complexity that comes with modern SPAs. It does this by leveraging existing server-side patterns that you already love.

So by using inertia, you can leverage the power of your favourite frontend development framework while maintaining a monolithic application, by adopting a fullstack data flow within AdonisJS. This way, you can build web apps in a way thet is similar to how it was done in the past, but this time with the interactivity and the feel of a modern SPA.

Wrapping Up

Alias et sed sit soluta maiores ut perspiciatis. Qui aut quidem necessitatibus repellendus. Dolores occaecati vel voluptatem modi illo. Soluta et quis neque aut quia. Quia consequatur cupiditate est esse quae illo. Ut ab est qui ad labore totam.

Subscribe to my Newsltter
Stay updated with my latest posts
Enter your full name
Enter your email address
More posts like this