NestJS NuxtJs Boilerplate

NestJS and NuxtJS starter boilerplate

Requirements

• Node.js 14.4.0
• PostgreSQL

Development

For development the following additional dependencies are required:

• Homebrew (for Mac OS X)
• overmind
• yarn

Setup

Make sure you have the latest version of nodenv (Node.js version manager) by following instruction:

brew upgrade nodenv

Create development and test databases:

CREATE DATABASE nest-nuxt-boilerplate-development
CREATE DATABASE nest-nuxt-boilerplate-test

Run migrations:

yarn db:migrate
NODE_ENV=test yarn db:migrate

Project structure

What's included

NuxtJS Frontend

• @nuxtjs/pwa Supercharge Nuxt with a heavily tested, updated and stable PWA solution
• @nuxtjs/stylelint-module Stylelint module for NuxtJS
• @nuxtjs/vuetify Vuetify Module for NuxtJS
• @nuxt/typescript-build NuxtJS TypeScript Build Support
• @nuxt/typescript-runtime NuxtJS TypeScript Runtime Support
• @nuxtjs/composition-api Use Vue 3 Composition API with Nuxt-specific features
• vuex-module-decorators TypeScript/ES7 Decorators to create Vuex modules declaratively
• @sentry/browser Sentry integration for browser
• @nuxtjs/apollo Nuxt.js module to use vue-apollo
• @vue/apollo-composable This library integrates apollo in your Vue components with declarative queries

Also interesting for NuxtJS

• @nuxtjs/style-resources Handling scss, sass, and stylus files
• nuxt-webfontloader Efficient web font loading
• @aceforth/nuxt-optimized-images Automatically optimizes images used in NuxtJS projects (JPEG, PNG, SVG, WebP and GIF)

NestJS Backend

• nestjs-pino Platform agnostic logger for NestJS based on Pino with request context in every log
• @nestjs/config Configuration module based on the dotenv package
• @nestjs/graphq GraphQL (TypeScript) module for Nest framework
• @nestjs/passport Passport utilities module for Nest
• @nestjs/typeorm Typeorm module for Nest
• @nestjs/terminus Integrated healthchecks for Nest
• @ntegral/nestjs-sentry Sentry module for NestJS

Production Setup for k8s cluster

This project is managed with helm v3

• Replace nest-nuxt-boilerplate with your awesome-project-name in /deploy
• Replace your-namespace with your own k8s namespace

1. Create shared namespace

   kubectl create ns your-namespace

2. Copy deploy/secrets.example.yaml to

   • deploy/secrets.yaml

3. Deploy secrets

   kubectl apply -n your-namespace -f deploy/secrets.yaml

4. Deploy Helm chart

   cd deploy && helmfile apply

Deployment

Push to master branch will trigger new deployment on k8s.

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000 (backend) and localhost:5000 (frontend)
$ overmind s

# build for production and launch combinded server (NestJS server serves NuxtJS frontend)
$ yarn build
$ yarn start:prod

For detailed explanation on how things work, check out NestJS docs or NuxtJS docs.

DB Migrations

k8s deployment includes db-migrate-job which will automatically run migrations on each deplyoment. Locally you have to use the following commands to interact with typeorm cli.

yarn db:migration:generate <migration_name>
yarn db:migrate
yarn db:rollback

To run migrations against test database use NODE_ENV=test yarn db:migrate

Graphql Schema and Operations

We chose to use the Nest.js code first approach (see here) which means that the app/server/schemal.gql file is automatically generated based on the types and resolvers we define in our Nest.js application. Further, we make use of GraphQL Code Generator to generate types and queries on the fly for the client based on the server's schema.gql file and the operations defined in one of the following files:

• app/client/apollo/mutations.graphql
• app/client/apollo/queries.graphql
• app/client/apollo/subscriptions.graphql

The results are written to app/client/apollo/generated-operations.ts and can be used as-is (see here for more information).

If you run the application with overmind s then generated-operations.ts will be re-generated if there are changes to one of the files listed above. Otherwise you have to run yarn generate:types manually to re-generate the output file.