https://github.com/actionanand/version-fresh-demo
This Angular standalone demo shows one way to keep a browser app aligned with the latest deployed version, similar to how mobile apps force users onto the newest bundle after an update.
https://github.com/actionanand/version-fresh-demo
angular angular2 angular21
Last synced: 1 day ago
JSON representation
This Angular standalone demo shows one way to keep a browser app aligned with the latest deployed version, similar to how mobile apps force users onto the newest bundle after an update.
- Host: GitHub
- URL: https://github.com/actionanand/version-fresh-demo
- Owner: actionanand
- Created: 2026-04-19T16:25:30.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-04-19T17:04:12.000Z (about 1 month ago)
- Last Synced: 2026-04-19T19:10:06.768Z (about 1 month ago)
- Topics: angular, angular2, angular21
- Language: TypeScript
- Homepage: https://actionanand.github.io/version-fresh-demo/
- Size: 246 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# version-fresh-demo
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.0.3.
## Development server
To start a local development server, run:
```bash
npm run develop
```
Once the server is running, open your browser and navigate to `http://localhost:4206/`. The application will automatically reload whenever you modify any of the source files.
## Cloning Guide
1. Clone only the remote primary HEAD (default: origin/main)
```bash
git clone --single-branch
```
2. Only specific branch
```bash
git clone --branch --single-branch []
```
```bash
git clone --branch
```
3. Cloning repositories using degit
- main branch is default.
```bash
npx degit github:user/repo#branch-name
```
4. Cloning this project with skeleton
```bash
git clone https://github.com/actionanand/version-fresh-demo.git --branch 1-skeleton angular-proj-name
```
```bash
npx degit github:actionanand/version-fresh-demo#1-skeleton angular-proj-name
```
## Automate using `Prettier`, `Es Lint` and `Husky`
1. Install the compatible node version
```bash
nvm install v24.11.1
```
2. Install and Configure Prettier
- Install prettier as below:
```bash
npm install prettier -D
```
- Create a `.prettierrc.yml` file and write down the format as below: - [online ref](https://prettier.io/docs/en/options.html)
```yml
trailingComma: 'all'
tabWidth: 2
useTabs: false
semi: true
singleQuote: true
bracketSpacing: true
bracketSameLine: true
arrowParens: 'avoid'
printWidth: 120
overrides:
- files:
- '*.js'
- '*.jsx'
options:
bracketSpacing: true
jsxSingleQuote: true
semi: true
singleQuote: true
tabWidth: 2
useTabs: false
- files:
- '*.ts'
options:
tabWidth: 2
```
- Create a `.prettierignore` file and write as below(sample)
```gitignore
# Ignore artifacts:
build
coverage
e2e
node_modules
dist
dest
reports
# Ignore files
*.lock
package-lock.json
yarn.lock
```
3. Install `Es Lint`, if not installed
```bash
ng add @angular-eslint/schematics
```
if error comes, use the below command
```shell
ng add @angular-eslint/schematics@21.0.0-alpha.1
# or
ng add @angular-eslint/schematics@next
```
4. Configure pre-commit hooks
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:
```bash
npm install -D husky pretty-quick npm-run-all
```
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:
```json
"precommit": "run-s format:fix lint",
"format:fix": "pretty-quick --staged",
"format:check": "prettier --config ./.prettierrc --list-different \"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\"",
"format:all": "prettier --config ./.prettierrc --write \"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\"",
"lint": "ng lint",
```
5. Initialize husky
- Run it once
```bash
npx husky init
```
- Add a hook
```bash
echo "npm run precommit" > .husky/pre-commit
echo "npm run test" > .husky/pre-commit
```
- Make a commit
```bash
git commit -m "Keep calm and commit"
# `npm run precommit and npm test` will run every time you commit
```
6. How to skip prettier format only in particular file
1. JS
```js
matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);
// prettier-ignore
matrix(
1, 0, 0,
0, 1, 0,
0, 0, 1
)
```
2. JSX
```jsx
{/* prettier-ignore */}
```
3. HTML
```html
hello world
```
4. CSS
```css
/* prettier-ignore */
.my ugly rule
{
}
```
5. Markdown
```md
Do not format this
```
6. YAML
```yml
# prettier-ignore
key : value
hello: world
```
7. For more, please [check](https://prettier.io/docs/en/ignore.html)
## Code scaffolding
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
```bash
ng generate component component-name
```
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
```bash
ng generate --help
```
## Building
To build the project run:
```bash
ng build
```
This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
## Running unit tests
To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:
```bash
ng test
```
## Running end-to-end tests
For end-to-end (e2e) testing, run:
```bash
ng e2e
```
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
## Additional Resources
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.