Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Danielsl4/TFG_DAM_2526/llms.txt

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

The FutsalLeague Manager frontend is an Angular 20 single-page application. The build pipeline compiles TypeScript, bundles assets, and outputs a fully static dist/ folder that can be deployed to any static hosting provider — Vercel, Netlify, an nginx server, or any CDN. This page walks through development setup, production builds, and hosting requirements.

​
Prerequisites

  • Node.js 18 LTS or newer
  • Angular CLI 20 — install globally if not already present:
npm install -g @angular/cli@20

​
Development server

Install dependencies and start the local dev server: 
npm install
ng serve
The app is served at http://localhost:4200 and uses environment.development.ts for configuration, which points the API client at http://localhost:3000.

​
Environment configuration

Angular’s file-replacement mechanism swaps environment files at build time. Both files export an environment object with the same shape. src/environments/environment.development.ts — used during ng serve: 
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000'
};
src/environments/environment.ts — used for production builds: 
export const environment = {
  production: true,
  apiUrl: 'https://backend-lovat-tau.vercel.app'
};
Update apiUrl in environment.ts to match the public URL of your deployed backend before running a production build.

​
Build and deploy workflow

1

Install dependencies

npm install
2

Update the production API URL

Open src/environments/environment.ts and set apiUrl to your backend’s public URL:
export const environment = {
  production: true,
  apiUrl: 'https://your-backend-domain.com'
};
3

Run the production build

ng build
Angular CLI compiles the app with full optimization, output hashing, and bundle size checks. The output lands in the dist/frontend/browser/ folder. Budget thresholds are set to warn at 2 MB and error at 4 MB for the initial bundle.
4

Deploy the dist/ folder

Upload the contents of dist/frontend/browser/ to your hosting provider:
  • Vercel / Netlify — drag and drop or connect your repository; both auto-detect Angular projects.
  • nginx / Apache — copy the folder to your web root and configure the server for SPA routing (see below).
  • Any CDN — the output is fully static; no server-side runtime is required.

​
SPA routing

The app uses Angular’s HTML5 PathLocationStrategy (standard browser routing with no hash). Any URL the user navigates to directly — or refreshes — must be served by index.html; otherwise the server returns a 404 for routes it doesn’t recognise as files.
For nginx, add a try_files directive so all unknown paths fall back to index.html:
server {
    listen 80;
    root /var/www/futsalleague;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}
On Vercel, add a vercel.json rewrite at the project root:
{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}
On Netlify, create a public/_redirects file with:
/*  /index.html  200

​
Vercel Analytics

The project includes @vercel/analytics as a production dependency. Analytics are pre-integrated — no extra configuration is needed when deploying to Vercel. When deploying elsewhere, the package is a no-op and adds no overhead.

​
Testing

​
Unit tests (Karma + Jasmine)

ng test
Runs the Karma test runner in a Chrome browser. Coverage reports are generated by karma-coverage.

​
End-to-end tests (Cypress)

Open the interactive Cypress Test Runner: 
npm run cypress:open
Run all E2E tests headlessly (suitable for CI): 
npm run cypress:run

Build docs developers (and LLMs) love

Get started for freeTalk to us