Nx boilerplate Angular16/Postgres/Nest/RESTfullAPI/TypeORM/Storybook

Comienzo rápido   •   Discord   •   Website (Pronto)

---

Table of Contents

• Nx boilerplate Angular16/Postgres/Nest/RESTfullAPI/TypeORM/Storybook
  • Table of Contents
  • Technologies - Frontend
  • Technologies - Backend
  • Project Initialization Guide
    • 1. Installation
    • 2. Git Configuration
    • 3. Making Commits
    • 4. Running the Project
    • 5. Further Documentation
  • Global project structure
  • Global scripts
    • Git Configuration
    • Backend Commands
    • Database Migration Commands
    • Database Seeding and Clearing
    • Frontend Commands
    • Storybook Commands
  • Features
    • Frontend
    • Backend
    • General
  • Credits and references
• How can I contribute?
  • Support
  • Read the Contribution Guidelines
  • Security
  • License
  • Contributors
  • Connect with us!

Technologies - Frontend

Angular 16	Tailwind	Storybook	Compodoc	NX

Technologies - Backend

Nest	PostgreSQL	TypeORM	Docker	NX

Project Initialization Guide

Welcome to our project! This guide will help you set up and understand the necessary steps to get started. Let's dive in.

1. Installation

Before you can start working on the project, you need to install all the required dependencies. We use yarn as our package manager. To install everything, simply run:

yarn install

This command will fetch and install all the necessary dependencies listed in the package.json file.

2. Git Configuration

To ensure consistent and well-formatted commit messages, we utilize the czVinyl library. Before making your first commit, execute the following command:

npm run git:config

This configures git to allow the use of the git c command for making commits. By doing so, your commits will be formatted according to the standards set by the czVinyl library.

3. Making Commits

Now that everything is set up, you can start making changes to the code. When you're ready to commit those changes, use:

git c

This will guide you through the process of creating a well-structured commit message.

4. Running the Project

To get the project up and running, use the following commands based on your needs:

• For the Backend (Development mode):

npm run start

• For the Backend (Production mode):

npm run start:prod

• For the Frontend:

npm run serve

• For Storybook:

npm run story

5. Further Documentation

Be sure to check out the provided documentation for detailed information about database migrations, seeding, and other advanced topics.

---

By following these steps, you should have a smooth experience as you begin your journey with our project. If you have any issues or questions, please refer to the project's documentation or reach out to the team. Happy coding!

Global project structure

NX-boilerplate.Nestjs-RESTfull-Angular16-Postgres
├── .gitattributes
├── .gitconfig
├── .gitignore
├── .prettierignore
├── .prettierrc
├── .storybook
│ ├── main.ts
│ └── tsconfig.json
├── .vscode
│ ├── extensions.json
│ └── settings.json
├── backend
│ ├── ...
│ ├── api-e2e
│ │ └── ...
│ └── database
│ └── ...
├── config
│ └── ...
├── db
│ └── init.sql
├── dist
│ ├── backend
│ │ └── ...
│ └── storybook
│ └── ...
├── docker-compose.yml
├── environments
│ └── ...
├── frontend
│ ├── ...
│ ├── ui
│ │ ├── ...
│ │ └── stories
│ │ └── ...
├── libs
│ └── tailwind-preset
│ └── ...
├── node_modules
│ └── ...
├── nx.json
├── package.json
├── README.md
├── tools
│ ├── tsconfig.tools.json
├── tsconfig.base.json
├── types
│ ├── express-custom
│ │ └── index.d.ts
│ └── nodejs
│ └── index.d.ts
├── yarn-error.log
└── yarn.lock

Global scripts

Below is a detailed description of the configured scripts in the project:

Git Configuration

• git:config:
  • Command: `git config --local include.path ../.gitconfig`
  • Description: Configures git to include a local .gitconfig file. This allows for project-specific git configurations.

Backend Commands

• start:
  • Command: `cross-env NODE_ENV=develop nx serve api`
  • Description: Starts the backend (API) in development mode.
• start:prod:
  • Command: `cross-env NODE_ENV=production nx serve api`
  • Description: Starts the backend (API) in production mode.

Database Migration Commands

