Skip to content

⛩️ Angular starter for enterprise-grade front-end projects, built under a clean architecture that helps to scale and maintain a fast workflow.

License

Notifications You must be signed in to change notification settings

avazquezcendron/ng-boilerplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Angular Boilerplate

angular-logo
Angular starter for enterprise-grade front-end projects, built under a clean architecture
that helps to scale and maintain a fast workflow.

https://angularboilerplate.vercel.app

Contributing Guidelines · Submit an Issue

unit tests with Jest   e2e with Cypress   Contributions welcome


⚗️ Features

  • Strict mode.
  • Lazy loading.
  • Smart and pure components pattern.
  • SCAM pattern.
  • Self-contained components and encapsulated modules.
  • Components types (e.g. component, page).
  • Amazing directory structure.
  • Unit tests with Jest instead of Karma & Jasmine.
  • e2e tests with Cypress instead of Protractor.
  • PWA
  • Dynamic titles and content meta tags.
  • TailwindCSS + Autoprefixer + PurgeCSS setup.
  • Dark mode and theme configuration.
  • Scalable CSS architecture in favor of TailwindCSS layers.
  • Lighthouse reports improved.
  • Migration from TSLint to ESLint.
  • Run unit tests & lint code on Git Hooks using Husky & validate commit messages using commitlint
  • GitHub Actions workflows for code analysis and unit tests.

📄 Pages

Types of pages

public: everybody can see them
private: only logged in users can see them
  • General
    • home
    • not-found
  • Auth
    • sign-in
    • sign-up
    • forgot-password
    • forgot-password-email-sent
    • password-reset
    • password-reset-succeeded
    • password-reset-failed
  • Settings
    • account
    • appearance
    • billing
    • blocked-Users
    • notifications
    • security
    • security-log
  • User
    • my-profile
    • overview
  • Features
    • dashboard

🧱 Self-contained components

  • footer
  • header
  • layout

📡 Services

  • AuthService
  • SeoService
  • ThemeService

📛 Custom directives

  • click-outside (detects when the user clicks outside an element).

🧪 Custom pipes

  • bytes (transforms a numeric value into bytes, KB, MB, GB, etc.).

🛠️ Make some initial tweaks

  • Change application title:

    Go to src/index.html and inside the title tag, replace "Angular Boilerplate" with your app name.

  • Change paths of the pages:

    Go to src/app/core/structs/path.enum.ts to find all the registered routes in an enum file.

    For example, you could replace sign-in with SignIn, login or iniciar_sesion

  • Change titles, descriptions, and robots of the pages:

    Every page has a .route file that contains an exported constant that holds the title, description and a robot's metatag that indicates if it can be indexed or followed by a web crawler.

  • Change your TailwindCSS configuration:

    You can find the config file in the project root, then you can refer to https://tailwindcss.com/docs/configuration to learn how to make your own adjustments.

  • Set a default theme (First time load)

    Go to src\app\@core\services\theme\theme.config.ts and change the following line of code

    from operating system preference

    export const DEFAULT_BASE_THEME = ThemeList.System;

    to light mode

    export const DEFAULT_BASE_THEME = ThemeList.Light;

    or dark mode

    export const DEFAULT_BASE_THEME = ThemeList.Dark;

🗑️ Remove features

There are certain features that you may or may not like to have in your projects, and here's how to remove them:

🌠 Husky & commitlint

