Skip to content

Latest commit

 

History

History
193 lines (144 loc) · 5.21 KB

README.md

File metadata and controls

193 lines (144 loc) · 5.21 KB

Custom Backend Frontend

A React-based frontend application for service registration in the Health Monitor system. This frontend is served by the custom backend server and provides a user-friendly interface for registering new health check services.

Overview

This frontend application handles the service registration flow when users want to add new health check endpoints to monitor. It receives state information from the Forge app, validates user input, and submits registration data to the backend server.

Features

🎨 Modern UI Components

  • Clean, responsive design following Atlassian design principles
  • Form validation with real-time feedback
  • Loading states and error handling
  • Mobile-friendly interface

🔧 Functionality

  • Service Registration: Add new health check endpoints
  • Input Validation: URL format and required field validation
  • State Management: Secure handling of Forge app state
  • Error Handling: User-friendly error messages

🏗️ Architecture

  • Modular Components: Reusable React components
  • TypeScript: Full type safety and better development experience
  • Utility Functions: Validation and state parsing utilities
  • Constants: Centralized styling and configuration

Installation & Build

Prerequisites

  • Node.js 22+
  • npm or yarn package manager

Quick Setup

  1. Install Dependencies

    npm install

  2. Build for Production

    npm run build

  3. Build Output

    The build process creates static files in the build-static/ directory:

    build-static/
├── assets/
│   ├── index-[hash].js
│   └── index-[hash].css
└── index.html

Development Mode

For development with hot reload:

npm run dev

Project Structure

src/
├── components/         # React components
│   ├── StateInfo.tsx   # Display registration details
│   ├── RegistrationForm.tsx # Main registration form
│   ├── Message.tsx     # Error/success messages
│   ├── ErrorState.tsx  # Error state component
│   └── index.ts        # Component exports
├── utils/              # Utility functions
│   ├── validation.ts   # Form validation logic
│   ├── state.ts        # URL state parsing
│   └── index.ts        # Utility exports
├── types.ts            # TypeScript type definitions
├── constants.ts        # Styling and configuration
├── App.tsx            # Main application component
└── index.tsx          # Application entry point

Integration with Backend

How It Works

  1. User Flow:

    • User clicks "Add Service" in Forge app
    • Forge app redirects to backend with encrypted state
    • Frontend parses state and displays registration form
    • User enters health check URL and submits
    • Backend processes registration and redirects back to Forge

  2. State Management:

    • Receives encrypted state via URL parameters
    • Decodes and validates state information
    • Displays registration details to user
    • Submits form data to backend API

API Integration

The frontend communicates with the backend through:

  • GET /register: Serves the registration page
  • POST /addedMonitorService: Submits registration data

Configuration

Environment Variables

  • VITE_BACKEND_URL: Backend server URL (optional, can be set at build time)

Build Configuration

The application uses Vite for building and bundling. Configuration can be found in vite.config.ts.

Styling

Design System

  • Colors: Atlassian color palette
  • Typography: System fonts with proper hierarchy
  • Spacing: Consistent spacing scale
  • Components: Reusable styled components

Responsive Design

  • Mobile-first approach
  • Flexible grid layouts
  • Touch-friendly interface elements

Development

Available Scripts

  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run preview - Preview production build
  • npm run lint - Run ESLint

Code Quality

  • TypeScript for type safety
  • ESLint for code quality
  • Prettier for code formatting
  • Component-based architecture

Deployment

Static File Serving

The built files in build-static/ are served by the Express backend server:

app.use(express.static(CONFIG.publicDir));

Build Process

  1. TypeScript compilation
  2. Asset bundling and optimization
  3. Static file generation
  4. Output to build-static/ directory

Security Considerations

State Validation

  • Validates incoming state data
  • Sanitizes user input
  • Prevents XSS attacks through proper escaping

URL Security

  • Base64 encoding/decoding for state data
  • Input validation for all form fields
  • Secure handling of sensitive information

Troubleshooting

Common Issues

  1. Build Fails

    • Check Node.js version (requires 22+)
    • Clear node_modules and reinstall
    • Check TypeScript errors

  2. State Parsing Errors

    • Verify state parameter format
    • Check base64 encoding
    • Validate state object structure

  3. Styling Issues

    • Check CSS build output
    • Verify asset paths
    • Clear browser cache

License

MIT License - see LICENSE file for details.