• migrate:run:
  • Command: `cross-env NODE_ENV=none nx run database:mig-run`
  • Description: Executes pending migrations on the database.
• migrate:gen:
  • Command: `cross-env NODE_ENV=none nx run database:mig-gen`
  • Description: Generates a new migration based on detected changes in the entities.
• migrate:revert:
  • Command: `cross-env NODE_ENV=none nx run database:mig-rev`
  • Description: Reverts the last migration executed on the database.

Database Seeding and Clearing

• make:seed:
  • Command: `cross-env NODE_ENV=none nx run database:seed`
  • Description: Executes seeders to populate the database with test data.
• clear:db:
  • Command: `cross-env NODE_ENV=none nx run database:clear`
  • Description: Clears the entire database, removing all records.

Frontend Commands

• serve:
  • Command: `cross-env NODE_ENV=develop nx run frontend-app:serve`
  • Description: Starts the frontend in development mode.

Storybook Commands

• story:
  • Command: `nx run frontend-ui:storybook`
  • Description: Starts Storybook for visualizing and developing UI components in an isolated environment.
• story:build:
  • Command: `nx run frontend-ui:build-storybook`
  • Description: Builds a static version of Storybook that can be deployed.

Features

Frontend

• Frontend correctly set up to work with Angular 16.
• Tailwind fully configured for use in the UI library (This library is intended for creating individual components to be used in the frontend) as well as in the frontend.
• Service separation by endpoint in the frontend to keep components clean.
• Customized error handlers.
• Components created in a separate library for reusability and easy documentation with Storybook and Compodoc.
• Access to the library components from the frontend using a single path @ui/components.
• Typed components to accept certain properties.
• Components with predefined style autocompletion from the library.
• Reactive errors in forms.
• Centralized validators to avoid repeating each validation in every form.
• Directive created to centrally manage the ControlValueAccessor and extend it to reusable components that need it.
• Predefined error list for forms.
• Capability to create customized validators and send them through the custom component.
• Capability to create formGroup level validators.
• The following routes have been added to the frontend: auth/login, auth/revalidate, auth/reset-password, auth/recover, user/register, auth/change-password, user/change-password, dashboard, and the main route (./).
• Atomic design methodology used for component management (Atoms and molecules are managed in the library while organisms and pages are managed in the frontend).
• Documentation of some components in storybook as an example.
• Adapters added for the endpoints.
• Guards added to manage public routes, private routes, and the password reset route.
• Usage of signals to manage data.
• Custom Swal manager for handling notifications.
• Common services created with signals to delete, create, and change data.

Backend

• Database completely separated from the API for better scaling.
• Environments set up to be used anywhere, without using process.env and without the need to change their data type. Everything is done in a centralized manner and imported with the path @environments.
• Autocomplete for available environment variables in case process.env is used.
• Environments configured for both production and development, as well as for database environments found in a .env file.
• Environments automatically switch between production and development, this change is made just by running the project with the preconfigured scripts in package.json.
• TypeORM's synchronize functionality automatically activates in development and deactivates in production.
• Docker set up to mount the Postgres image.
• Guardian added in the backend to grant access only with a valid token.
• Backend interceptors that format the response sent to the client in case of error and in case of success.
• @Public decorator added to mark routes that don't need a token, like registration, login, etc.
• JWT strategy implemented.
• Fully customized response handler to format errors and successful responses.
• Decorator added for role management (Allow certain roles to handle certain endpoints).
• Handlebars added in the backend to manage templates sent to user's email.
• class-validator used to validate entity fields in DTOs.
• All main entities extend a base class to have the following fields: id, creation date, update date, deletion date, and id of the last user to edit the entity.
• Factory added to create fake data and automatically fill the database with the data needed for testing.
• Some endpoints have pagination ready.
• Commonly used endpoints added. We have the following: Query all users, query users by their roles, query a single user, query users and projects, query all projects, query a single project, revalidate token, query a user and all their projects, query users by project id, register user, add project, edit user, delete user, block user, add user to project, edit project, delete project, log in user, request password change, change password, create task, etc.
• Endpoint documentation with Swagger.
• Decorator added to manage Swagger documentation in a more organized manner.

General

