Crater is a Kubernetes-based GPU cluster management system providing a comprehensive solution for GPU resource orchestration.
![]() Jupyter Lab |
![]() Ray Job |
![]() Monitor |
![]() Models |
Note
Install Node.js and Pnpm: Official Download
Ensure you have Node.js and pnpm installed. We recommend using nvm for Node.js version management.
Verify installations:
node -v # Should show v22.x or higher
pnpm -v # Should show v10.x or higher
For VS Code users:
- Import
.vscode/React.code-profile
viaProfiles > Import Profile
- Install recommended extensions
For other IDEs, manually configure:
- Prettier
- ESLint
- Tailwind CSS IntelliSense
Clone and initialize:
git clone https://github.com/raids-lab/crater-frontend.git
cd crater-web-frontend
pnpm install
Create .env.development
with:
VITE_API_BASE_URL="http://localhost:8098/"
VITE_USE_MSW=false # Enable API mocking
PORT=5180 # Dev server port
Start development server:
make run
- Language: TypeScript
- Framework: React 19
- State Management: Jotai
- Data Fetching: TanStack Query v5
- Styling: Tailwind CSS
- UI Libraries:
- shadcn/ui (headless components)
- Flowbite (Tailwind templates)
- TanStack Table (headless tables)
Use MSW for API simulation during development:
- Set
VITE_USE_MSW=true
in.env.development
- Add handlers in
src/mocks/handlers.ts
Check updates:
pnpm outdated
Update dependencies:
pnpm update # Minor updates
pnpm update --latest # Major updates (use cautiously)
Update shadcn components:
for file in src/components/ui/*.tsx; do
pnpm dlx shadcn-ui@latest add -y $(basename "$file" .tsx)
done
pnpm build
src/
├── components/ # Reusable components
│ ├── custom/ # Custom components
│ ├── layout/ # App layouts
│ └── ui/ # shadcn components
├── hooks/ # Custom hooks
├── lib/ # Utilities
├── pages/ # Route-based pages
│ ├── Admin/ # Admin interfaces
│ ├── Portal/ # Job management
│ └── ... # Other sections
├── services/ # API services
├── stores/ # State management
├── types/ # TypeScript types
└── ...
- Dark Mode Input Styling: Browser autofill causes white backgrounds in dark mode (TailwindCSS#8679)