https://github.com/actionanand/single-spa-sidebar
Single-Spa Angular app
https://github.com/actionanand/single-spa-sidebar
angular angular18 angular2 single-spa
Last synced: 10 months ago
JSON representation
Single-Spa Angular app
- Host: GitHub
- URL: https://github.com/actionanand/single-spa-sidebar
- Owner: actionanand
- License: mit
- Created: 2025-02-23T14:56:11.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-02-23T15:24:14.000Z (11 months ago)
- Last Synced: 2025-02-23T16:18:50.417Z (11 months ago)
- Topics: angular, angular18, angular2, single-spa
- Language: TypeScript
- Homepage:
- Size: 169 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular 18 (Standalone) with SSPA
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.1.
## Cloning Guide
1. Clone only the remote primary HEAD (default: origin/master)
```bash
git clone --single-branch
```
2. Only specific branch
```bash
git clone --branch --single-branch []
```
```bash
git clone --branch
```
3. Cloning repositories using degit
- master branch is default.
```bash
npx degit github:user/repo#branch-name
```
4. Cloning this project with skeleton
```bash
git clone https://github.com/actionanand/single-spa-sidebar.git --branch 1-skeleton angular-proj-name
```
```bash
npx degit github:actionanand/single-spa-sidebar#1-skeleton angular-proj-name
```
## Automate using `Prettier`, `Es Lint` and `Husky`
1. Install the compatible node version
```bash
nvm install v20.13.1
```
2. Install and Configure Prettier
- Install prettier as below:
```bash
yarn add prettier -D
```
- Create a `.prettierrc` 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@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
yarn add husky pretty-quick npm-run-all -D
```
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
npm pkg set scripts.prepare="husky install"
npm run prepare
```
- Add a hook
```bash
npx husky add .husky/pre-commit "yarn run precommit"
npx husky add .husky/pre-commit "yarn test"
git add .husky/pre-commit
```
- Make a commit
```bash
git commit -m "Keep calm and commit"
# `yarn run precommit and yarn 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)
## Resources
- [GitHub Actions for Angular](https://github.com/rodrigokamada/angular-github-actions)
- [Angular 16 - milestone release](https://github.com/actionanand/ng16-signal-milestone-release)