nest-vue

Nx monorepo template with dockerized NestJS + Fastify backend, Vue frontend, Jest + Cypress testing, and agnostic data via Prisma/TypeORM + GraphQL.

Managed by Yarn with PnP enabled, and powered by Docker with NGINX + Node.js under the hood, certbot SSL, and Jenkins CI/CD.

Demo

An implementation of this monorepo running on a basic DigitalOcean droplet (1vCPU, 1GB memory, 25GB SSD, US-West) is available at https://nest-vue.troncali.com.

Customizeable

There are a number of ways to extend the monorepo or replace parts of it. 36 official Nx plugins support frameworks and libraries like React, Express, and Angular—plus contributions from the community for Vite, Rust, Solid, and others. These plugins provide generators, executors, and other tools to help scaffold new applications that add to or replace pieces of the monorepo.

Ultimatley, there are many directions the monorepo can go.

Get Started

Clone this repository with degit to scaffold a fresh monorepo without git history:

npm install -global degit
degit troncali/nest-vue project-name
cd project-name
yarn install

Or fork it:

git clone --depth 1 https://github.com/YOUR-USERNAME/nest-vue project-name
cd project-name
yarn install

You could also configure your new project to pull future updates from this repository, but be careful when merging changes.

VSCode Setup

Yarn has a guide for working with PnP packages in Visual Studio Code.

TLDR: yarn dlx @yarnpkg/sdks vscode.

Project Setup

Some minimal setup is required (environment variables, certificates, etc) to run apps and containers in your local environment. Follow the guide.

The Stack

Here's what this monorepo helps to more easily deploy, so the focus can stay on substance:

Apps

• Nest 9 Backend – progressive Node.js framework for building efficient, reliable, and scalable server-side applications. Configured with Fastify for better performance than Express.
• Vue 3 Frontend – JavaScript framework with a declarative and component-based programming model that helps efficiently develop user interfaces. With Vite, Vitest, and TailwindCSS 3.
• NGINX – high-performance HTTP server and reverse proxy with simple configuration and low resource consumption.
• Database of Choice – agnostic data access through Prisma 4, TypeORM 0.3, and GraphQL via Mercurius for better performance than Apollo. PostgreSQL and MongoDB setups included, but configure and use any supported database.

Tools

• Nx 14 – extensible build framework with computation caching to rebuild only what is necessary; includes Nest and Vue plugins that expose their CLI generators, etc.
• Yarn 3 – slim dependency management using Plug'N'Play for smaller repositories.
• Docker – spin up the database, backend, and frontend with consistent environments both locally and on remote hosts.
• Jenkins – base CI/CD pipeline that can be built out to meet requirements.
• Certbot – SSL certificate generation for both local development and remote hosts.

Documentation

Learn how to get started with this respository, how to deploy it, how services are set up, and how to customize services at nest-vue.troncali.com/guide/.

• Initial Setup
• Deploy
• Guide
• Backend Documentation
• Backend API on Postman

Scripts

Scripts run from the monorepo root and must be called with yarn to resolve dependencies. Cross-var and cross-env are used for Windows compatibility.

Development

• yarn docker:dev – spins up db and nginx for local development
  • Nginx proxies to the local backend to mimic production and take advantage of developer tools (like file watching)
• yarn start [app] – serve and watch an app (backend or frontend)
  • backend served at http://localhost:3001/api/; also HTTPS if nginx container is running
  • frontend served at http://localhost:8080/
• yarn nx [command] – run any normal nx command
• yarn build [app] – output compiled app to ./dist/apps/[project]
• yarn build:prod – output compiled app optimized for production
• yarn migrate – migrate the database using Prisma (default) or TypeORM
• yarn prisma – run any prisma command and options
• yarn prisma:pnp – run any prisma command and options that require other dependencies
• yarn typeorm:migration-[create|run|undo] – create, run, or undo a TypeORM database migration
• yarn seed – seed the database using Prisma (default) or TypeORM

Testing

• yarn test [app] – run unit tests
• yarn e2e [app] – run integration tests (Cypress for frontend, Jest for backend)
• yarn snyk – check dependency vulnerabilities

Deployment (Blue/Green)

• yarn deploy:init – configure for an easy first deployment
• yarn deploy:migrate – run migrations and seed data
• yarn deploy:staging – deploy to current staging environment
• yarn deploy:swap – swap production and staging deployments (no downtime)
• yarn deploy:production – deploy to current production environment (with downtime)
• yarn deploy:placeholder – replace current backend in staging with lightweight placeholder

Support

• yarn docker:dev-certs – create SSL certificates for local development
• yarn docker:build – build production docker images
• yarn docs:b – output backend docs to ./dist/docs/backend; serve at localhost:9997
• yarn docs:m – output compiled monorepo docs to ./dist/docs/vitepress
• yarn docs:m-dev – watch and serve monorepo docs at localhost:9998
• yarn jenkins – serve Jenkins at localhost:9999
  • Must install Jenkins: brew install jenkins