Dockerizing a NestJS/Vue Platform for SaaS Integration

Introduction

This is an entry related to a current project I’m working on, PayExtend, a SaaS integration platform built with NestJS and VueTS. The purpose of the platform is to offer SaaS features to Chrome extension developers, allowing them to integrate payment gateways and custom APIs into their extensions seamlessly. Having built 35+ Chrome extensions on Upwork, I identified a need for a streamlined solution to manage payments and APIs for Chrome extensions; It tackles a lot of challenges that developers face, such as time to re-upload due to a change in DOM Selectors or even modifying existing locales.

DigitalOcean Droplets as a Hosting Solution

The shorter version, DigitalOcean Droplets, provides a cost-effective and scalable solution for hosting web applications, making it an ideal choice for deploying the PayExtend platform. With Droplets, I can easily manage server resources, ensuring optimal performance and reliability for users accessing the platform; The App Platform provides a more intuitive control panel, however, it is more expensive for the resources provided e.g. Database add-ons, storage, etc.

Project Structure

The PayExtend project is structured into three directories: backend, spa, and nginx. The backend directory contains the NestJS application, the spa directory houses the VueTS frontend, and the nginx directory includes configuration files for the Nginx web server.

payextend/
├── backend/          # NestJS backend application
├── spa/              # VueTS frontend application
└── nginx/            # Nginx configuration files

Backend (NestTS)

The backend directory contains the NestJS application responsible for handling API requests, Stripe integration, Firebase authentication, and Firestore interactions. It also provides a Dashboard for agencies to have insights into their Chrome extensions’ performance and payment statuses; think of it as an mini-observability platform for Chrome extensions.

SPA (VueTS)

The spa directory contains the VueTS frontend application, which serves as the user interface for the PayExtend platform. It allows users to manage their Chrome extensions, configure payment settings, and access various features offered by the platform.

Nginx Configuration

The nginx directory includes configuration files for the Nginx web server, which acts as a reverse proxy for the backend and serves the frontend application. The Nginx configuration ensures that requests are properly routed to the appropriate services and handles SSL termination for secure communication.

Approach & Strategies to Dockerization

Disclaimer: I am not a Docker Expert, Docker is something I read up when I need it, so this is more of a learning experience for me as well. Luckily for me, the era of AI has made it quite easy to learn in a more streamlined way. So the following are my approaches and strategies to dockerizing the PayExtend platform:

1. Create Dockerfiles for Each Service: I created separate Dockerfiles for the backend (NestJS) and frontend (VueTS) applications. Each Dockerfile specifies the base image, copies the application code, installs dependencies, and defines the command to run the application.
2. Set Up Nginx Configuration: I created an Nginx configuration file to define how requests should be routed between the backend and frontend services. This configuration ensures that API requests are forwarded to the NestJS application, while other requests are served by the VueTS application.