Skip to content

Fullstack Boilerplate with Next.js, NestJS, tRPC, Docker and deploy on VPS

License

Notifications You must be signed in to change notification settings

dmytro-komlyk/fullstack-boilerplate-next-nest-vps

Repository files navigation

Fullstack-Boilerplate-Next-Nest-VPS

CI/CD Build Pipeline CI/CD Deploy Pipeline

Overview

This repository provides a boilerplate for setting up a Next.js and Nest.js project with Continuous Integration (CI) on a Virtual Private Server (VPS). It includes configurations for various tools and libraries to help you quickly get started with a modern web development stack.

Features

  • Next.js for the frontend
  • Nest.js for the backend
  • TypeScript for type safety
  • Docker for containerization
  • CI/CD with GitHub Actions
  • Monorepo structure with PNPM Workspaces
  • Prisma ORM for database management
  • TailwindCSS for styling
  • NextAuth for authentication
  • tRPC for type-safe APIs
  • NextUI for UI components
  • Next-Intl for internationalization

Getting Started

Prerequisites

Ensure you have the following installed:

  • Node.js
  • PNPM
  • Docker

Installation

  1. Clone the repository

    git clone https://github.com/dmytro-komlyk/fullstack-boilerplate-next-nest-vps.git
    cd fullstack-boilerplate-next-nest-vps

    or use the repository button Use this template

  2. Install dependencies

    pnpm install
  3. Setup environment variables

    cp apps/admin/.env.local.example apps/admin/.env.local
    cp apps/client/.env.local.example apps/client/.env.local
    cp apps/server/.env.example apps/server/.env

Running the Project

To start the development environment:

pnpm dev

This will concurrently run the Next.js and Nest.js applications.

Building for Production

  1. To build the project for production:

    pnpm build
  2. To start the production build:

    pnpm start

Docker development

To run the project using Docker, use the provided docker-compose files.

  1. Set up environment variables

    cp apps/admin/.env.docker.local.example apps/admin/.env.docker.local
    cp apps/client/.env.docker.local.example apps/client/.env.docker.local
    cp apps/server/.env.docker.local.example apps/server/.env.docker.local
  2. Build and run Docker containers

    docker compose -f docker-compose.local.yml up -d

Git Hooks with Husky and Commitlint

This project uses Husky to manage Git hooks and Commitlint to enforce conventional commit messages.

Example Commit Message Guidelines

  • feat: A new feature
  • fix: A bug fix
  • docs: Documentation only changes
  • style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
  • refactor: A code change that neither fixes a bug nor adds a feature
  • perf: A code change that improves performance
  • test: Adding missing tests or correcting existing tests
  • build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
  • ci: Changes to CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)

Deploy

CI/CD Pipeline

This project uses GitHub Actions for continuous integration and continuous deployment. The configuration files are located in the .github/workflows directory.

  1. Set up your secrets and variables in a GitHub repository

     SSH_PASSWORD
     SSH_USERNAME
     ADMIN_DOMAIN
     APP_DOMAIN
     SERVER_DOMAIN
     BRANCH_DEPLOYMENT
     PROD_NAME
     SSH_FOLDER
     SSH_HOST
     SSH_PORT
  2. Set up labels in a GitHub repository

    backend
    frontend-client
    frontend-admin

VPS Сonfiguration

  1. Connect to your VPS and run the following commands to install the required dependencies:

    sudo apt update
    sudo apt install docker.io
    sudo apt install docker-compose
  2. Create structure, copy files and set up environment variables:

    PROD_NAME
    .
    │
    ├── client
    │   └── .env.docker.prod   # Set up environment variables
    ├── admin
    │   └── .env.docker.prod   # Set up environment variables
    ├── server
    │   └── .env.docker.prod   # Set up environment variables
    ├── database
    │   ├── conf   
    │   │   └── mongod.conf.orig
    │   ├── seed   
    │   │   └── *.json  # copy files from mongodb
    │   ├── Dockerfile 
    │   └── init-seed.sh
    └── docker-compose.prod-ci.yml   # Set up your values instead of text with <>
  3. Run Docker containers:

    docker login ghcr.io -u <github.repository_owner>
    docker compose -f docker-compose.prod-ci.yml -p <PROD_NAME> pull
    docker compose -f docker-compose.prod-ci.yml -p <PROD_NAME> up -d

Folder Structure

.
├── .github
│   └── workflows   # CI/CD configurations
├── .vscode   # VSCode settings
├── apps
│   ├── admin   # Next.js app
│   ├── client   # Next.js app
│   ├── database   # MongoDB
│   └── server   # Nest.js app
├── packages
│   └── eslint-config   # Shared ESLint configuration
├── docker-compose*.yml   # Docker configurations
├── pnpm-workspace.yaml   # pnpm workspace configuration
├── README.md   # Project documentation
└── ...