⛩ Zen ⛩

Nest + Prisma + Angular 🏮 Full Stack Starter Kit

---

🏯 Project Founder's Notes

What is really nice about Nest and Angular is that their programming idioms carry over seamlessly between the two, allowing for front-end devs to contribute to the back-end. Though, there are complexities in creating the GraphQL endpoint that exposes the various CRUD operations over the Prisma data model on the back-end. If that piece of the problem could be code generated entirely, it would allow for virtually anyone to be a full stack developer. A combination between Nest + Prisma + Angular has provided for new capabilities that the industry has not really seen before. This project code generates all the boilerplate required in bridging these 3 technologies together.

There is a tremendous amount of value to be gained by treating the schema.prisma file as the single source of truth, and then code generating everything else from that. It guarantees consistency between the front-end and back-end. It also centralizes the CRUD operations over all the Prisma models via a single import endpoint.

This project also provides solutions for the hardest parts of user authentication as well. I have strictly kept to the Angular and Nest best practices that are being utilized within the ecosystem. This project is an attempt to package the sum total of all the lessons I have learned, and making it publicly available to the community. All the services being generated should be fairly self explanatory, and lots of useful NPM scripts have been provided for the various stages of development to deployment. Better documentation will come with time. 🍜

New contributors are welcome!

🎐 "Give more than you take" ~ Peter Hoang

---

🍣 Project Setup Instructions - GitHub Repo

Requirements

• Node v16
• Docker

# Project setup steps
git clone https://github.com/ZenSoftware/Zen.git --depth=1
cd Zen
# Rename .env.example to .env
npm i --force
docker-compose up -d
npm run prisma:migrate

# Start the Nest API
npm run start:api

# Watch for changes to code generate the GraphQL client
npm run apollo:watch

# Start the Angular site at localhost:4200
npm start

# Reload Apollo VSCode extension via command palette
>Apollo: Reload schema

---

🥢 GraphQL Features

• Nest GraphQL resolvers as a gateway to Prisma Client.
• Apollo GraphQL SDL bindings to Prisma generated via Pal.js CLI! Thank you @AhmedElywa 🎎
• PrismaSelect to solve the N+1 problem for all queries for free.
• Custom npm scripts to code generate the Nest GraphQL gateway on Prisma schema changes.
• Code generation of apollo-angular services to enable simple, type safe access to the GraphQL API within Angular. 🎀 Modern dev tooling configured for the project, allowing for Apollo extension for VS Code to provide auto-completion within gql tags for all .gql.ts files.
• An Angular GraphQLModule to simplify the configuration of the ApolloClient to enable/disable the varying ApolloLink features.
  • HttpBatchLink for batching several GraphQL requests that occur within a short debounce interval. This really helps to alleviate network congestion.
  • UploadLink to give ApolloClient HTTP multi-part form requests capabilities. Enabling the uploading of files via GraphQLUpload.
  • WebSocketLink for GraphQL subscriptions over websockets.

---

🍱 API Authentication, Performance & Scaling

• Nest authentication, user registration, and login system designed specifically to work for an Angular SPA (single page application). This project will provide responsive, "mobile first" interfaces for the standard set of authentication features.
• New account component
• Login component with remember me option
• Forgot password component and full password reset flow.
• Password change component for user dashboards
• Angular route guards and Angular directives to show/hide content depending on user's roles.
• Nest authorization directives for server side role-based access control to allow for declarative, fine grained security control over all GraphQL queries and mutations. Follow the Git Issue here.
• 100% stateless web server authentication via JWT (Javascript Web Tokens). Keeping the API stateless will enable horizontal scaling of container replicas in production.

---

🍵 Modern Web Components and Responsive UIs

• SASS chosen as the css transpiler of choice
• Angular Material components & theme.
• Mobile first approach to build the framework's core components (login form, etc).
• Directly import Bootstrap reset, utilities, & grid features through SASS imports, and exclude the Bootstrap theme and conflicting component styles. These features are missing from Angular Material, and greatly simplify the creation of responsive, mobile first applications.

---

🍡 Project & Dev Tools

• Nx for project management to allow for the use of Nx Console extensions for VSCode. Nx Console is a GUI interface for monorepos that adds a lot of modern developer conveniences. It also helps to simplify the use of the various Angular & Nest code generation schematics available in the ecosystem.
• Strict typings with Typescript for everything. Even the code generation tools are written in Typescript.
• Angular Language Service for VSCode for modern IDE tooling.
• NPM scripts for versioned releases of the Nest api server as a containerized Docker image. node:16-alpine is used as the Docker container base image, and the appropriate tsconfig.app.json configurations are being applied for the Node v14 Nest app.
• Example Kubernetes deployment scripts
• Enforced code formatting via Prettier & import-sort, guaranteeing all contributions to the project are standardized with predictable structure, and clear legibility.
• @nest-modules/mailer for automated emailing, and pre-configured Handlebars e-mail templates for the various web portal's emailing needs. Handlebars has similar double bracket {{contextField}} template interpolation, akin to Angular templates. Custom HTML e-mail triggers within Nest are made very simple by simply passing a JSON context and the template's file name as parameters to the class injectable MailService. The apps/api/src/app/mail/templates directory is a conventions first approach.
• Compodoc to generate Nest & Angular documentation.