Skip to content

Commit 2ab4f3e

Browse files
sardapvsardapv
authored
Merge pull request #27 from sardapv/husky
pre-commit hooks
2 parents c2a3600 + 2f70203 commit 2ab4f3e

7 files changed

Lines changed: 221 additions & 62 deletions

File tree

‎.husky/pre-commit‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
#!/bin/sh
2+
. "$(dirname "$0")/_/husky.sh"
3+
4+
# Here you can add all commands you want to run sequentially
5+
# for e.g run pretiier on changed files and run lint or run tests
6+
# if failed no commits will be done
7+
8+
npm run prettier:staged
9+
npm run lint
10+
#npm run test

‎README.md‎

Lines changed: 37 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,50 @@
1-
# angular-material-starter-template 🍄
2-
3-
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
4-
5-
[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
6-
7-
<!-- ALL-CONTRIBUTORS-BADGE:END -->
1+
# angular-material-starter-template (ng-new-app 🍄)
82

93
[![Lint-Prettier-Prettier:verify-Tests-CypressTests-Build-Purgecss-Deploy](https://github.com/sardapv/angular-material-starter-template/actions/workflows/build-deploy.yml/badge.svg)](https://github.com/sardapv/angular-material-starter-template/actions/workflows/build-deploy.yml) ![GitHub](https://img.shields.io/github/license/sardapv/ng-material-starter-template) ![GitHub release (latest by date)](https://img.shields.io/github/v/release/sardapv/angular-material-starter-template)
104

11-
![Angular](https://img.shields.io/badge/Angular-12.0.0-red) ![materialUI](https://img.shields.io/badge/angular--material-12.0.0-blue) ![TailwindCSS](https://img.shields.io/badge/tailwindcss-2.1.2-%2306B6D4) ![Cypress](https://img.shields.io/badge/cypress-7.5.0-%23012) ![Jest](https://img.shields.io/badge/jest-27.0.4-%2316C213) ![Angular_lint](https://img.shields.io/badge/angular--eslint-12.0.1-important) ![PurgeCSS](https://img.shields.io/badge/postbuild%20purgecss-4.0.3-blueviolet) ![SourcemapExplorer](https://img.shields.io/badge/source--map--explorer-2.5.2-ff69b4) ![WebpackBundleAnalyzer](https://img.shields.io/badge/webpack--bundle--analyzer-4.4.1-yellow)
12-
135
![logo](logoForThisRepo.png?raw=true)
146

157
> This boilerplate comes with bunch of preconfigured stuffs and best practises to help you kickstart your project easier & quicker...
168
17-
If you do like this project, do leave a 🌟 ! 😊
9+
If you like this project, do leave a 🌟 ! 😊
1810

1911
[Sample Demo 🚀](https://sardapv.github.io/angular-material-starter-template/) (only shows that Tailwind, Material components are integrated)
2012

2113
# How to get started?
2214

23-
make sure you have node and npm installed on your system before running below commands
15+
Make sure you have node.js latest stable & @angular-cli installed on your system before running below commands
16+
17+
- Run
18+
19+
```bash
20+
npx ng-new-app your-app-name
21+
```
22+
23+
if you don't have npx, Run -
24+
25+
```bash
26+
sudo npm i ng-new-app -g
27+
```
28+
29+
and
30+
31+
```bash
32+
ng-new-app your-app-name
33+
```
2434

25-
- Run `npx ng-new-app your-app-name` \
26-
(if you don't have npx, Run - `sudo npm i ng-new-app -g` then `ng-new-app your-app-name`)
2735
- Read instructions carefully after its successful, refer readme if any doubt.
28-
- Run`ng serve`
36+
- change package.json for project, version & author details
37+
- Run`npm start` and start coding 😉
2938

30-
# What does it offer?
39+
# What's inside the boilerplate?
3140

32-
> Well, you might have noticed badges on top 😉, but keep on reading for detailed summary 🍷
41+
> Keep reading for detailed summary 🍷
3342
3443
- Project Structure inspired form [Rik De Vos&#39;s blog](https://medium.com/dev-jam/5-tips-best-practices-to-organize-your-angular-project-e900db08702e) - tl:dr 3 main modules
3544

3645
- **CoreModule** - only to be imported in Appmodule
3746

3847
- Auth Guard with basic check
39-
4048
- Basic Auth service (Refer model in model folder & change accordingly)
4149

4250
- login
@@ -88,42 +96,38 @@ make sure you have node and npm installed on your system before running below co
8896
- success and error handler
8997
- refresh token handler (inspired from [Rich Franzmeier&#39;s blog](https://www.intertech.com/author/rich-franzmeier/ 'Posts by Rich Franzmeier'))
9098

91-
- Tailwind and post-build PurgeCSS Configuration 😍
99+
- Tailwind and post-build PurgeCSS Configuration
92100

93101
- Tailwind configuration with font, theme and other properties (refer`tailwind.config.js`)
94102
- 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)
95103

96-
- Angular Material Component & CDK integrated 😎
104+
- Angular Material Component & CDK integrated
97105

98106
- Material theme starter pack included, just change colors,font inside`_mat_*.scss` files
99107

100108
- Superpowerd with `Jest` for unit testing and `Cypress` for e2e testing (instead of karma and protractor). Special Thanks to contribution by [@sjetha](https://github.com/sjetha) for this and eslint integration.
101-
102109
- ESLint integrated as recommended by Angular
103-
104-
- 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](https://github.com/deekshithrajbasa) for this ✌🏻
105-
110+
- 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](https://github.com/deekshithrajbasa) for this.
106111
- Global route-loader progressbar on top like github, using [ngx-loading-bar](https://github.com/aitboudad/ngx-loading-bar) package
107-
108112
- Self-XSS warning for use of console on prod build. Inspect & Check console [here](https://sardapv.github.io/angular-material-starter-template/)
109-
110-
- Icons and Typography (CDN links - index.html) 🤓
113+
- Icons and Typography (CDN links - index.html)
111114

112115
- Angular Material Icons added
113116
- Default Poppins, OpenSans font integrated
114117

115118
- pollyfills (for safari) '_web-animations-js_' added for animations support inside _@Component_ decorator
116-
117119
- Local source analyzing tools `webpack-bundle-analyzer` and `source-map-explorer`, Local prod-build deploy and test with purgecss
120+
- [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.
118121

119-
# There is a command for everything you need! 💃
122+
# There is a command for everything you need! 🧑🏻‍💻
120123

121124
| command | What it does? | Thanks to Plugin |
122125
| ------------------------- | :------------------------------------------------------------------- | :------------------------------------------------------------------------------------- |
123126
| `npm start` | Starts the server in dev mode 🤷🏻‍♂️ | |
124127
| `npm run lint` | Runs ESLint on project | |
125128
| `npm run prettier` | Runs prettier on entire src folder | |
126129
| `npm run prettier:verify` | Runs prettier-check and throws error if fails | |
130+
| `npm run prettier:staged` | Runs prettier on only staged (changed) files | |
127131
| `npm run final-build` | Takes prod build and runs PurgeCSS script | |
128132
| `npm run prod-test` | Takes a final-build deployes on local server and give you url to run | [serve](https://www.npmjs.com/package/serve) |
129133
| `npm run purgecss` | Run PurgeCSS job to reduced style.css size into few kbs | [purgecss](https://www.npmjs.com/package/purgecss) |
@@ -133,6 +137,11 @@ make sure you have node and npm installed on your system before running below co
133137
| `npm run e2e` | Opens up Cypress View to run your e2e tests in browser | [@briebug/cypress-schematic](https://www.npmjs.com/package/@briebug/cypress-schematic) |
134138
| `npm run e2e:ci` | Runs cypress tests in console (used for CI/CD) | [@briebug/cypress-schematic](https://www.npmjs.com/package/@briebug/cypress-schematic) |
135139

140+
### Plan
141+
142+
Under `auth-login-page branch`, there is a sample login page designed.
143+
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.
144+
136145
## Contributors ✨
137146

138147
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

‎bin/generate-app.js‎

Lines changed: 12 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,15 @@ const features = [
1919
'Scalable Project Structure, annotations configured, Global style.scss configured',
2020
'Angular Material Component, Icons, Typography & CDK integrated (just change _variables and colors)',
2121
'Utility first Tailwind CSS, some of the custom configuration added',
22-
'Jest & Cypress (NO karma & protractor)',
22+
'Jest & Cypress (No karma & Protractor)',
2323
'Post build PurgeCSS',
2424
'HTTP Interceptor with Request cloners, baseURL prefixer, session expiry handler, global req-res error handler',
2525
'Boilerplate auth service and auth guard with common methods',
2626
'Global route-loader progressbar',
2727
'Custom broadcaster service utlising RxJs Subject for cross modules, component communication in key:value format',
2828
'ESLint Integrated',
2929
'Prettier Configured (exclusive of ESLint with no conflicts)',
30+
'Husky hooks preventing git commits unless all rules passed',
3031
'source-map-explorer and webpack-bundle-analyzer for prod build inspection of modules, you choose',
3132
'Local prod-build deploy and test on server',
3233
'Github Actions Pipeline configured i.e prettify -> prettify:verify -> lint -> jest & cypress tests -> build -> purgecss -> deploy',
@@ -37,9 +38,7 @@ try {
3738
fs.mkdirSync(projectPath);
3839
} catch (err) {
3940
if (err.code === 'EEXIST') {
40-
console.log(
41-
`The file ${projectName} already exist in the current directory, please give it another name.`
42-
);
41+
console.log(`The file ${projectName} already exist in the current directory, please give it another name.`);
4342
} else {
4443
console.log(error);
4544
}
@@ -48,21 +47,9 @@ try {
4847

4948
async function main() {
5049
try {
51-
console.log(
52-
'\x1b[32m',
53-
'--------------------------------------------------------------------',
54-
'\x1b[0m'
55-
);
56-
console.log(
57-
'\x1b[33m',
58-
'ng-new-app 🚀: Downloading & Setting up the project structure...',
59-
'\x1b[0m'
60-
);
61-
console.log(
62-
'\x1b[32m',
63-
'--------------------------------------------------------------------',
64-
'\x1b[0m'
65-
);
50+
console.log('\x1b[32m', '--------------------------------------------------------------------', '\x1b[0m');
51+
console.log('\x1b[33m', 'ng-new-app 🚀: Downloading & Setting up the project structure...', '\x1b[0m');
52+
console.log('\x1b[32m', '--------------------------------------------------------------------', '\x1b[0m');
6653
execSync(`git clone --depth 1 ${git_repo} ${projectPath}`, { stdio: 'inherit' });
6754

6855
console.log('step 1/4 ✅');
@@ -81,6 +68,8 @@ async function main() {
8168
execSync('npx rimraf ./.git');
8269
execSync('npx rimraf ./bin');
8370
execSync('npx rimraf ./logoForThisRepo.png');
71+
execSync('npx rimraf ./all-contributorsrc');
72+
execSync('npx rimraf ./README.md');
8473
fs.rmdirSync(path.join(projectPath, 'bin'), { recursive: true });
8574
console.log('step 3/4 ✅');
8675
console.log(
@@ -108,16 +97,10 @@ async function main() {
10897

10998
console.log('\x1b[31m', 'Read this before you proceed', '\x1b[0m');
11099
console.log('\x1b[34m', ` 1. cd ${projectName}`);
111-
console.log(
112-
` 2. search and replace 'ng-new-app' in all files with your app-name using editor ⚠️`
113-
);
114-
console.log(
115-
` 3. Edit package.json and change starting details like author, description, git url, etc.`
116-
);
117-
console.log(
118-
` 4. If API calls supported, configurebaseurl inenvironment*.ts files (don't end with /)`
119-
);
120-
console.log(' 5. npm start', '\x1b[0m');
100+
console.log(` 2. search and replace 'ng-new-app' in all files with your app-name using editor ⚠️`);
101+
console.log(` 3. Edit package.json and change starting details like author, description, git url, etc.`);
102+
console.log(` 4. If API calls supported, configure baseurl inenvironment*.ts files (don't end with /)`);
103+
console.log(' 5. Run npm start', '\x1b[0m');
121104
console.log();
122105
console.log('step 4/4 ⏳');
123106
console.log();

‎logoForThisRepo.png‎

77.7 KB
Loading

0 commit comments

Comments
 (0)