DeployStack Frontend Development

The DeployStack frontend is a modern web application built with Vue 3, TypeScript, and Vite, specifically designed for managing MCP (Model Context Protocol) server configurations. This guide covers everything you need to know to develop and contribute to the frontend.

Technology Stack

Framework: Vue 3 with Composition API
Language: TypeScript for type safety
Build Tool: Vite for fast development and building
Styling: TailwindCSS with shadcn-vue components
Icons: Lucide Icons
Internationalization: Vue I18n
State Management: Pinia (when needed)
Routing: Vue Router

Quick Start

Prerequisites

Node.js 18 or higher
npm 8 or higher

Development Setup

Navigate to frontend directory:
```
cd services/frontend
```
Install dependencies:
```
npm install
```
Start development server:
```
npm run dev
```
Build for production:
```
npm run build
```

The development server will start at http://localhost:5173 with hot module replacement enabled.

Project Structure

The frontend follows a feature-based modular architecture with clear separation of concerns. For a comprehensive understanding of the application architecture, directory organization, and design patterns, see the Frontend Architecture Guide.

Development Guidelines

Code Style

Use TypeScript for all new code
Follow Vue 3 Composition API patterns
Use <script setup> syntax for components
Maintain consistent naming conventions
Add proper TypeScript types for all functions and variables

Component Development

For comprehensive component development guidelines, including Vue SFC best practices, component structure patterns, and implementation standards, see the Frontend Architecture - Component Implementation Standards section.

For table-specific implementations, refer to the Table Design System guide.

UI Components and Styling

The frontend uses TailwindCSS for styling with shadcn-vue component library for consistent UI elements. For comprehensive styling guidelines, component patterns, and design standards, see the UI Design System documentation.

Environment Configuration

The frontend uses a sophisticated environment variable system that works seamlessly across development and production environments. For complete details on configuring and using environment variables, see the dedicated Environment Variables Guide.

Quick Start

Create environment files in the services/frontend directory:

# .env (base configuration)
VITE_DEPLOYSTACK_BACKEND_URL=http://localhost:3000
VITE_APP_TITLE=DeployStack

# .env.local (local overrides, gitignored)
VITE_DEPLOYSTACK_BACKEND_URL=http://localhost:3000
VITE_APP_TITLE=DeployStack (Development)

Accessing Variables in Code

import { getEnv, getAllEnv } from '@/utils/env'

// Get specific variables
const backendUrl = getEnv('VITE_DEPLOYSTACK_BACKEND_URL')
const appTitle = getEnv('VITE_APP_TITLE')

// Get all variables (useful for debugging)
const allEnvVars = getAllEnv()

API Integration

The frontend uses a service layer pattern with direct fetch() calls for API communication. For complete API integration details including service patterns, implementation examples, and guidelines, see the Frontend Architecture - API Integration Architecture section.

Next Steps

Continue reading the detailed guides:

Frontend Architecture - Application architecture, patterns, and development principles
UI Design System - Component patterns, styling guidelines, and design standards
Environment Variables - Complete environment configuration guide
Global Event Bus - Cross-component communication system
Internationalization (i18n) - Multi-language support
Plugin System - Extending functionality

Docker Development

Building the Frontend

# Build the Docker image
docker build -t deploystack/frontend:dev .

# Run with development configuration
docker run -it -p 8080:80 \
  -e VITE_API_URL="http://localhost:3000" \
  -e VITE_APP_TITLE="DeployStack (Docker Dev)" \
  deploystack/frontend:dev

Production Deployment

The frontend is designed to work seamlessly with the backend service:

# Production deployment
docker run -d -p 8080:80 \
  -e VITE_API_URL="https://api.your-domain.com" \
  -e VITE_APP_TITLE="DeployStack" \
  deploystack/frontend:latest

On this page