Skip to content

Frontend and CMS Templates

This document provides an overview of frontend and CMS templates available in the ConnectSoft ecosystem. It is written for frontend engineers and architects understanding how to generate and structure frontend applications.

ConnectSoft provides templates for generating frontend applications using modern frameworks and integrating with headless CMS systems.

Note

Frontend templates are designed to work seamlessly with backend microservices generated by the Factory. They follow ConnectSoft's architectural principles and integrate with ConnectSoft platforms.

Purpose

Frontend templates enable the creation of:

  • Modern web applications - Single-page applications (SPAs) and progressive web apps (PWAs)
  • CMS integrations - Headless CMS integration patterns
  • UI component libraries - Reusable UI components
  • Responsive designs - Mobile-first, responsive layouts
  • Accessible interfaces - WCAG-compliant, accessible UI

Supported Frameworks

Angular

  • Template: Angular SPA template
  • Features:
    • Angular CLI integration
    • TypeScript support
    • Component-based architecture
    • Routing and state management
    • Material Design or custom UI libraries
  • Use Cases: Enterprise SPAs, admin dashboards, complex applications

React

  • Template: React SPA template
  • Features:
    • Create React App or Vite
    • TypeScript support
    • Component-based architecture
    • React Router, Redux/Context API
    • Material-UI or custom UI libraries
  • Use Cases: Modern web apps, dashboards, interactive UIs

Blazor

  • Template: Blazor Server or WebAssembly template
  • Features:
    • .NET-based frontend
    • C# for UI logic
    • Component-based architecture
    • SignalR integration (Server mode)
    • MudBlazor or custom components
  • Use Cases: .NET-centric applications, real-time UIs, shared codebase

CMS Integration Patterns

Headless CMS

Frontend templates support integration with headless CMS systems:

  • Content API - REST or GraphQL APIs for content
  • Content preview - Preview mode for content editors
  • Content management - Admin interfaces for content management
  • Multi-site support - Support for multiple sites/tenants

Supported CMS Platforms

  • Strapi - Open-source headless CMS
  • Contentful - Cloud-based headless CMS
  • Sanity - Real-time collaborative CMS
  • Custom CMS - Integration patterns for custom CMS systems

Template Structure

A frontend application generated from a template follows this structure:

MyFrontendApp/
├── src/
│   ├── components/        # Reusable UI components
│   ├── pages/             # Page components
│   ├── services/          # API services
│   ├── state/             # State management
│   ├── styles/            # CSS/SCSS styles
│   └── utils/             # Utility functions
├── public/                # Static assets
├── tests/                 # Test files
├── package.json
└── CI/CD pipeline

Key Features

UI Component Libraries

  • Material Design - Material UI components
  • Custom components - ConnectSoft-branded components
  • Accessibility - WCAG-compliant components
  • Responsive - Mobile-first, responsive design

State Management

  • Redux/Context API (React)
  • NgRx (Angular)
  • Blazor State Management (Blazor)
  • Integration with backend - API state management

API Integration

  • REST API clients - Generated API clients
  • GraphQL clients - GraphQL query clients
  • Authentication - OAuth2/OpenID Connect integration
  • Error handling - Standardized error handling

Testing

  • Unit tests - Component and service tests
  • Integration tests - API integration tests
  • E2E tests - End-to-end testing support
  • Visual regression - Visual testing tools

Integration with Backend

Frontend templates integrate with Factory-generated microservices:

  • API clients - Auto-generated API clients
  • Authentication - Identity platform integration
  • Real-time - SignalR/WebSocket support
  • Multi-tenant - Tenant-aware UI components