Skip to main content

Prerequisites

Before you begin, ensure you have the following installed on your system:
  • Node.js: Version 18.x or higher recommended
  • npm: Comes with Node.js (or use Yarn as an alternative)
  • Angular CLI: Version 20.3.10 or higher
npm install -g @angular/[email protected]
You can verify your installations:
node --version
npm --version
ng version
This application requires a backend API running on http://localhost:8080. Make sure the backend server is running before starting the frontend application.

Installation Steps

1

Clone the repository

Clone the Karma Ecommerce repository to your local machine:
git clone <repository-url>
cd ecommerce
2

Install dependencies

Install all required npm packages using your preferred package manager:
npm install
This will install all dependencies specified in package.json, including:Core Dependencies:
  • Angular 20.3.0 (core, common, compiler, forms, router, platform-browser)
  • RxJS ~7.8.0
  • Zone.js ~0.15.0
Development Dependencies:
  • Angular CLI 20.3.10
  • Karma 6.4.0 with Jasmine 5.9.0 for testing
  • TypeScript 5.9.2
3

Configure the backend API

The application is configured to communicate with a backend API. Ensure your backend server is:
  • Running on http://localhost:8080
  • Properly configured with CORS to accept requests from http://localhost:4200
  • All required endpoints are available for authentication and ecommerce operations
If you need to change the backend URL, you’ll need to update the API configuration in your service files.
4

Verify installation

Verify that everything is installed correctly:
ng version
You should see Angular CLI version 20.3.10 and Angular version 20.3.0.

Project Structure

The project follows clean architecture principles with Domain-Driven Design (DDD) and CQRS patterns:
src/
├── app/
│   └── usuario/              # User domain module
│       ├── infrastructure/
│       │   ├── services/     # Auth and API services
│       │   └── ui/
│       │       └── pages/    # Login and Register pages
│       └── ...
├── main.ts                   # Application entry point
├── styles.css                # Global styles
└── index.html                # HTML template

Next Steps

Once you’ve completed the setup, you can:
Node version mismatchIf you encounter errors related to Node.js version, ensure you’re using Node 18.x or higher. Consider using a version manager like nvm to manage Node versions.Permission errors during global installIf you get permission errors when installing Angular CLI globally, you may need to use sudo (on macOS/Linux) or run your terminal as administrator (on Windows). Alternatively, configure npm to use a different directory for global packages.Backend connection issuesIf the application cannot connect to the backend, verify:
  • The backend is running on port 8080
  • CORS is properly configured
  • No firewall is blocking the connection

Build docs developers (and LLMs) love