Deploying a NestJS and Next.js Application on Dokku: Full-Stack Architecture

Introduction Deploying a full-stack application that consists of a NestJS backend and a Next.js frontend on a Dokku server can be a powerful yet cost-effective solution. This article will guide you through the process of orchestrating both applications on a single Dokku instance. Prerequisites Before proceeding, ensure you have the following: A server with Dokku installed (installation guide in this article) A domain name (optional but recommended) Basic knowledge of NestJS, Next.js, and Docker Step 1: Setting Up the Dokku Applications On your server, create two Dokku applications: Create applications dokku apps:create my-nestjs-app dokku apps:create my-nextjs-app Set up database and environment variables # Example for database dokku plugin:install https://github.com/dokku/dokku-postgres.git dokku postgres:create mydatabase dokku postgres:link mydatabase my-nestjs-app # Example for environment variables dokku config:set my-nestjs-app \ APP_PORT=5000 \ NGINX_ROOT=dist \ JWT_SECRET=xxxxxxxxxxxxxxxxxx Step 2: Configuring NestJS for Deployment Ensure your NestJS project has a Procfile on the root folder: web: npm run prod Then, deploy your NestJS backend: git remote add dokku dokku@your-server-ip:my-nestjs-app git push dokku main Step 3: Configuring Next.js for Deployment Next.js can be deployed similarly, but with custom environment variables: dokku config:set my-nextjs-app \ NEXT_PUBLIC_API_URL="https://api.yourdomain.com" \ NGINX_ROOT=.next Ensure your Next.js project has a Procfile: web: npm run prod Deploy with: git remote add dokku dokku@your-server-ip:my-nextjs-app git push dokku main Step 4: Configuring Nginx and Domains If using domains, set them up with: dokku domains:set my-nestjs-app api.yourdomain.com dokku domains:set my-nextjs-app yourdomain.com Enable SSL with Let's Encrypt: dokku plugin:install https://github.com/dokku/dokku-letsencrypt.git dokku letsencrypt my-nestjs-app dokku letsencrypt my-nextjs-app Step 5: Testing the Deployment Verify both applications are running: dokku logs my-nestjs-app dokku logs my-nextjs-app Visit https://yourdomain.com for the frontend and https://api.yourdomain.com for the backend. Conclusion By following this guide, you've successfully deployed a full-stack NestJS + Next.js application on a Dokku server. This setup allows for scalability, easy updates, and a structured separation between the frontend and backend. Further Reading Deploying a NestJS Application with Dokku Deploying a Next.js Application with Dokku Let me know in the comments if you have any questions or need clarifications!

Feb 22, 2025 - 13:57

Deploying a NestJS and Next.js Application on Dokku: Full-Stack Architecture

Introduction

Deploying a full-stack application that consists of a NestJS backend and a Next.js frontend on a Dokku server can be a powerful yet cost-effective solution. This article will guide you through the process of orchestrating both applications on a single Dokku instance.

Prerequisites

Before proceeding, ensure you have the following:

A server with Dokku installed (installation guide in this article)
A domain name (optional but recommended)
Basic knowledge of NestJS, Next.js, and Docker

Step 1: Setting Up the Dokku Applications

On your server, create two Dokku applications:

Create applications

dokku apps:create my-nestjs-app
dokku apps:create my-nextjs-app

Set up database and environment variables

# Example for database
dokku plugin:install https://github.com/dokku/dokku-postgres.git

dokku postgres:create mydatabase

dokku postgres:link mydatabase my-nestjs-app

# Example for environment variables
dokku config:set my-nestjs-app \
    APP_PORT=5000 \
    NGINX_ROOT=dist \
    JWT_SECRET=xxxxxxxxxxxxxxxxxx

Step 2: Configuring NestJS for Deployment

Ensure your NestJS project has a Procfile on the root folder:

web: npm run prod

Then, deploy your NestJS backend:

git remote add dokku dokku@your-server-ip:my-nestjs-app
git push dokku main

Step 3: Configuring Next.js for Deployment

Next.js can be deployed similarly, but with custom environment variables:

dokku config:set my-nextjs-app \
    NEXT_PUBLIC_API_URL="https://api.yourdomain.com" \
    NGINX_ROOT=.next

Ensure your Next.js project has a Procfile:

web: npm run prod

Deploy with:

git remote add dokku dokku@your-server-ip:my-nextjs-app
git push dokku main

Step 4: Configuring Nginx and Domains

If using domains, set them up with:

dokku domains:set my-nestjs-app api.yourdomain.com
dokku domains:set my-nextjs-app yourdomain.com

Enable SSL with Let's Encrypt:

dokku plugin:install https://github.com/dokku/dokku-letsencrypt.git
dokku letsencrypt my-nestjs-app
dokku letsencrypt my-nextjs-app

Step 5: Testing the Deployment

Verify both applications are running:

dokku logs my-nestjs-app
dokku logs my-nextjs-app

Visit https://yourdomain.com for the frontend and https://api.yourdomain.com for the backend.

Conclusion

By following this guide, you've successfully deployed a full-stack NestJS + Next.js application on a Dokku server. This setup allows for scalability, easy updates, and a structured separation between the frontend and backend.