Quickstart

Get your local development environment set up and running in just a few minutes. This guide will walk you through cloning the repository, installing dependencies, and launching the application.

Prerequisites

Before you begin, ensure you have the following installed:

Node.js 20.x or higher
npm (comes with Node.js)
Git

This project uses Angular 20, which requires Node.js version 20.0.0 or higher.

Quick Start Steps

Clone the repository

Clone the Biblioteca Virtual Frontend repository to your local machine:

git clone https://github.com/AngheloMP10/biblioteca-virtual-frontend.git
cd biblioteca-virtual-frontend

Expected output:

Cloning into 'biblioteca-virtual-frontend'...
remote: Enumerating objects: 150, done.
remote: Counting objects: 100% (150/150), done.
remote: Compressing objects: 100% (95/95), done.
remote: Total 150 (delta 45), reused 120 (delta 30)
Receiving objects: 100% (150/150), 85.23 KiB | 1.50 MiB/s, done.
Resolving deltas: 100% (45/45), done.

Install dependencies

Install all required npm packages:

npm install

This will install Angular 20 and all dependencies defined in package.json:

@angular/core: ^20.0.0
@angular/router: ^20.0.0
@angular/common: ^20.0.0
@angular/forms: ^20.0.0
rxjs: ~7.8.0

Expected output:

added 234 packages, and audited 235 packages in 45s

42 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Configure the API endpoint

The application connects to a backend API. By default, it points to http://localhost:8080.If your backend is running on a different URL, update src/environments/environment.ts:

src/environments/environment.ts

export const environment = {
  production: false,
  apiUrl: 'http://localhost:8080', // Change this to your backend URL
};

Make sure your backend API is running before starting the frontend, or you’ll see connection errors in the browser console.

Start the development server

Launch the Angular development server:

npm start

This runs ng serve under the hood. Expected output:

Initial chunk files | Names         |  Raw size
polyfills.js        | polyfills     | 82.64 kB  |
main.js             | main          | 18.23 kB  |
styles.css          | styles        |  1.12 kB  |

                    | Initial total | 101.99 kB

Application bundle generation complete. [2.456 seconds]

Watch mode enabled. Watching for file changes...
➜  Local:   http://localhost:4200/
➜  press h + enter to show help

Access the application

Open your browser and navigate to:

http://localhost:4200

You should see the login page of the Biblioteca Virtual application.

The development server supports hot reload. Any changes you make to the source code will automatically refresh the browser.

Verify Your Setup

To verify everything is working correctly:

Check the login page loads - Navigate to http://localhost:4200/auth/login
Open browser DevTools - Press F12 and check the Console tab for any errors
Verify API connectivity - The app should attempt to connect to your backend at http://localhost:8080

What’s Next?

Installation Guide

Learn about all available installation methods including Docker

Architecture Overview

Understand the project structure and architecture

Common Issues

Port 4200 is already in use

If you see an error that port 4200 is already in use, you can specify a different port:

ng serve --port 4201

Or kill the process using port 4200:

# On Linux/macOS
lsof -ti:4200 | xargs kill -9

# On Windows
netstat -ano | findstr :4200
taskkill /PID <PID> /F

npm install fails

If npm install fails, try:

Clear npm cache: npm cache clean --force
Delete node_modules and package-lock.json
Run npm install again

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

Cannot connect to backend API

If you see CORS errors or connection refused errors:

Verify your backend is running on http://localhost:8080
Check that CORS is properly configured in your backend
Update the apiUrl in src/environments/environment.ts if needed

Available Scripts

Once installed, you have access to these npm scripts:

Command	Description
`npm start`	Start development server on `http://localhost:4200`
`npm run build`	Build for production (output in `dist/`)
`npm run watch`	Build in watch mode with source maps
`npm test`	Run unit tests with Karma
`npm run build:netlify`	Build with Netlify configuration

For more details on the build process and deployment options, check out the Installation Guide.

Getting Started

Core Concepts

Features

Deployment

Prerequisites

Quick Start Steps

Verify Your Setup

What’s Next?

Installation Guide

Architecture Overview

Common Issues

Available Scripts

​Prerequisites

​Quick Start Steps

​Verify Your Setup

​What’s Next?

Installation Guide

Architecture Overview

​Common Issues

​Available Scripts

Prerequisites

Quick Start Steps

Verify Your Setup

What’s Next?

Common Issues

Available Scripts