Skip to content

index.mdx

Latest commit

 

History

History
160 lines (112 loc) · 5.71 KB

index.mdx

File metadata and controls

160 lines (112 loc) · 5.71 KB
title Frontend Development Guide
description Complete guide to developing and contributing to the DeployStack frontend application built with Vue 3, TypeScript, and Vite.
sidebar Getting Started

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

  1. Navigate to frontend directory:

    cd services/frontend

  2. Install dependencies:

    npm install

  3. Start development server:

    npm run dev

  4. 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.

⚠️ Mandatory Design Patterns

All structured information displays must follow the Structured Data Display Pattern. This includes:

  • User profiles and settings
  • Form layouts
  • Configuration displays
  • Installation details
  • Any information presented in label-value pairs

This pattern ensures visual consistency across the entire application.

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:

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