RackMonitor Web Console

The web console is a React-based frontend application built with Vite, TypeScript, and Tailwind CSS. It provides a real-time dashboard for monitoring environmental sensors, viewing historical metrics, and configuring system settings.

Build System

This project uses Vite as the build tool and development server. Vite provides:

• Fast HMR (Hot Module Replacement): Instant updates during development
• Optimized production builds: Efficient bundling and code splitting
• TypeScript support: Full type checking and compilation
• React Fast Refresh: Preserves component state during hot reload

Prerequisites

• Node.js 18+ and npm
• All dependencies installed via npm install

Available Scripts

Development

npm run dev

Start the development server with hot reload enabled (default Vite behavior).

npm run dev

This command:

• Starts a local development server (typically at http://localhost:5173)
• Enables Hot Module Replacement (HMR) - changes to files are instantly reflected in the browser
• Provides fast refresh for React components
• Shows detailed error messages and stack traces

Hot Reload Features:

• ✅ Instant updates when you save changes to .tsx, .ts, .css files
• ✅ Component state is preserved during updates (React Fast Refresh)
• ✅ CSS changes apply immediately without page reload
• ✅ TypeScript errors shown in browser console

Note: The dev server runs independently and connects to the backend API. Make sure the backend is running separately if you need to test API integration.

Building

npm run build

Build the application for production.

npm run build

This command:

• Compiles TypeScript to JavaScript
• Bundles and minifies code for optimal performance
• Processes CSS with Tailwind and PostCSS
• Outputs production-ready files to dist/ directory
• The dist/ directory is then embedded into the Go binary during backend build

Output: dist/ directory containing:

• Optimized JavaScript bundles
• Minified CSS
• Static assets (images, fonts, etc.)
• index.html entry point

npm run preview

Preview the production build locally.

npm run build
npm run preview

This command:

• Serves the production build from dist/ directory
• Useful for testing the production build before deployment
• Runs on a local server (typically http://localhost:4173)

Code Quality

npm run lint

Run ESLint to check code quality and find potential issues.

npm run lint

This command:

• Analyzes all .js, .jsx, .ts, .tsx files
• Reports linting errors and warnings
• Uses TypeScript ESLint parser for type-aware linting
• Enforces React best practices (hooks, refresh rules)

Development Workflow

Standalone Frontend Development

1. Install dependencies:

   npm install
   

2. Start development server with hot reload:

   npm run dev
   

3. Open browser:

   • Navigate to http://localhost:5173 (or the port shown in terminal)
   • Changes to source files will automatically reload

4. Make changes:

   • Edit files in src/
   • Save and see changes instantly in the browser
   • Check browser console for any errors

Full Stack Development

When developing with the backend:

1. Start backend (in project root):

   ./dev run
   # or
   go run cmd/rackmonitor/main.go
   

2. Start frontend dev server (in web/console/):

   npm run dev
   

3. Configure API endpoint (if needed):

   • The frontend connects to backend API
   • Default backend runs on http://localhost:8080
   • WebSocket connections are established automatically

Production Build

1. Build frontend:

   cd web/console
   npm run build
   

2. Build backend (from project root):

   ./dev build
   

The backend build process automatically embeds the web/console/dist/ directory into the Go binary using go:embed.

Project Structure

web/console/
├── src/
│   ├── components/      # React components
│   │   ├── dashboard/   # Dashboard-specific components
│   │   └── layout/      # Layout components (navigation, etc.)
│   ├── pages/           # Page components (Dashboard, Metrics, Configuration)
│   ├── services/        # API and WebSocket services
│   ├── stores/          # Jotai state management atoms
│   ├── types/           # TypeScript type definitions
│   ├── i18n/            # Internationalization (i18n) configuration
│   └── utils/           # Utility functions
├── dist/                # Production build output (generated)
├── index.html           # HTML entry point
├── package.json         # Dependencies and scripts
├── vite.config.ts       # Vite configuration
├── tailwind.config.js   # Tailwind CSS configuration
└── tsconfig.json         # TypeScript configuration

Technologies

• React 18: UI framework
• TypeScript: Type safety
• Vite: Build tool and dev server
• Tailwind CSS: Utility-first CSS framework
• React Router: Client-side routing
• Jotai: State management
• Recharts: Charting library for metrics visualization
• i18next: Internationalization (English/Polish)
• Lucide React: Icon library

Hot Reload Configuration

Hot reload is enabled by default when running npm run dev. Vite's HMR automatically:

• Detects file changes
• Updates modules without full page reload
• Preserves React component state (via React Fast Refresh)
• Shows compilation errors in the browser

No additional configuration is needed - it works out of the box!

Troubleshooting

Port Already in Use

If port 5173 is already in use, Vite will automatically try the next available port. You can also specify a port:

npm run dev -- --port 3000

Build Errors

• Ensure all dependencies are installed: npm install
• Check TypeScript errors: npm run lint
• Clear node_modules and reinstall if issues persist

API Connection Issues

• Verify backend is running on expected port (default: 8080)
• Check browser console for CORS or connection errors
• Ensure WebSocket endpoint is accessible

Integration with Backend

The frontend is embedded into the Go binary during backend build:

1. Frontend build outputs to web/console/dist/
2. Backend uses go:embed to include dist/ directory
3. Backend serves static files via HTTP server
4. Single binary contains both frontend and backend

See cmd/dev/README.md for backend build documentation.