🚀 Modern Stack: Vue 3 Composition API, Nuxt 4, TypeScript, Tailwind CSS v4
🎨 Beautiful UI: Clean interface with shadcn-vue components and dark mode support
🌍 Internationalization: Full i18n support (English, Chinese, Turkish)
📱 Responsive Design: Mobile-friendly design that works on all devices
⚡ High Performance: Optimized with code splitting, lazy loading, and efficient caching
🔒 Enterprise Security: Secure authentication with AWS-compatible S3 API
📊 Rich Analytics: Comprehensive monitoring dashboard with real-time metrics
🛠 Developer Experience: Hot reload, TypeScript, ESLint, Prettier, and Vitest

🎯 Core Functionalities

Storage Management

Bucket Operations: Create, delete, configure buckets with policies
Object Management: Upload, download, delete objects with batch operations
File Browser: Intuitive file explorer with search, filtering, and navigation
Access Control: Granular permissions and bucket policies (IAM-like)
Object Versions: Manage object versions and delete markers
Object Locking: WORM (Write Once Read Many) compliance and legal hold

User & Access Management

User Management: Create and manage users and user groups
Access Keys: Generate and manage API credentials
Service Accounts: Create and manage service account credentials
Policies: Fine-grained access control policies (canned and custom)
Authentication: Multiple authentication methods (AccessKey, STS temporary credentials)

System Monitoring

Performance Metrics: Real-time system performance monitoring
Usage Analytics: Storage usage, bandwidth, and capacity statistics
Health Monitoring: System health and status indicators
License Management: View license information and usage limits

Advanced Features

Lifecycle Management: Automated data lifecycle policies (ILM)
Replication: Cross-region and site replication configuration
Tiering: Intelligent data tiering and archival strategies
Event Notifications: Real-time event notifications (SQS, SNS, Lambda)
Event Targets: Configure and manage event notification targets
Site Replication: Multi-site replication management

🛠 Technical Stack

Frontend Framework: Vue 3 with Composition API and <script setup>
Meta Framework: Nuxt 4 (SPA mode)
Language: TypeScript 5.8+ with strict mode
Styling: Tailwind CSS v4 + shadcn-vue
State Management: Pinia for reactive state
HTTP Client: Custom AWS-compatible client with automatic request signing
Build Tool: Vite (via Nuxt)
Package Manager: pnpm 10.19+
Testing: Vitest for unit and integration tests
Table Component: TanStack Table (Vue)

🚀 Quick Start

Prerequisites

Node.js: >= 22.0.0
pnpm: >= 10.19.0
RustFS Backend: RustFS server must be running and accessible

Installation

# Clone the repository
git clone https://github.com/rustfs/console.git
cd console

# Install dependencies using pnpm
pnpm install

Development

# Start development server
pnpm dev

The development server will start at http://localhost:3000 (or the next available port).

Environment Configuration

Create a .env file in the root directory (optional, defaults are provided):

# Application Configuration
APP_NAME=RustFS
APP_DESCRIPTION=RustFS is a distributed file system written in Rust.
BASE_URL=/rustfs/console/

# API Configuration
API_BASE_URL=http://localhost:9000/rustfs/admin/v3
SERVER_HOST=http://localhost:9000

# S3 Configuration
S3_REGION=us-east-1
S3_ENDPOINT=http://localhost:9000

# Session Configuration
SESSION_DURATION_SECONDS=43200

The application automatically detects configuration from:

Server config at {SERVER_HOST}/config.json
localStorage saved configuration
Current browser host
Default configuration (localhost:9000)

Production Build

# Build for production
pnpm build

# Preview production build locally
pnpm preview

The built application will be in the .output directory.

🔧 Development

Project Structure

├── assets/                 # Static assets (images, styles, backgrounds)
│   ├── css/               # Global styles and Tailwind CSS
│   ├── img/               # Images and logos
│   └── svg/               # SVG icons for providers
├── components/            # Vue components
│   ├── access-keys/       # Access key management components
│   ├── buckets/           # Bucket operation components
│   ├── data-table/        # Reusable data table components
│   ├── object/            # Object management components
│   ├── user/              # User management components
│   ├── user-group/        # User group components
│   └── ui/                # shadcn-vue UI primitives
├── composables/           # Vue composables (reusable logic)
├── config/                # Configuration files (navigation, etc.)
├── i18n/                  # Internationalization
│   └── locales/           # Translation files (en, zh-CN, tr-TR)
├── layouts/               # Nuxt layouts
├── lib/                   # Library code (API clients, utilities)
│   ├── api-client.ts      # API client with AWS signing
│   ├── upload-task-manager.ts    # File upload manager
│   └── delete-task-manager.ts    # File deletion manager
├── middleware/            # Route middleware (auth, analytics)
├── pages/                 # File-based routing (Nuxt pages)
├── plugins/               # Nuxt plugins (config, API, S3, icons)
├── server/                # Server-side API routes
├── store/                 # Pinia stores
│   ├── upload-tasks.ts    # Upload task management store
│   └── delete-tasks.ts   # Delete task management store
├── tests/                 # Test files
│   ├── utils/             # Utility function tests
│   └── README.md          # Test documentation
├── types/                 # TypeScript type definitions
├── utils/                 # Utility functions
│   ├── config-helpers.ts  # Configuration management
│   ├── functions.ts       # General utilities
│   └── bucket-policy.ts   # Bucket policy utilities
├── app.config.ts          # Application configuration
├── nuxt.config.ts         # Nuxt configuration
└── package.json           # Dependencies and scripts

