Skip to main content
Follow these steps to get the ICP System frontend running locally and log in for the first time.
ICP System requires a compatible REST API backend. The frontend proxies all /api requests to the backend host you configure in your .env file. Make sure your backend is running and reachable before starting the dev server.
1

Prerequisites

Before you begin, make sure you have the following installed and available:
  • Node.js v18 or later (v20+ recommended)
  • npm v9 or later (bundled with Node.js)
  • Access to a running ICP System backend API — see Backend API for setup instructions
Verify your Node.js version:
node --version
2

Clone the repository and install dependencies

Clone the repository and install the project’s npm dependencies from inside the red-dashboard/ directory.
git clone https://github.com/DjAlvaroCuba/ISP-Capacity-FRONT.git
cd ISP-Capacity-FRONT/red-dashboard
npm install
npm will install all runtime and development dependencies declared in package.json, including React 19, Material UI v7, TanStack Query, Recharts, and Vite.
3

Configure the environment

Create a .env file at the root of the red-dashboard/ directory (next to package.json) and set VITE_API_BASE_URL to point at your backend API:
VITE_API_BASE_URL=http://127.0.0.1:8000/api
Vite’s dev server is pre-configured to proxy all requests that start with /api to http://127.0.0.1:8000, so the frontend never makes cross-origin requests during local development. If your backend runs on a different host or port, update both VITE_API_BASE_URL and the proxy target in vite.config.ts to match.
For production deployments, set VITE_API_BASE_URL to your backend’s public URL and remove or adjust the Vite proxy configuration. See Configuration for details.
4

Start the development server

Run the dev server with:
npm run dev
Vite will compile the project and open a local server, typically at http://localhost:5173. The terminal output will show the exact URL.Other available scripts:
# Build a production bundle
npm run build

# Preview the production build locally
npm run preview

# Run ESLint
npm run lint
5

Log in

Open your browser and navigate to:
http://localhost:5173/login
Enter your username and password, then click Entrar. On success, the server returns a JWT access token that is saved to localStorage under the key access_token. You are then redirected to the home page.If you enter incorrect credentials, the login page displays: “Credenciales inválidas. Verifica tu usuario y contraseña.”
User accounts and passwords are managed through the backend API. Ask your administrator if you do not have credentials yet. See Users & roles for how accounts are created.
6

Explore the Capacity & Risks dashboard

After logging in, you land on the Capacity & Risks dashboard — the home page of ICP System. From here you can:
  • Review KPI cards showing total contracted, assigned, and available bandwidth
  • Inspect risk distribution across your connections
  • Navigate to Providers, Nodes, Connections, Clients, Equipment, or Zabbix monitoring using the sidebar