angular-starter-kit

Angular starter kit

Author

Nhan Nguyen

• github/nhannguyendevjs
• twitter/nhannguyendevjs
• linkedin/nhannguyendevjs
• dev.to/nhannguyendevjs
• medium/nhannguyendevjs

License

Copyright © 2024, Nhan Nguyen.

Released under the MIT License.

Things We Code With

Initial Project

Init Angular project

ng new angular-starter-kit --standalone=true --style=scss --skip-git=true --skip-tests=true
npm i -D webpack-bundle-analyzer

Angular Material

ng add @angular/material

Angular PWA

ng add @angular/pwa

Tailwind CSS

npm i -D tailwindcss postcss autoprefixer tailwind-merge
npx tailwindcss init

Transloco

ng add @jsverse/transloco

Playwright

npm init playwright@latest

Vitest

npm i -D vitest @vitest/coverage-istanbul @vitest/coverage-v8 @vitest/ui prettier

Libraries

npm i lodash luxon @ngrx/store animate.css ngx-skeleton-loader ngx-toastr uuid nanoid zod hotkeys-js swiper apexcharts ng-apexcharts
npm i -D @types/lodash @types/luxon @types/uuid @types/nanoid

Coding Naming Conventions

➖ PascalCase 👉 Classes and Methods

➖ camelCase 👉 variable and function names

➖ snake_case 👉 file names and variable identifiers

➖ kebab-case 👉 HTML attributes and CSS classes

➖ UPPERCASE 👉 CONSTANTS and ENUMERATIONS

➖ UPPER_SNAKE_CASE 👉 CONSTANTS and ENVIRONMENT_VARIABLES

Git Branch Naming Convention

Code Flow Branches

➖ Development (dev)

All new features and bug fixes should be brought to the development branch.

➖ QA/Test (test)

Contains all codes ready for QA testing.

➖ Staging (staging, Optional)

It contains tested features that the stakeholders wanted to be available either for a demo or a proposal before elevating into production.

➖ Master (master)

The production branch, if the repository is published, is the default branch being presented.

Temporary Branches

➖ Feature

Any code changes for a new module or use case should be done on a feature branch. This branch is created based on the current development branch. When all changes are Done, a Pull Request/Merge Request is needed to put all of these to the development branch.

Examples

feature/AZURE-1234

feature/AZURE-5678

➖ Bug Fix

If the code changes made from the feature branch were rejected after a release, sprint or demo, any necessary fixes after that should be done on the bugfix branch.

Examples

bugfix/AZURE-1234

bugfix/AZURE-5678

➖ Hot Fix

If there is a need to fix a blocker, do a temporary patch, or apply a critical framework or configuration change that should be handled immediately, it should be created as a Hotfix. It does not follow the scheduled integration of code and could be merged directly to the production branch and then into the development branch later.

Examples

hotfix/disable-endpoint-zero-day-exploit

hotfix/increase-scaling-threshold

➖ Experimental

Any new feature or idea that is not part of a release or a sprint. A branch for playing around.

Examples

experimental/dark-theme-support

➖ Build

A branch specifically for creating specific build artifacts or for doing code coverage runs.

Examples

build/azure-metric

➖ Release

A branch for tagging a specific release version.

Examples

release/app-1.0.0

➖ Merging

A temporary branch for resolving merge conflicts, usually between the latest development and a feature or Hotfix branch. This can also be used if two branches of a feature being worked on by multiple developers need to be merged, verified, and finalized.

Examples

merge/dev_lombok-refactoring

merge/combined-device-support

Visual Studio Extensions

• Prettier - Code formatter
• SonarLint
• Code Spell Checker

Issues