Code Quality

We maintain high code quality standards with:

TypeScript: Full type safety with strict mode enabled
ESLint: Code linting and style enforcement
Prettier: Automatic code formatting
Vue TSC: Vue-specific TypeScript checking

# Run type checking
pnpm type-check

# Run linting
pnpm lint

# Fix linting issues automatically
pnpm lint:fix

Coding Standards

Component Files: Use kebab-case (e.g., bucket-selector.vue, data-table.vue)
Component Usage: Reference components using StudlyCase in templates (e.g., <BucketSelector />)
Composables: Use camelCase with use prefix (e.g., useBucket.ts, useUsers.ts)
TypeScript: All code must be typed, avoid any without justification
Comments: All comments and documentation in English

Key Architecture Patterns

Composables: Reusable logic with Vue Composition API
Plugin System: Modular configuration and service injection
Error Handling: Comprehensive error handling with user-friendly messages
Performance Optimization: Smart caching, lazy loading, and code splitting
Security: Input validation, XSS protection, and secure AWS-compatible authentication

Testing

# Run all tests
pnpm test

# Run tests in watch mode
pnpm test:watch

# Run tests with UI
pnpm test:ui

# Run tests once (CI mode)
pnpm test:run

# Generate coverage report
pnpm test:coverage

# Run specific test suites
pnpm test:config-helpers
pnpm test:performance
pnpm test:integration

See tests/README.md for detailed testing documentation.

🎨 Customization

Theming

The application supports light and dark themes. Customize themes in:

assets/css/tailwind.css - Tailwind CSS configuration
tailwind.config.ts - Theme colors and design tokens
components/theme-switcher.vue - Theme switching logic

Internationalization

Add new languages by:

Creating locale files in i18n/locales/ (e.g., fr-FR.json)
Updating nuxt.config.ts i18n configuration
Adding language switcher options in components/language-switcher.vue

Currently supported languages:

English (en)
Chinese (zh-CN)
Turkish (tr-TR)

Component Library

Built on shadcn-vue primitives with custom wrappers. The UI components are in components/ui/ and should not be modified directly. Instead, create wrapper components in the root components/ directory.

🚀 Deployment

Environment Variables

Production deployment requires these environment variables:

API_BASE_URL: RustFS backend API endpoint (e.g., https://api.example.com/rustfs/admin/v3)
SERVER_HOST: RustFS server host (e.g., https://api.example.com)
BASE_URL: Application base path (e.g., /rustfs/console/)
NODE_ENV: Set to production
SESSION_DURATION_SECONDS: Session duration in seconds (default: 43200)

Build for Production

# Build for production
pnpm build

The production build will be in .output/public (static files) and .output/server (server-side code if SSR is enabled).

Docker Deployment

FROM node:22-alpine AS builder
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN corepack enable && corepack prepare pnpm@10.19.0 --activate
RUN pnpm install --frozen-lockfile
COPY . .
RUN pnpm build

FROM nginx:alpine
COPY --from=builder /app/.output/public /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Build Optimization

For optimal production builds:

Enable gzip/brotli compression
Configure proper caching headers
Use CDN for static assets
Monitor bundle size and performance metrics

🤝 Contributing

We welcome contributions! Please follow our contribution guidelines:

Development Workflow

Fork the repository
Clone your fork locally
Create a feature branch: git checkout -b feature/amazing-feature
Install dependencies: pnpm install
Make your changes following our coding standards
Test your changes: pnpm type-check && pnpm lint && pnpm test:run
Commit your changes: git commit -m 'feat: add amazing feature'
Push to your branch: git push origin feature/amazing-feature
Submit a Pull Request

Coding Standards

TypeScript: Use TypeScript for all new code with strict mode
Vue 3: Use Composition API and <script setup> syntax
Naming: Use kebab-case for files and components
Comments: All comments and documentation in English
Testing: Include tests for new features
Performance: Consider performance implications

Code Style

We use automated code formatting:

# Format code
pnpm lint:fix

# Check formatting
pnpm lint

Commit Convention

Follow Conventional Commits:

feat: New features
fix: Bug fixes
docs: Documentation changes
style: Code style changes (formatting, etc.)
refactor: Code refactoring
test: Test additions/modifications
chore: Build process or auxiliary tool changes
perf: Performance improvements

Pull Request Guidelines

Title: Use clear, descriptive titles following conventional commits
Description: Explain what changes were made and why
Testing: Describe how the changes were tested
Breaking Changes: Clearly mark any breaking changes
Screenshots: Include screenshots for UI changes
Checklist: Complete the PR checklist

Issue Reporting

When reporting issues:

Search existing issues first
Use the issue templates
Provide detailed reproduction steps
Include system information and error logs
Add relevant labels

📄 License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

🙏 Acknowledgments

Vue.js - The progressive JavaScript framework
Nuxt - The intuitive Vue framework
shadcn-vue - Beautiful Vue components built on Radix UI
Tailwind CSS - A utility-first CSS framework
Iconify - Universal icon framework
TanStack Table - Powerful table/data grid library

📞 Support

Documentation: RustFS Documentation
Community: GitHub Discussions
Issues: GitHub Issues
Repository: rustfs/console

Made with ❤️ by the RustFS team