📄️ How I Deployed a Full-Stack Application with "NestJS" with "Angular" on "Supabase" and "Vercel"
I developed a small full-stack application as an example of a REST + WebSockets boilerplate using NestJS and Angular. The application uses PostgreSQL for data storage, Redis for caching, and Minio for file handling. Initially, the target deployment environment was Kubernetes, but to speed up development and MVP testing, I decided to use free cloud services: Supabase for infrastructure and Vercel for deploying the backend and frontend.
📄️ Creating an empty project using NestJS-mod
After many years of writing various projects on NestJS and Angular, I decided to rewrite a group of projects from the repository https://github.com/rucken and to use the current coding style, it has not changed much, it just became less of the same type of code.
📄️ Creating an empty Angular project and linking it to an existing server on NestJS
The application is created through the nx schematic for Angular.
📄️ Adding the Postgres database to the project and running migrations via Flyway for the NestJS-mod application
The database will be lifted via Docker Compose.
📄️ Connecting PrismaORM to the NestJS-mod application and checking its operation via REST
Prisma is connected to NestJS via a package https://www.npmjs.com/package/@nestjs-mod/prisma .
📄️ An example of a simple update of NestJS-mod libraries
When writing the last post, I found small errors and urgently fixed them.
📄️ Adding Swagger documentation to the NestJS-mod application and generating a REST client for the Angular application
Connecting the Swagger documentation generator to the backend.
📄️ Build applications on NestJS and Angular and run them in two versions: via PM2 and via Docker Compose
To run the built applications in PM2 mode, the frontend will be embedded in the backend in the form of static files.
📄️ Manual deployment of NestJS and Angular applications on a dedicated server via "Docker Compose" and "PM2"
We buy a dedicated server and configure SSH access to it from a local computer.
📄️ Adding the CI/CD config for deployment NestJS and Angular applications to a dedicated server using GitHub Actions
We register secret environment variables in github.
📄️ Accelerating the deployment of NestJS and Angular using public Github runners and creating intermediate Docker images
In this post, I will set up the build of Docker images:
📄️ Installing Kubernetes via MicroK8s and configuring the deployment of NestJS and Angular applications
When there are no DevOps engineers in the team, but you really want to embed the application in Kubernetes, you can easily do this using https://microk8s.io in this post, I will describe how to do this and open access to the application on a specific port.
📄️ Access to the site on NestJS and Angular by domain name with SSL certificate in Kubernetes via Ingress
Working with SSL is very easy to set up in Kubernetes, this is probably one of the main reasons why I started using it, in this article I will describe a simple scenario for connecting it.
📄️ Semantic versioning of NestJS and Angular applications in the NX monorepository
Connecting and configuring the nx-semantic-release plugin for the NX monorepository to automatically create a release followed by the deployment of applications.
📄️ Adding lint-staged to NestJS and Angular applications
Since versioning via the nx-semantic-release plugin takes place by analyzing changes to related Typescript imports, we need to minimize these changes, to do this, we connect to the project lint-staged and we add strictness to the Typescript code.
📄️ Creating a configurable Webhook module for a NestJS application
In this article, I will describe the creation of two NestJS modules with different configuration methods: a utility module and a business module with its own database.
📄️ Creating a user interface for the Webhook module using Angular
In this article, I will describe the creation of a table displaying data and a form for filling it out, the interfaces are based on components from https//formly.dev, for styles used https://tailwindcss.com, there is no state machine.
📄️ Integration of external authorization server https://authorizer.dev into a full-stack application on NestJS and Angular
In this article, I will connect an external authorization server https://authorizer.dev to the project and write additional backend and frontend modules for integration with it.
📄️ Integrating an external file server https://min.io into a full-stack application on NestJS and Angular
In this article, I will connect an external file server https://min.io to the project and write additional backend and frontend modules for integration with it.
📄️ Caching information in Redis on NestJS
Each frontend request to the backend requests user profile information from the database, this creates an additional load on the database and increases the backend response time, to speed up such requests, you can cache the database response.
📄️ Getting server time via WebSockets and displaying It in Angular application
In this post I will describe how to create a web socket stream in the backend on NestJS and subscribe to it from the frontend application on Angular.
📄️ Validating REST requests in a NestJS application and displaying errors in Angular application forms
In this post I will add validation of REST requests in NestJS application and their display in forms of Angular application.
📄️ Adding multi-language support to NestJS and Angular applications
In this article I will add support for multiple languages in NestJS and Angular applications, for error messages, notifications and data retrieved from the database.
📄️ Timezone support in a full-stack application based on NestJS and Angular: working with REST and WebSockets
In this article, I would like to share my experience in implementing timezone support in a full stack application built on NestJS and Angular. We will learn how to save user time zone settings in the database and use them correctly when interacting with the server via REST and web sockets.
📄️ Integrating and storing the selected user language into the database in a full-stack application on "Angular" and "NestJS"
This post does not pretend to be large-scale, but since I consistently document all stages of boilerplate development in the article format, I decided to describe this task as well.
📄️ Converting date by user time zone in "NestJS", and entering and displaying date in "Angular"
In this article, I will talk about adding a new field workUntilDate with the type timestamp(6) to the Webhook table of the Webhook database.