angular-material-starter-template 🍄

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

If you do 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 and npm 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 then ng-new-app your-app-name)
Read instructions carefully after its successful, refer readme if any doubt.
Runng serve

What does it offer?

Well, you might have noticed badges on top 😉, but keep on 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

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 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 e2e`	Opens up Cypress View to run your e2e tests in browser	@briebug/cypress-schematic
`npm run e2e:ci`	Runs cypress tests in console (used for CI/CD)	@briebug/cypress-schematic

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Pranav Sarda}
💻 📝 📖 💡 🎨

_{Shafiq Jetha}

⚠️

💻

_{Deekshith Raj Basa}
💻 💡

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

samuelbearman/angular-material-starter-template

angular-material-starter-template 🍄

How to get started?

What does it offer?

There is a command for everything you need! 💃

Contributors ✨