Skip to content

Commit 6d25b31

Browse files
actionanandactionanand
authored
Merge pull request #1 from actionanand/1-skeleton
1 skeleton
2 parents ed3f730 + 8390e4e commit 6d25b31

10 files changed

Lines changed: 3502 additions & 111 deletions

File tree

‎.github/workflows/gh-pages.yml‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
name: GitHub Pages - Angular 22.0.0
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
8+
permissions:
9+
contents: write
10+
11+
jobs:
12+
deploy:
13+
runs-on: ubuntu-latest
14+
steps:
15+
- name: Checkout
16+
uses: actions/checkout@v4
17+
18+
- name: Setup Node.js
19+
uses: actions/setup-node@v4
20+
with:
21+
node-version: '24.16.0'
22+
23+
- name: Install dependencies
24+
run: npm install
25+
26+
- name: Extract repository name from package.json
27+
id: package
28+
run: echo "name=$(node -p "require('./package.json').name")" >> $GITHUB_OUTPUT
29+
30+
- name: Build Angular app for GitHub Pages
31+
run: npm run build:gh --configuration=production
32+
33+
- name: Copy error files to redirect to home
34+
run: npm run copy-error-page
35+
36+
- name: Deploy
37+
if: success()
38+
uses: peaceiris/actions-gh-pages@v3
39+
with:
40+
github_token: ${{ secrets.GITHUB_TOKEN }}
41+
base_href: /${{ steps.package.outputs.name }}/ # make sure this corresponds to https://<your_username>.github.io/<base_href>/
42+
deploy_branch: gh-pages
43+
publish_dir: dist/${{ steps.package.outputs.name }}/browser
44+
enable_jekyll: true

‎.husky/pre-commit‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
npm run precommit

‎.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
24.16.0

‎.prettierignore‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Ignore artifacts:
2+
build
3+
coverage
4+
e2e
5+
node_modules
6+
dist
7+
dest
8+
reports
9+
10+
# Ignore files
11+
*.lock
12+
package-lock.json
13+
yarn.lock

‎.prettierrc.yml‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
trailingComma: 'all'
2+
tabWidth: 2
3+
useTabs: false
4+
semi: true
5+
singleQuote: true
6+
bracketSpacing: true
7+
bracketSameLine: true
8+
arrowParens: 'avoid'
9+
printWidth: 120
10+
overrides:
11+
- files:
12+
- '*.js'
13+
- '*.jsx'
14+
options:
15+
bracketSpacing: true
16+
jsxSingleQuote: true
17+
semi: true
18+
singleQuote: true
19+
tabWidth: 2
20+
useTabs: false
21+
- files:
22+
- '*.ts'
23+
options:
24+
tabWidth: 2

‎README.md‎

