Nx Angular Monorepo boilerplate template seed for your next Enterprise System Project

✨ This workspace has been generated by Nx, Smart Monorepos · Fast CI. ✨

Content

• Introduction
• Philosophy
• Features
• Code style Guidelines
• Requirements
• Start the application
• Build for production
• Explore the project graph
• Running tasks
• Lessons

Introduction

Since this template has been created and the main goal is to simplify the steps for anyone who wants to customize the way of development itself.

Developer experience first __

Each lesson is represented in a separate branch so you would have the chance to know the changes that have been made accordingly.

Philosophy

• 🎃 Minimal code
• 🌍 SEO-friendly
• 💎 Responsive design
• 🚀 Production-ready

Features

• 🔥 Nx & Angular 18 with Signals and Standalone.
• 🔥 NgRx with Signals Store.
• 🔥 Micro-frontends.
• 🔥 Tailwind CSS with aspect ratio, typography and Dark/Light Theme toggle.
• 🔥 i18n using Transloco.
• 🔥 Compatible Routing and Core Layout UI components.
• 🔥 Angular Guards for logged-in users.

Tools

• 🎉 TypeScript
• ✏️ ESLint
• 🛠 Prettier
• 🦊 Husky
• 🚫 lint-staged
• 🚨 Commitlint & commitizen
• 🎡 Jest Angular Testing Library

Layouts

• Home Layout
• Login/Sign-up Layout
• NotFound Layout

Code style guidelines (Linting Rules)

• Airbnb styled guide
• TypeScript compatible
• Automatically remove unused imports
• Imports sorting
• Tailwind CSS plugin
• Running tasks

Requirements

• Node.js and npm

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 18.0.7
Node: 20.13.1
Package Manager: pnpm 9.13.0

Angular: 18.0.7
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, ssr

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1800.7 (cli-only)
@angular-devkit/build-angular   18.0.7
@angular-devkit/core            18.0.7
@angular-devkit/schematics      18.0.7
@schematics/angular             18.0.7
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.10

How to Start the application

Run npx nx serve admin-portal to start the development server. Happy coding!

How to Build for production

Run npx nx build admin-portal to build the application. The build artifacts are stored in the output directory (e.g. dist/ or build/), ready to be deployed.

Running Developer Tasks

To execute tasks with Nx use the following syntax:

npx nx <target> <project> <...options>

You can also run multiple targets:

npx nx run-many -t <target1> <target2>

..or add -p to filter specific projects

npx nx run-many -t <target1> <target2> -p <proj1> <proj2>

Targets can be defined in the package.json or projects.json. Learn more in the docs.

Explore the project graph

Run npx nx graph to show the graph of the workspace. It will show tasks that you can run with Nx.

• Learn more about Exploring the Project Graph

Connect with me!

• Subscribe to the Youtube Channel

Lessons

• 01-lesson-auth-module
• 02-lesson-setup-ngrx
• 03-lesson-setup-i18n
• 04-lesson-setup-ui
• 05-lesson-chores-and-build-tools