• Scripts configured at the project root so that there's no need to switch to backend or frontend directories; everything is done from the root. The following scripts have been fully configured: to start the backend project in development, to start the backend project in production, to start the frontend project in development, to run migrations, to generate migrations, to revert migrations, to clear the entire database, and to run storybook.
• Commits can be made with a special format for documentation based on the type of change made. This can be done using the git c command.
• Email is sent when a password change is requested.
• Email is sent when the password is successfully changed.
• The sending and response of each endpoint is fully typed.

Credits and references

• Cómo estructurar tu project de ReactJs? - Gentleman Programming
• Login Role con NestJS (jwt) - Parte I - Ruslan Gonzales
• Instalación de Storybook para React y Atomic Design - Guillermo Rodas
• Storybook
• Catch Type Errors at Runtime with Zod: An Intro to this JavaScript Library
• Implementing a secure password reset in Node.js
• Nest + GraphQL: Evoluciona tus APIs - Fernando Herrera
• Exclude a route from Nest.js AuthGaurd (make any route publicly available) - Danny Pule
• Nest
• Introducción a NestJS | Clase 0 | NestJS de 0 a 100 - codrr
• Primeros pasos | Clase 0 | Curso TypeScript - codrr
• Aprendemos sobre la nueva forma de hacer Clean Architecture en Front - Gentleman Programming
• Estructuramos en vivo un project de React usando conceptos de Clean Architecture - Gentleman Programming
• Maneja #ERRORS como un campeón con #AXIOS #INTERCEPTOR - Gentleman Programming
• cz-vinyl
• pet-vitality-app - Manuel Gil
• 🐾 Cómo crear un monorepo con NestJS y Nx 🐱‍👤 - Manuel Gil
• 🐾 Cómo usar migration y seeding con TypeORM y NestJS 🐱‍👤 - Manuel Gil
• 6 consejos para que DISEÑES BIEN tu API REST - Manuel Zapata
• Best Practices in API Design
• REST API Best Practices – REST Endpoint Design Examples
• API REST con NODE.js || GUÍA de BUENAS PRÁCTICAS - Carlos Azaustre
• Many Tailwind CSS classes doesn´t work on my Angular
• How to Not Get Lost in Your Project
• No todo es STANDALONE Component - Jimy Dolores - Domini Code
• Storybook for Angular tutorial
• Cómo integrar Storybook en tus proyectos de Angular - Garaje de ideas
• Content Configuration - Tailwindcss
• Creating an Angular app in minutes with Cypress, StoryBook, Tailwind CSS and Nx
• Manipulate Angular components with content projection in Storybook
• Component Story Format 3.0
• Set up Compodoc for Storybook on Nx
• Resolve JSON files as modules in TypeScript
• Controls
• How DestroyRef Made My Life Easier with Angular 16
• How I’ve Created Custom Inputs in Angular 16!
• Keeping state with a Service using Signals - Alfredo Perez
• Angular 16 - Signals and CRUD with Json Server - Sebastian Persson
• Exploring a Revolutionary Approach to Data Handling in Angular - A Walkthrough Video - Sebastian Persson
• Angular: De cero a experto - Edición 2023 - Fernando Herrera
• Reusable Input and Select component with Control Value Accessor in Angular
• Get params from URL using inputs in Angular 16 | Enable withComponentInputBinding() in Angular 16

How can I contribute?

We welcome contributions from anyone who would like to help improve our project. Whether you're an experienced developer or just starting out, there are plenty of ways to get involved.

Support

If you need help using our project, please visit our SUPPORT.md file. This document provides information on how to get help from the community, how to report issues, and where to find additional resources.

Read the Contribution Guidelines

Before you start contributing, please read our CONTRIBUTING.md file. This outlines the contribution guidelines and provides instructions for setting up your development environment, submitting pull requests, and more.

Security

We take the security of our project seriously. If you discover a security vulnerability, please let us know right away. We will investigate all legitimate reports and do our best to quickly address any issues.

To learn more about our security practices, please read our SECURITY.md file.

License

MIT License

Contributors

Made with contrib.rocks.

[ ↑ to top ↑ ]

Connect with us!

• Join the community
• Follow us on Twitter

---