Lines changed: 228 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,236 @@ This project was generated using [Angular CLI](https://github.com/angular/angula
77
To start a local development server, run:
88

99
```bash
10-
ng serve
10+
npm run develop
1111
```
1212

13-
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
13+
Once the server is running, open your browser and navigate to `http://localhost:3026/`. The application will automatically reload whenever you modify any of the source files.
14+
15+
## Cloning Guide
16+
17+
1. Clone only the remote primary HEAD (default: origin/main)
18+
19+
```bash
20+
git clone <url> --single-branch
21+
```
22+
23+
2. Only specific branch
24+
25+
```bash
26+
git clone <url> --branch <branch> --single-branch [<folder>]
27+
```
28+
29+
```bash
30+
git clone <url> --branch <branch>
31+
```
32+
33+
3. Cloning repositories using degit
34+
- main branch is default.
35+
36+
```bash
37+
npx degit github:user/repo#branch-name <folder-name>
38+
```
39+
40+
4. Cloning repositories using **gitpick**
41+
42+
```bash
43+
npx gitpick github_proj_url -b branch-name
44+
```
45+
46+
5. Cloning this project with skeleton
47+
48+
```bash
49+
git clone https://github.com/actionanand/angular-22.git --branch 1-skeleton new-proj-name
50+
```
51+
52+
```bash
53+
npx degit github:actionanand/angular-22#1-skeleton new-proj-name
54+
```
55+
56+
```bash
57+
npx gitpick https://github.com/actionanand/angular-22 -b 1-skeleton
58+
```
59+
60+
## Automate using `Prettier`, `Es Lint` and `Husky`
61+
62+
1. Install the compatible node version
63+
64+
```bash
65+
nvm install v24.16.0
66+
```
67+
68+
2. Install and Configure Prettier
69+
- Install prettier as below:
70+
71+
```bash
72+
npm install prettier -D
73+
```
74+
75+
- Create a `.prettierrc.yml` file and write down the format as below: - [online ref](https://prettier.io/docs/en/options.html)
76+
77+
```yml
78+
trailingComma: 'all'
79+
tabWidth: 2
80+
useTabs: false
81+
semi: true
82+
singleQuote: true
83+
bracketSpacing: true
84+
bracketSameLine: true
85+
arrowParens: 'avoid'
86+
printWidth: 120
87+
overrides:
88+
- files:
89+
- '*.js'
90+
- '*.jsx'
91+
options:
92+
bracketSpacing: true
93+
jsxSingleQuote: true
94+
semi: true
95+
singleQuote: true
96+
tabWidth: 2
97+
useTabs: false
98+
- files:
99+
- '*.ts'
100+
options:
101+
tabWidth: 2
102+
```
103+
104+
- Create a `.prettierignore` file and write as below(sample)
105+
106+
```gitignore
107+
# Ignore artifacts:
108+
build
109+
coverage
110+
e2e
111+
node_modules
112+
dist
113+
dest
114+
reports
115+
116+
# Ignore files
117+
*.lock
118+
package-lock.json
119+
yarn.lock
120+
```
121+
122+
3. Install `Es Lint`, if not installed
123+
124+
```bash
125+
ng add @angular-eslint/schematics
126+
```
127+
128+
if error comes, use the below command
129+
130+
```shell
131+
ng add @angular-eslint/schematics@22.0.0
132+
# or
133+
ng add @angular-eslint/schematics@next
134+
```
135+
136+
4. Configure pre-commit hooks
137+
138+
Pre-commit hooks are a nice way to run certain checks to ensure clean code. This can be used to format staged files if for some reason they weren’t automatically formatted during editing. [husky](https://github.com/typicode/husky) can be used to easily configure git hooks to prevent bad commits. We will use this along with [pretty-quick](https://github.com/azz/pretty-quick) to run Prettier on our changed files. Install these packages, along with [npm-run-all](https://github.com/mysticatea/npm-run-all), which will make it easier for us to run npm scripts:
139+
140+
```bash
141+
npm install -D husky pretty-quick npm-run-all
142+
```
143+
144+
To configure the pre-commit hook, simply add a `precommit` npm script. We want to first run Prettier, then run TSLint on the formatted files. To make our scripts cleaner, I am using the npm-run-all package, which gives you two commands, `run-s` to run scripts in sequence, and `run-p` to run scripts in parallel:
145+
146+
```json
147+
"precommit": "run-s format:fix lint",
148+
"format:fix": "pretty-quick --staged",
149+
"format:check": "prettier --config ./.prettierrc --list-different \"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\"",
150+
"format:all": "prettier --config ./.prettierrc --write \"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\"",
151+
"lint": "ng lint",
152+
```
153+
154+
5. Initialize husky
155+
- Run it once
156+
157+
```bash
158+
npx husky init
159+
```
160+
161+
- Add a hook
162+
163+
```bash
164+
echo "npm run precommit" > .husky/pre-commit
165+
```
166+
167+
- Make a commit
168+
169+
```bash
170+
git commit -m "Keep calm and commit"
171+
# `npm run precommit and npm test` will run every time you commit
172+
```
173+
174+
6. How to skip prettier format only in particular file
175+
1. JS
176+
177+
```js
178+
matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);
179+
180+
// prettier-ignore
181+
matrix(
182+
1, 0, 0,
183+
0, 1, 0,
184+
0, 0, 1
185+
)
186+
```
187+
188+
2. JSX
189+
190+
```jsx
191+
<div>
192+
{/* prettier-ignore */}
193+
<span ugly format='' />
194+
</div>
195+
```
196+
197+
3. HTML
198+
199+
```html
200+
<!-- prettier-ignore -->
201+
<div class="x" >hello world</div >
202+
203+
<!-- prettier-ignore-attribute -->
204+
<div
205+
(mousedown)=" onStart ( ) "
206+
(mouseup)=" onEnd ( ) "
207+
></div>
208+
209+
<!-- prettier-ignore-attribute (mouseup) -->
210+
<div (mousedown)="onStart()" (mouseup)=" onEnd ( ) "></div>
211+
```
212+
213+
4. CSS
214+
215+
```css
216+
/* prettier-ignore */
217+
.my ugly rule
218+
{
219+
220+
}
221+
```
222+
223+
5. Markdown
224+
225+
```md
226+
<!-- prettier-ignore -->
227+
228+
Do not format this
229+
```
230+
231+
6. YAML
232+
233+
```yml
234+
# prettier-ignore
235+
key : value
236+
hello: world
237+
```
238+
239+
7. For more, please [check](https://prettier.io/docs/en/ignore.html)
14240
15241
## Code scaffolding
16242

‎angular.json‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
"version": 1,
44
"cli": {
55
"packageManager": "npm",
6-
"analytics": false
6+
"analytics": false,
7+
"schematicCollections": ["angular-eslint"]
78
},
89
"newProjectRoot": "projects",
910
"projects": {
@@ -30,9 +31,7 @@
3031
"input": "public"
3132
}
3233
],
33-
"styles": [
34-
"src/styles.scss"
35-
]
34+
"styles": ["src/styles.scss"]
3635
},
3736
"configurations": {
3837
"production": {
@@ -72,6 +71,12 @@
7271
},
7372
"test": {
7473
"builder": "@angular/build:unit-test"
74+
},
75+
"lint": {
76+
"builder": "@angular-eslint/builder:lint",
77+
"options": {
78+
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
79+
}
7580
}
7681
}
7782
}

0 commit comments

Comments
 (0)