This repo is intended to allow spooling up Angular projects in a monorepo rapidly, with a minimum of configuration.
- Angular 21 w/ Zoneless change detection & Node 24.11.1
- Parallel server/client execution
- Bare-bones api proxy to the back-end *
- Frontend environment detection *
- Auto-unsub from subscriptions
- Heroku deployment
- cookie consent banner *
- Google Analytics
- Service worker to persist app and manage versions *
- Typescript with node for back-end
- Client & Server unit testing via jasmine
- Benchmark memory usage and response times (throttled for mobile) in tests
- Internationalization (i18n) with Transloco *
- IndexedDB for offline storage *
- Documentation enforced via husky
- e2e testing with Playwright + snapshots
- 100% coverage in unit tests (jasmine for client and jest for server)
- Feature flags *
- CI/CD (github actions, sonar)
- Hotjar script for user behavior analysis
- Websockets to reconcile disparities between server and local data *
- public api with GraphQL *
- DB-agnostic query layer
- Network connectivity detection *
- CDN for static assets and binary distros
- Tauri app signing and (desktop) auto-updating for distribution to Android, iOS, macOS, Windows, and Linux.
- Automatic platform deploys via Github Actions
- Supabase(?) user management (emails and password resetting, etc) *
- timezone detection AND user-setting *
- Push notifications (WebSocket-based) for Web, PWA, and all Tauri platforms *
- toast notifications *
- Server-side rendering
- Lighthouse CI to mitigate performance slip
(* indicates a feature that’s visible in the sample app)
- CDN for static assets and binary distros, depending on Tauri's ability to cache assets
This project is licensed under the MIT License (see LICENSE file for details).
- If you modify and distribute this library itself, you must keep it MIT-licensed.
- If you use this library as a foundation to build your own application, you can license your application however you choose.
Install node 24.11.1 Recommended to install NVM to manage node versions.
Install NPM 10.8.1 (should be bundled with node).
Install Angular CLI to allow executing commands: npm i -g @angular/cli
From the root, run npm ci
Create your .env file from the .env.example and never commit sensitive information like API keys or passwords or usernames or email addresses
Develop against branches from dev feature branch using prefix feature/ or defect/. main is for production releases, staging is to test prod.
In the project directory, you can run:
Runs the front- and back-end concurrently. See above.
This is the preferred method of running a local
Runs only the front-end of the app (on port 4200) in development mode.
Open http://localhost:4200 to view it in the browser.
The page will reload if you make edits.
Runs only the back-end of the app (on port 4201) in development mode.
Open http://localhost:4201/api to view it in the browser.
This will display the API responses.
- from root, run
npm testfor full test suite, below (best to ensure green 100% coverage before any PRs todev)
- from root, run
npm run test-translationto uncover any gaps in translation files, relative to schema (will not detect completely missing schema keys; refer to browser errors for that)
- from root, run
npm run test-serverandnpm run test-clientto execute each unit test suite independently
-
from root, run
npm run test:e2eRuns e2e tests including visual regression tests. -
from root, run
npm run test:e2e:uiOpens the Playwright UI for interactive test running and debugging. -
from root, run
npm run test:e2e:headedRuns e2e tests with browser visible.
Playwright captures screenshots during tests and compares them against baseline snapshots.
- from root, run
npm run test:e2e:acceptAccept all screenshot diffs and overwrite baseline snapshots.
Install Docker from website (not homebrew).
from tests, create docker instance with docker run -d --name sonarqube -e SONAR_ES_BOOTSTRAP_CHECKS_DISABLE=true -p 9000:9000 sonarqube:latest
Navigate to SonarQube Server instance
- Log in to your SonarQube server as an administrator.
- Go to the Security page (usually located in the top-right corner of the page).
- Click on My Account.
- Scroll down to the Security section.
- Click on Generate Tokens.
- Enter a name for the token (e.g., "My Token").
- Click Generate.
- add token to .env file
Download SonarScanner and run from project root: npm run sonar
- mac (requires homebrew):
brew tap heroku/brew && brew install heroku - linux:
sudo snap install --classic heroku
heroku git:remote -a <APP_NAME>-dev
git remote rename heroku heroku-dev
heroku git:remote -a <APP_NAME>-staging
git remote rename heroku heroku-staging
heroku git:remote -a <APP_NAME>
git remote rename heroku heroku-production
From root:
npm run deploy:dev
npm run deploy:staging
npm run deploy:production
This repo utilizes Tauri to publish native apps for Windows, MacOS, Linux, Android, and iOS. Some of the scripts are fairly straightforward, but all require external dependencies: at the very least, Rust; and likely xCode and/or Android Studio. For more information, see the Tauri documentation. It's best to spin up a completely blank repo and follow the instructions on the Tauri website along with generous usage of ChatGPT to get your external tools running.
After your pipeline is configured, the following scripts are useful.
from client, while running a server locally:
npm run tauri:devto dev-build and deploy to local machine.npm run tauri:androidto dev-build and deploy to Android simulator.npm run tauri:iosto dev-build and deploy to iOS simulator.
from client, while remote server is running:
npm run tauri buildto build a standalone dev release for Windows, MacOS, and Linux.npm run tauri android devto build a standalone dev release for Android. (settauri.conf.jsondevUrl tohttps://angularmomentum.app) to enable live server features.npm run tauri ios build -- --export-method app-store-connectto build a release for iOS.npx tauri ios build --debug --target aarch64-simto build a debug prod release for iOS.
Tauri desktop builds can have update tar.gz files that can be downloaded and installed automatically. Manually edit latest.json with the signature of each built update zip, and host them on a CDN (see below).
- e.g.
cat "src-tauri/target/release/bundle/macos/Angular Momentum.app.tar.gz.sig"to retrieve the signature.
Run on a windows install; run npm run tauri build to build a standalone release for Windows.
See build instructions above.
On a linux install; run npm run tauri build to build a standalone release for Linux.
The app includes a complete push notification system that works across all platforms (Web, PWA, Desktop, Mobile).
- NotificationService - Main service for managing notifications, permissions, and notification history
- NotificationCenterComponent - UI component with bell icon, badge, and dropdown notification center
- WebSocket Delivery - Real-time notification delivery via Socket.IO
- GraphQL API - Backend mutations for sending notifications
- Platform Support:
- Web/PWA: Uses Web Notifications API + Service Worker
- Tauri (Desktop/Mobile): Uses
tauri-plugin-notificationfor native OS notifications
NotificationService Methods:
show(options)- Show a notificationrequestPermission()- Request notification permissioncheckPermission()- Check current permission statusisSupported()- Check if notifications are supportedmarkAsRead(id)- Mark notification as readclearAll()- Clear all notifications
Reactive Signals:
permissionGranted- Permission statusnotifications- All notifications arrayunreadCount- Number of unread notifications
Backend Functions:
broadcastNotification(io, notification)- Send to all clientssendNotificationToUser(io, socketId, notification)- Send to specific usersendNotificationToRoom(io, room, notification)- Send to room/group
Push notifications are controlled by the Notifications feature flag. Toggle via GraphQL:
mutation {
updateFeatureFlag(key: "Notifications", value: true) {
key
value
}
}- Web/PWA: Requires HTTPS in production, service worker registration
- Tauri Desktop: Native OS notifications, works even when app is closed
- Tauri Mobile: Requires notification permissions in platform-specific configs
## CDN
This repo relies on serving assets from a CDN. The current implementation is linode/akamai but you'll want to replace that with your preferred provider.
### Structure
angularmomentum/
├── assets/
│ ├── production/
│ └── staging/
├── dist/
│ └── (future versioned releases folders here)