Skip to main content

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js (v18 or higher)
  • npm or yarn package manager
  • Angular CLI (v20.3.10 or higher)
npm install -g @angular/cli

​
Installation

1

Clone the repository

Clone the Karma Ecommerce repository to your local machine:
git clone https://github.com/iRiloDev/ecommerce-example.git
cd ecommerce-example
2

Install dependencies

Install the required npm packages:
npm install
3

Configure backend API

The application connects to a backend API at http://localhost:8080. Ensure your backend server is running before starting the application.
The application expects a backend API with the following endpoints:
  • GET /login/:usuario/:contrasena - User login
  • POST /registro - User registration
If you need to change the API URL, update the BASE_URL in src/app/usuario/infrastructure/services/auth-service.ts.
4

Start the development server

Run the Angular development server:
ng serve
The application will be available at http://localhost:4200.
5

Open the application

Navigate to http://localhost:4200 in your web browser. You should see the login page.

​
First Steps

​
Explore the Login Page

The application opens to the login page at the root path (/). This page demonstrates:
  • Angular standalone components
  • RxJS reactive programming with observables
  • Repository pattern for data access
  • Dependency injection

​
Try User Registration

Navigate to /registro to see the user registration page. This demonstrates:
  • Command pattern (CQRS)
  • HTTP POST requests with JSON payloads
  • Form handling in Angular

​
Project Structure

The application follows a clean architecture pattern with three main layers: 
src/app/usuario/
├── domain/              # Business logic and entities
│   ├── models/         # Usuario interface
│   └── repositories/   # Abstract repository contracts
├── application/        # Use cases and application logic
│   ├── commands/       # RegisterUserCommand
│   ├── queries/        # LoginUserQuery
│   └── usecases/       # Command and query handlers
└── infrastructure/     # External dependencies and UI
    ├── services/       # AuthService (HTTP client)
    └── ui/pages/       # LoginPage and RegisterPage components

​
Available Routes

RouteComponentDescription
/LoginPageUser login form
/registroRegisterPageUser registration form

​
Development Workflow

​
Running Tests

Execute the test suite using Karma and Jasmine: 
ng test

​
Building for Production

Create a production build: 
ng build
The build artifacts will be stored in the dist/ directory.

​
Watch Mode

Run the build in watch mode for continuous compilation during development: 
ng build --watch --configuration development

​
Next Steps

Now that you have the application running, explore these topics to understand the architecture:

Architecture Overview

Learn about the clean architecture implementation

Domain Layer

Understand the business logic layer

Application Layer

Explore CQRS commands and queries

Authentication

Deep dive into the authentication system

​
Common Issues

If port 4200 is already in use, you can specify a different port:
ng serve --port 4300
Ensure your backend API is running at http://localhost:8080. Check the browser console for detailed error messages.
Try clearing the node_modules and reinstalling:
rm -rf node_modules package-lock.json
npm install
For detailed development setup and configuration, see the Development Setup guide.

Build docs developers (and LLMs) love

Get started for freeTalk to us