Server Manager

A full-stack monorepo application for managing and monitoring network services built with TypeScript, Express, and React.

📋 Overview

Server Manager is a powerful web application for monitoring and controlling essential network services like DNS (bind), DHCP, and HTTP servers. It features a robust TypeScript/Express backend API and a modern React UI with a clean, responsive dashboard.

The application allows you to:

• Monitor system metrics (CPU, memory, disk usage, uptime)

• Start, stop, and restart network services (named, dhcpd, httpd)

• Configure DNS zones and records with bind integration

• Configure HTTP virtual hosts and Apache settings

• Configure DHCP server settings

• View service status and logs

• Manage user accounts with authentication

🔧 Tech Stack

Backend (apps/backend)

• Language: TypeScript
• Runtime: Node.js
• Framework: Express
• Database: SQLite with Drizzle ORM
• Validation: Zod (via shared package)
• Authentication: JWT tokens with bcrypt password hashing
• Development Tools: ESLint, Prettier, Nodemon, Jest

Frontend (apps/ui)

• Language: TypeScript
• Framework: React 18
• UI Components: Custom component library with shadcn/ui
• Styling: Tailwind CSS
• Icons: Lucide React
• Build Tool: Vite
• Testing: Vitest
• State Management: React Hook Form
• HTTP Client: Fetch API with custom wrapper

Shared (packages/shared)

• Types: Shared TypeScript interfaces and types
• Validators: Zod schemas for data validation
• Transformers: Data transformation utilities

Infrastructure

• Monorepo: Turborepo with pnpm workspaces
• Package Manager: pnpm
• Containerization: Docker support

📁 Project Structure

ts-node-express/
├── apps/
│   ├── backend/              # Express API server
│   │   ├── src/
│   │   │   ├── controllers/  # API route controllers
│   │   │   │   ├── authController.ts
│   │   │   │   ├── dnsController.ts
│   │   │   │   ├── httpController.ts
│   │   │   │   ├── servicesController.ts
│   │   │   │   ├── systemMetricsController.ts
│   │   │   │   └── usersController.ts
│   │   │   ├── db/           # Database configuration
│   │   │   ├── lib/          # Utility libraries
│   │   │   ├── middlewares/  # Express middlewares
│   │   │   ├── models/       # Data models
│   │   │   ├── routes/       # API route definitions
│   │   │   └── types/        # Type definitions
│   │   ├── drizzle/          # Database migrations
│   │   └── test/             # API tests and config files
│   └── ui/                   # React frontend application
│       └── src/
│           ├── components/   # Reusable UI components
│           ├── features/     # Feature-specific components
│           │   ├── configuration/
│           │   │   ├── dns/
│           │   │   ├── dhcp/
│           │   │   └── http/
│           │   ├── dashboard/
│           │   └── services/
│           ├── hooks/        # Custom React hooks
│           ├── lib/          # Frontend utilities and API clients
│           └── pages/        # Page components
├── packages/
│   └── shared/               # Shared code between apps
│       └── src/
│           ├── types/        # TypeScript type definitions
│           └── validators/   # Zod validation schemas
├── docs/                     # Documentation
└── Configuration files (package.json, turbo.json, etc.)

🚀 Getting Started

Prerequisites

• Node.js 18+
• pnpm package manager

Installation

1. Clone the repository:

git clone https://github.com/bernoussama/server-manager.git
cd server-manager

2. Install dependencies using pnpm workspaces:

pnpm install

3. Set up environment variables:

# Copy example environment file
cp apps/backend/.env.example apps/backend/.env

# Edit the .env file with your configuration

4. Set up the database:

# Generate and run database migrations
cd apps/backend
pnpm dlx drizzle-kit generate
pnpm dlx drizzle-kit push

Running the Application

Development Mode

Start all applications in development mode:

# From root directory
pnpm dev

Or start individual applications:

# Start backend only
cd apps/backend && pnpm dev

# Start frontend only (in a new terminal)
cd apps/ui && pnpm dev

Your backend API will run at http://localhost:3000 and the UI will be available at http://localhost:5173.

Production Build

Build all applications:

pnpm build

Run in production mode:

# Start backend
cd apps/backend && pnpm start

# Serve frontend (after building)
cd apps/ui && pnpm preview

🔌 API Endpoints

Authentication API

• POST /api/auth/signup - Register a new user
• POST /api/auth/login - Login user

Services API

• GET /api/services - Get all services status
• GET /api/services/:service - Get specific service status
• POST /api/services/:service/start - Start a service
• POST /api/services/:service/stop - Stop a service
• POST /api/services/:service/restart - Restart a service

DNS API

• GET /api/dns/config - Get DNS configuration
• PUT /api/dns/config - Update DNS configuration

HTTP API

• GET /api/http/config - Get HTTP configuration
• PUT /api/http/config - Update HTTP configuration
• POST /api/http/validate - Validate HTTP configuration
• GET /api/http/status - Get HTTP service status
• POST /api/http/service/:action - Control HTTP service

System Metrics API

• GET /api/system-metrics - Get system performance metrics

Users API

• GET /api/users - Get all users
• GET /api/users/:id - Get specific user
• POST /api/users - Create a user
• PUT /api/users/:id - Update a user
• DELETE /api/users/:id - Delete a user

🧪 Testing

Run tests for the entire monorepo:

pnpm test

Run tests for individual applications:

# Backend tests
cd apps/backend && pnpm test

# Frontend tests
cd apps/ui && pnpm test

# Shared package tests
cd packages/shared && pnpm test

📋 Development Commands

Root level (affects all workspaces):

• pnpm dev - Start all applications in development mode
• pnpm build - Build all applications
• pnpm test - Run tests for all packages
• pnpm lint - Lint all packages
• pnpm format - Format code in all packages

Backend (apps/backend):

• pnpm start - Run production build
• pnpm dev - Run development server with hot reload
• pnpm build - Build for production
• pnpm lint - Run ESLint
• pnpm format - Format code with Prettier
• pnpm test - Run Jest tests

Frontend (apps/ui):

• pnpm dev - Run development server
• pnpm build - Build for production
• pnpm preview - Preview production build
• pnpm lint - Run ESLint
• pnpm test - Run Vitest tests

Shared (packages/shared):

• pnpm build - Build shared package
• pnpm test - Run tests
• pnpm lint - Run ESLint

🏗️ Architecture

The application follows a modern monorepo architecture:

• Turborepo: Manages the monorepo with optimized build caching and task orchestration
• Shared Package: Contains common types, validators, and utilities used by both frontend and backend
• Type Safety: End-to-end type safety with shared TypeScript interfaces
• API-First Design: RESTful API with comprehensive validation using Zod schemas
• Component-Based UI: Modular React components with feature-based organization

🐳 Docker Support

The backend includes Docker support:

# Build Docker image
cd apps/backend
docker build -t server-manager-backend .

# Run with Docker
docker run -p 3000:3000 server-manager-backend

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the GPLv3 License.

📞 Contact

Project Link: https://github.com/bernoussama/server-manager