Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/lucavallini/aibar-frontend/llms.txt

Use this file to discover all available pages before exploring further.

The Aibar SRL App frontend is an Angular 22 single-page application bootstrapped with the Angular CLI. This guide walks you through every step needed to get a fully working local development environment — from cloning the repository to opening the app in your browser — and covers the npm scripts, code-generation commands, testing setup, and code-style tooling used across the project.

​
Prerequisites

Before you begin, make sure the following tools are available on your machine:
  • Node.js 18 or later — nodejs.org
  • npm 11 or later — bundled with Node.js; verify with npm --version
  • Angular CLI 22 — install globally with:
npm install -g @angular/cli@22
Confirm everything is in order: 
node --version   # should print v18.x.x or higher
npm --version    # should print 11.x.x or higher
ng version       # should show Angular CLI: 22.x.x

​
Setup Steps

1

Clone the repository

Clone the aibar-frontend repository and move into the project directory:
git clone https://github.com/lucavallini/aibar-frontend.git
cd aibar-frontend
2

Install dependencies

Install all Node.js dependencies declared in package.json. The project pins its package manager to npm@11.12.1, so npm is the only supported installer:
npm install
This will populate node_modules/ with Angular 22, Vitest, Prettier, and all other project dependencies.
3

Configure the environment

Before starting the dev server, confirm that src/environments/environment.ts points at the backend API you want to use. By default it targets http://127.0.0.1:8000, which is the local FastAPI backend.See the Environment Configuration page for full details on how to switch between local, staging, and production backends.
4

Start the development server

Launch the Angular dev server using the Angular CLI:
ng serve
The CLI compiles the application, starts the dev server on port 4200, and watches all source files for changes. Any time you save a .ts, .html, or .css file, the browser reloads automatically — no manual refresh needed.
5

Open the app in your browser

Navigate to the following URL once the server reports Application bundle generation complete:
http://localhost:4200
You should see the Aibar SRL App login page. Use a valid account from the connected backend to sign in.
Run ng serve --open to have the Angular CLI launch your default browser automatically as soon as the server is ready — no need to copy the URL manually.

​
npm Scripts

The package.json defines the following scripts. You can run any of them with npm run <script> or invoke the underlying ng command directly if you have the Angular CLI installed globally.
ScriptCommandDescription
ngngExposes the Angular CLI binary for direct invocation via npm run ng -- <command>
startng serveStarts the development server on http://localhost:4200 with live reload
buildng buildCompiles the app for production and writes output to dist/
watchng build --watch --configuration developmentContinuously rebuilds the app in development mode on every file save
testng testExecutes the full unit-test suite with Vitest
# Start the dev server
npm start

# Production build (output → dist/)
npm run build

# Watch mode (dev build, rebuilds on save — useful for SSR or library linking)
npm run watch

# Run all unit tests
npm test

​
Angular CLI Code Generation

The Angular CLI ships with a powerful schematic system for scaffolding new building blocks. Use ng generate (or its alias ng g) to create components, services, guards, pipes, and more — the CLI writes the files and wires up the correct imports automatically. 
# Generate a new feature component
ng generate component features/my-feature/my-component

# Generate a new service in the core services folder
ng generate service core/services/my-service

# List all available schematics and their options
ng generate --help
Generated files follow the project’s existing naming conventions and are placed relative to src/app/. Component schematics produce a .ts class file, an inline or external template, a stylesheet, and a .spec.ts test file.

​
Testing

Aibar SRL App uses Vitest as its unit-test runner — not the legacy Karma/Jasmine setup that older Angular projects used. The @angular/build:unit-test builder (configured in angular.json) integrates Vitest directly into the Angular CLI toolchain. Run the full test suite: 
ng test
Test files follow the *.spec.ts naming convention. The tsconfig.spec.json includes "vitest/globals" in its types array, which makes Vitest’s describe, it, expect, and related globals available in every spec file without explicit imports: 
{
  "compilerOptions": {
    "types": ["vitest/globals"]
  },
  "include": ["src/**/*.d.ts", "src/**/*.spec.ts"]
}

​
Code Style

The project enforces a consistent code style through two configuration files at the repository root:

​
Prettier (.prettierrc)

Prettier handles automatic code formatting. The project configuration sets:
  • printWidth: 100 — lines wrap at 100 characters
  • singleQuote: true — TypeScript files use single quotes
  • parser: "angular" — HTML templates are formatted with the Angular-aware parser
{
  "printWidth": 100,
  "singleQuote": true,
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "angular"
      }
    }
  ]
}
Format all files in the project with: 
npx prettier --write .

​
EditorConfig (.editorconfig)

EditorConfig keeps editor settings consistent across IDEs (VS Code, IntelliJ, etc.):
  • Indentation: 2 spaces for all files
  • Charset: UTF-8
  • Trailing whitespace: trimmed on save (except in Markdown)
  • Final newline: always inserted
  • TypeScript: single quotes enforced at the editor level
Most modern editors pick up .editorconfig automatically. For VS Code, install the EditorConfig for VS Code extension if it is not already active.

Build docs developers (and LLMs) love

Get started for freeTalk to us