Husky allows you to easily run scripts on Git Hooks & commitlint validates if a commit message follows a certain convention.

  • Remove execution of tests and linting on pre-commit:

    • Go to angular-boilerplate\.husky and remove the npm scripts inside the pre-commit file or the file itself.
  • Remove execution of build on pre-push:

    • Go to angular-boilerplate\.husky and remove the npm scripts inside the pre-push file or the file itself.
  • Remove conventional commit messages validation:

    1. Go to angular-boilerplate\.husky and remove the command npx commitlint --edit $1 inside the commit-msg file or the file itself.
    2. Remove the file angular-boilerplate\.commitlintrc.
    3. Run the following command:
    npm uninstall @commitlint/cli @commitlint/config-conventional
    

    OR

    yarn remove @commitlint/cli @commitlint/config-conventional
    
  • Fully remove Husky & commitlint

    1. Remove the folder angular-boilerplate\.husky.
    2. Remove the file angular-boilerplate\.commitlintrc.
    3. Run the following commands:
    npm uninstall husky @commitlint/cli @commitlint/config-conventional
    

    OR

    yarn remove husky @commitlint/cli @commitlint/config-conventional
    

🌠 GitHub Actions workflows

A GitHub Action workflow is a configurable automated process made up of one or more jobs that will help us to validate if some actions pass before we integrate new code into the repository (E.g., run unit tests on pull-requests or branch pushes).

  • Remove CodeQL analysis:

    • Go to angular-boilerplate\.github\workflows and remove the file codeql-analysis.yml
  • Remove tests workflow:

    • Go to angular-boilerplate\.github\workflows and remove the file test.yml

🌠 TailwindCSS

TailwindCSS is a utility-first CSS Framework fully customizable & fully tree shakeable. If you want to replace it with another CSS framework or don't want to use a CSS framework at all, you can easily remove it from the project.

  1. Remove angular-boilerplate\tailwind.config.js file.
  2. Run the following command:
npm uninstall tailwindcss autoprefixer postcss

OR

yarn remove tailwindcss autoprefixer postcss

⛩️ Project structure

├───app
│   ├───@core
│   │   ├───directives
│   │   │   └───click-outside
│   │   ├───guards
│   │   ├───interceptors
│   │   ├───pipes
│   │   │   └───bytes
│   │   ├───services
│   │   │   ├───seo
│   │   │   └───theme
│   │   ├───structs
│   │   └───utils
│   ├───components
│   │   ├───footer
│   │   ├───header
│   │   └───layout
│   ├───pages
│   │   ├───private
│   │   │   ├───dashboard
│   │   │   ├───settings
│   │   │   │   ├───account
│   │   │   │   ├───appearance
│   │   │   │   ├───billing
│   │   │   │   ├───blocked-users
│   │   │   │   ├───notifications
│   │   │   │   ├───security
│   │   │   │   └───security-log
│   │   │   └───user
│   │   │       ├───my-profile
│   │   │       └───overview
│   │   └───public
│   │       ├───auth
│   │       │   ├───forgot-password
│   │       │   ├───forgot-password-email-sent
│   │       │   ├───password-reset
│   │       │   ├───password-reset-failed
│   │       │   ├───password-reset-succeeded
│   │       │   ├───sign-in
│   │       │   ├───sign-up
│   │       │   └───_services
│   │       ├───home
│   │       └───not-found
│   └───router
├───assets
│   └───icons
├───environments
└───theme
    ├───01-base
    ├───02-components
    └───03-utilities

🧙‍♂️ Commands

Command Description NPM Yarn Background command
ng See available commands npm run ng yarn ng ng
start Run your app in development mode npm start yarn start ng serve
build Build your app for production npm run build yarn build ng build
build:stats Build your app for production and generate a "stats.json" file npm run build:stats yarn build:stats ng build --stats-json
watch Run build when files change. npm run watch yarn watch ng build --watch --configuration development
test:unit Run your unit tests npm run test yarn test ng test
test:e2e Run your e2e tests npm run e2e yarn e2e ng e2e
test:coverage Run your unit tests & generates a coverage report npm run test:coverage yarn test:coverage ng test --coverage
lint Use ESLint to lint your app npm run lint yarn lint ng lint
analyze Open webpack-bundle-analyzer npm run analyze yarn analyze webpack-bundle-analyzer dist/angular-boilerplate/stats.json

About

⛩️ Angular starter for enterprise-grade front-end projects, built under a clean architecture that helps to scale and maintain a fast workflow.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published