Skip to main content

Prerequisites

Before you begin, make sure the following are available:
  • Node.js 18+nodejs.org
  • npm — bundled with Node.js
  • ICP backend API — the REST API must be reachable (see Configuration)

1

Clone the repository

git clone https://github.com/DjAlvaroCuba/ISP-Capacity-FRONT
2

Navigate to the app directory

cd ISP-Capacity-FRONT/red-dashboard
3

Install dependencies

Run the standard npm install command:
npm install
Key production dependencies installed:
PackageVersionPurpose
react^19.2.0UI framework
@mui/material^7.3.7Component library
@tanstack/react-query^5.90.21Server state management
axios^1.13.5HTTP client
recharts^3.7.0Charts and data visualization
react-router-dom^7.13.0Client-side routing
dayjs^1.11.19Date formatting
4

Configure environment variables

Create a .env file in the red-dashboard/ directory and set the backend API URL. See Configuration for all available variables and their meaning.
# red-dashboard/.env
VITE_API_BASE_URL=http://127.0.0.1:8000/api
5

Start the development server

npm run dev
The development server defaults to http://localhost:5173. Vite also configures a proxy so that requests to /api are forwarded to http://127.0.0.1:8000, which means the backend must be running locally on port 8000 during development.
6

Build for production

npm run build
This runs TypeScript compilation (tsc -b) followed by the Vite production build. Output is written to red-dashboard/dist/.
7

Preview the production build

npm run preview
Run npm run build && npm run preview to validate the full production bundle locally before deploying. This serves the compiled dist/ folder and closely mirrors what end users will experience in production.

Available npm scripts

ScriptCommandDescription
devviteStart the Vite development server with HMR
buildtsc -b && vite buildType-check and compile a production bundle
linteslint .Run ESLint across the entire project
previewvite previewServe the production build locally for testing