https://github.com/actionanand/single-spa-angular-root-config
Single-Spa Angular root config app
https://github.com/actionanand/single-spa-angular-root-config
angular18 angular2 root-config single-spa
Last synced: 27 days ago
JSON representation
Single-Spa Angular root config app
- Host: GitHub
- URL: https://github.com/actionanand/single-spa-angular-root-config
- Owner: actionanand
- License: mit
- Created: 2025-02-22T10:16:12.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-15T18:51:07.000Z (about 1 year ago)
- Last Synced: 2025-05-15T19:42:30.318Z (about 1 year ago)
- Topics: angular18, angular2, root-config, single-spa
- Language: TypeScript
- Homepage: https://single-spa-angular.surge.sh
- Size: 556 KB
- Stars: 1
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Single-Spa Angular Root Config App
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.5.
## Overview
This is **polyglot** single-spa root cinfig app using Angular Framework in root config.
This repo is used in conjunction with eleven other repos listed below. Together they make up an application composed of microfrontends. Each app can be updated and deployed independently from the others.
- [**Root Config** (This Repo)](https://github.com/actionanand/single-spa-demo-root-config)
- [**Angular App**](https://github.com/actionanand/single-spa-angular)
- [**React App**](https://github.com/actionanand/single-spa-react)
- [**Vue App**](https://github.com/actionanand/single-spa-vue)
- [**Svelte App**](https://github.com/actionanand/single-spa-svelte)
- [**sidebar App**](https://github.com/actionanand/single-spa-sidebar)
- [**Footer App**](https://github.com/actionanand/single-spa-footer)
- [**404 App**](https://github.com/actionanand/single-spa-404)
- [**Vanilla JS App**](https://github.com/actionanand/single-spa-vanilla-js)
- [**Utility App**](https://github.com/actionanand/single-spa-utility)
- [**Angular Parcel App**](https://github.com/actionanand/angular-parcel-app)
- [**React Parcel App**](https://github.com/actionanand/react-parcel-app)
### Live site preview
1. https://single-spa-angular.surge.sh
2. https://single-spa-angular.onrender.com
3. https://actionanand.github.io/single-spa-angular-root-config
### How to deploy in surge
```sh
yarn run deploy:surge
```
## 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
- 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/single-spa-angular-root-config.git --branch 1-skeleton angular-proj-name
```
```bash
npx degit github:actionanand/single-spa-angular-root-config#1-skeleton angular-proj-name
```
### Creating surge token
1. install surge globally
```sh
npm install surge -g
```
2. Generating Surge token
```sh
surge token
```
For the first time, you installed surge, it takes your email and password to create/login account through terminal.
3. Save this token in a `SECRET` with name `SURGE_TOKEN`. For this goto Repo Settings > Secrets > New_secret. Enter Token Name `SURGE_TOKEN` and paste the token generated in it.
## 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)