A modern full-stack application built with Analog and Nx, featuring authentication with Keycloak and a robust development environment.
Getting started with this project is straightforward. Follow these steps to set up your development environment:
-
Clone the repository
git clone <repository-url> cd devfestka
-
Install dependencies
npm install
-
Start the infrastructure services
docker compose -f docker/docker-compose.yml up -d --build
This will start Keycloak and any other required services in the background.
-
Start the development server
-
Using
npxnpx nx run dev-o-con:serve
-
Using the npm script from
package.jsonnpm run nx:serve:dev-o-con
- Access the application
- Frontend: http://localhost:4200
- Keycloak Admin Console: http://localhost:8080/admin (admin/admin)
devfestka/
├── apps/
│ ├── dev-o-con/ # Main Analog application
│ └── dev-o-con-e2e/ # End-to-end tests
├── libs/ # Shared libraries
├── docker/ # Docker configuration
│ ├── docker-compose.yml # Infrastructure services
│ └── keycloak/ # Keycloak configuration
└── ...
Start development server:
npx nx run dev-o-con:serveBuild for production:
npx nx build dev-o-conRun tests:
npx nx test dev-o-conRun e2e tests:
npx nx e2e dev-o-con-e2ePer Constitution Principle V directive, E2E tests are temporarily non-gating. During this stabilization window you MUST still:
- Write and maintain unit tests (mandatory)
- Provide integration/service tests for cross-library behavior (mandatory)
You MAY run existing E2E specs locally for additional assurance, but failing E2E specs do not block merges until this notice is removed. Remove this section once the directive is revoked.
Lint code:
npx nx lint dev-o-conStart all services:
docker compose -f docker/docker-compose.yml up -dStop all services:
docker compose -f docker/docker-compose.yml downView logs:
docker compose -f docker/docker-compose.yml logs -fThis project uses Keycloak for authentication. The Keycloak instance is pre-configured with:
- Admin user:
admin/admin - Realm configuration imported from
docker/keycloak/imports/realm-config.json
This project is built with:
- Analog: Meta-framework for Angular with full-stack capabilities
- Nx: Monorepo tooling for scalable development
- Vite: Fast build tool and dev server
- Keycloak: Authentication and authorization
- TypeScript: Type-safe development
- @ngrx/signals: Lightweight state management with SignalStore
State management follows a layered architecture using @ngrx/signals:
- Component-level stores: Scoped to individual components for local state
- Feature stores: Shared state for feature modules
- Domain stores: Cross-feature state within bounded contexts
- Feature services: Orchestrate multiple stores without direct coupling
- Resource API Integration: Use Angular's Resource API within stores via
withProps()for declarative reactive data loading with automatic race condition prevention
Key patterns:
- Private resources in stores (underscore prefix) as implementation details
- Resource params linked to store state for reactive loading
signalMethod()for methods accepting signals or values- Error handling via hooks with effects tracking resource errors
- Prefer Resources over
rxMethod()for purely reactive data flows
See Constitution Principle XIV for detailed guidance.
- Create a feature branch from
main - Make your changes
- Run tests and linting
- Submit a pull request
This workspace includes:
- Remote caching for faster builds
- Code generation with nx generators
- Task orchestration and dependency management
- Project visualization - run
npx nx graph
For the best development experience, install the Nx Console extension for VS Code or IntelliJ.
Happy coding! 🎉