sardapv / angular-material-starter-template

πŸ„ Angular 14 boilerplate that comes with Material-UI, Tailwind3, Purgecss, Jest & Cypress Support, Optimal project structure & Interceptor inspired from popular blogs, source map analyzer tools, husky, all pre-configured and much more...

Home Page:https://pranavsarda.hashnode.dev/simpler-boilerplate-for-your-next-angular-project

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

angular-material-starter-template (ng-new-app πŸ„)

Package has been updated with everything latest, if you find any issues, please report. PRs welcome

Note: Cypress RUN and Code Coverage is disabled from pipeline until officially fixed by Cypress Team

Lint-Prettier-Prettier:verify-Tests-CypressTests-Build-Purgecss-Deploy GitHub GitHub release (latest by date)

logo

This boilerplate comes with bunch of preconfigured stuffs and best practises to help you kickstart your project easier & quicker...

If you like this project, do leave a 🌟 ! 😊

Sample Demo πŸš€ (only shows that Tailwind, Material components are integrated)

How to get started?

Make sure you have node.js latest stable & @angular-cli installed on your system before running below commands

  • Run
npx ng-new-app your-app-name

if you don't have npx, Run -

sudo npm i ng-new-app -g

and

ng-new-app your-app-name
  • Read instructions carefully after its successful, refer readme if any doubt.
  • change package.json for project, version & author details
  • Runnpm start and start coding πŸ˜‰

What's inside the boilerplate?

Keep reading for detailed summary 🍷

  • Project Structure inspired form Rik De Vos's blog - tl:dr 3 main modules

    • CoreModule - only to be imported in Appmodule

      • Auth Guard with basic check

      • Basic Auth service (Refer model in model folder & change accordingly)

        • login
        • refreshtoken
        • storetoken
        • getTokens
        • logout
      • A broadcaster service included which listens to your key:value pair of events anywhere in app. Here is how to use to share data across modules,components

        • constructor(private _broadcatser: BroadcasterService) {}
        • to broadcast and listen anywhere

          this._broadcatser.broadcast('mykey', 'myvalue');
          
          // to listen inside any component inject service there and do simply below
          
          /* use this service with takeUntil from rxJS and local Subject &
           * destroy in OnDestroy to prevent memory leaks
           */
          
          this._broadcatser.listen('mykey').subscribe({
              next:(data) => console.log(data) // your broadcasted value
            })
          }
    • FeatureModule - all lazyloaded pages/modules goes here

      • before-login modules
      • after-login modules
    • SharedModule - folder with bunch of SCAM (Single Component Angular Module) modules only to be shared globally and imported in feature modules

      • Can have customcomponents, pipes, directives as SCAM pattern (sample scam component as independent module included: recommended rather than creating big shared module)
      • CustomPipes, Directives, Components, Models, Validators folders to organise
      • index.ts provided for shared.module.ts (to organise imports only for items to include inshared.module.ts)
    • annotations @shared, @feature, @core added in tsconfig.json for easy import

  • HTTP Request Interceptor πŸ‘€οΈ

    • in service.ts use endpoints without baseurl as e.g '/action/endpoint'
    • request cloner
    • header modifier
    • success and error handler
    • refresh token handler (inspired from Rich Franzmeier's blog)
  • Tailwind and post-build PurgeCSS Configuration

    • Tailwind configuration with font, theme and other properties (refertailwind.config.js)
    • Note: Tailwind's own purgecss only takes care of tailwind classes, for overall application, post-build purgecss is best (I will write an article explaining why)
  • Angular Material Component & CDK integrated

    • Material theme starter pack included, just change colors,font inside_mat_*.scss files
  • Superpowerd with Jest for unit testing and Cypress for e2e testing (instead of karma and protractor). Special Thanks to contribution by @sjetha for this and eslint integration.

  • ESLint integrated as recommended by Angular

  • Prettier configured (with resolved conflicts between ESLint) - no VS extension being used by team? run command to check if follows rules/ run prettier on all in one go! Thanks to @deekshithrajbasa for this.

  • Global route-loader progressbar on top like github, using ngx-loading-bar package

  • Self-XSS warning for use of console on prod build. Inspect & Check console here

  • Icons and Typography (CDN links - index.html)

    • Angular Material Icons added
    • Default Poppins, OpenSans font integrated
  • pollyfills (for safari) 'web-animations-js' added for animations support inside @Component decorator

  • Local source analyzing tools webpack-bundle-analyzer and source-map-explorer, Local prod-build deploy and test with purgecss

  • [new✨] Pre-commit husky hook, run whatever command you want before git commit. By default prettifying changed/staged files and running lint is enabled, you can comment out run tests too. Refer .husky/pre-commit file for this operations. This helps you maintian same quality across team workspaces.

  • [new✨] Test-coverage report and its workflow (github action). Check index.html in generated coverage folder. Thanks to @sapatgit for adding this and @sjetha for improvising it with best solution.

There is a command for everything you need! πŸ§‘πŸ»β€πŸ’»

command What it does? Thanks to Plugin
npm start Starts the server in dev mode πŸ€·πŸ»β€β™‚οΈ
npm run lint Runs ESLint on project
npm run prettier Runs prettier on entire src folder
npm run prettier:verify Runs prettier-check and throws error if fails
npm run prettier:staged Runs prettier on only staged (changed) files
npm run final-build Takes prod build and runs PurgeCSS script
npm run prod-test Takes a final-build deployes on local server and give you url to run serve
npm run purgecss Run PurgeCSS job to reduced style.css size into few kbs purgecss
npm run source Takes a final-build and opens up source-map-explorer view source-map-explorer
npm run webpack-analyze Takes a final-build and opens up webpack-bundle-analyzer view webpack-bundle-analyzer
npm run test Runs all the jests test cases @briebug/jest-schematic
npm run test:coverage Runs all the jests test cases and generate coverage report @briebug/jest-schematic
npm run e2e Opens up Cypress View to run your e2e tests in browser @cypress/schematic
npm run e2e:ci Runs cypress tests in console (used for CI/CD) @cypress/schematic

Plan

Under auth-login-page branch, there is a sample login page designed. Looking for contributors to build signup, forgot password pages and integration with Firebase with a minimal configuration to change for any new project. PRs welcome✌🏻. Look for project/issues tab.

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Pranav Sarda

πŸ’» πŸ“ πŸ“– πŸ’‘ 🎨

Shafiq Jetha

⚠️ πŸ’» 🚧

Deekshith Raj Basa

πŸ’» πŸ’‘

Saptarshi Majumdar

πŸ“– πŸ’»

This project follows the all-contributors specification. Contributions of any kind welcome!

About

πŸ„ Angular 14 boilerplate that comes with Material-UI, Tailwind3, Purgecss, Jest & Cypress Support, Optimal project structure & Interceptor inspired from popular blogs, source map analyzer tools, husky, all pre-configured and much more...

https://pranavsarda.hashnode.dev/simpler-boilerplate-for-your-next-angular-project

License:MIT License


Languages

Language:TypeScript 62.7%Language:JavaScript 22.1%Language:SCSS 8.9%Language:HTML 5.7%Language:Shell 0.6%