Nx Angular Monorepo Architecture Sample

This repo is an example of a monorepo architecture using Nx and Angular. It contains a simple todo application with a shared library and a backend API.

Commands

See the package.json to run the following comands:

• npm run s.todo.dev to start the development server for the todo app
• npm run b.todo.dev to build the todo app for development
• npm run s.todo.api to start the development server for the api
• npm run storybook to start the storybook server
• npm run build-storybook to build the storybook app

Running Capacitor Commands

Capacitorjs has it's own build architecture, so it is not managed by Nx, although it is part of the monorepo. To run capacitor commands, you need to navigate to the capacitorjs directory and run the commands there.

• cd apps/task-manager/capacitorjs

Then run the capacitor commands using npx cap ... as explained the capacitor documentation.

Frameworks

The monorepo contains the following frameworks:

• Nx - Smart Monorepos · Fast CI
• Angular - One framework. Mobile & desktop.
• NgRx - Reactive State for Angular
• Tailwind CSS - A utility-first CSS framework for rapid UI development.
• Angular Material - Material Design components for Angular
• Capacitor - Build cross-platform Native Progressive Web Apps for iOS, Android, and the web
• NestJS - A progressive Node.js framework for building efficient, reliable and scalable server-side applications.
• Storybook - The UI component workshop
• Jest - Delightful JavaScript Testing
• Cypress - Fast, easy and reliable testing for anything that runs in a browser.
• Prettier - Opinionated Code Formatter
• ESLint - Find and fix problems in your JavaScript code

Directory Structure

The monorepo is structured as follows ( not including e2e apps ):

apps/
  storybook-app/                       # Storybook app
  task-manager/                        # Domain ( Domain Driven Design ) for TODO app
    api/                               # Backend API for the TODO app    
    capacitorjs/                       # CapacitorJS - android, ios - for todo app
    todo/                              # Angular app for the TODO app

libs/
  shared/                              # Shared libraries for ALL apps and domain libraries
    domain/                            # Shared business logic for all apps and libraries
    tailwind-preset/                   # Shared tailwindcss preset
    ui-design-library-components/      # Shared UI components for all apps and ui libraries
  task-manager/                        # Domain ( Domain Driven Design ) for TODO app
    domain/                            # Business logic for the task-manager domain               
    ui-task-manager/                   # UI components for the task-manager domain _only_  

Documentation

This project was generated using Nx. See README for more information.

See Create Nx Workspace for how I created this architecture.