Repository files navigation

A modern, high-performance React UI implementation for theABP Framework. This project serves as a drop-in replacement for the default Angular UI, offering improved performance, better SEO capabilities, and a more modern development experience with advanced features like visual page building and component documentation.

• ABP React
  • 📋 Table of Contents
  • 🚀 Demo
  • ✨ Features
  • 🚀 Getting Started
    • Prerequisites
    • Installation
    • Configuration
    • Running the Project
  • 📚 Project Overview
  • 🎨 Visual Page Builder
    • Available Components
  • 📖 Storybook
    • CI/CD Integration
      • CI Workflow Features:
      • Accessing Storybook:
  • 🐳 Docker Support
    • Main Application
    • Storybook
  • 📊 Performance
  • 🤝 Contributing
    • Development Scripts
  • 💬 Support
  • 📄 License
  • 🙏 Acknowledgments
  • 👥 Contributors

Check out the live demo athttps://abpreact.antosubash.com/

• 🎨Modern UI/UX

  • Responsive design with Tailwind CSS v4
  • Dark/Light theme support
  • Modern component library with Radix UI
  • Beautiful animations and transitions

• 🔐Authentication & Authorization

  • Login/Logout functionality
  • User registration
  • Password recovery
  • Role-based access control
  • OpenID Connect support

• 🌐Multi-tenant Support

  • Tenant management
  • Tenant switching
  • Tenant-specific configurations

• 👥User Management

  • User CRUD operations
  • Role management
  • Permission management
  • Profile management

• 📝Content Management System (CMS)

  • Visual page builder with Puck editor
  • Drag-and-drop interface with 20+ content blocks
  • Real-time preview and responsive design
  • Comment system with moderation tools
  • Dynamic menu management with visual builder
  • Multi-tenant content isolation
  • SEO optimization and performance tools

• ⚙️System Features

  • Multilingual support
  • Theme customization
  • Settings management
  • Feature management
  • Email configuration

• 🧪Development Tools

  • Storybook for component documentation
  • TypeScript for type safety
  • ESLint and Prettier for code quality
  • Husky for git hooks
  • Vitest for testing

Before you begin, ensure you have the following installed:

• Node.js (LTS version recommended)
• pnpm (Package manager)
• .NET 8 (Backend framework)
• ABP Framework (Backend framework)

1. Install the ABP React .NET Template:

dotnet new install Anto.Abp.React.Template

2. Create a new project:

dotnet new abp-react -o my-project-name --apiUrl your-api-url

Note: Use kebab-case for project names (e.g.,my-project-name) as it will be used for package organization.

1. Copy the environment variables:

cp .env.sample .env

2. Update the.env file with your project-specific values:

• API URL
• Authentication settings
• Other configuration options

1. Navigate to your project directory:

cd my-project-name

2. Install dependencies:

pnpm install

3. Start the development server:

pnpm dev

4. (Optional) Start Storybook for component development:

pnpm storybook

ABP React is built with modern web technologies:

• Next.js 15 - React framework for production
• TypeScript - Type-safe JavaScript
• Tailwind CSS v4 - Utility-first CSS framework
• Radix UI - Accessible component primitives
• TanStack Query - Data fetching and caching
• React Hook Form - Form management
• Zod - Schema validation

The project aims to provide a production-ready React UI for ABP Framework applications, focusing on:

• Performance optimization
• SEO friendliness
• Modern development experience
• Full ABP Framework integration
• Visual content creation

ABP React includes a powerful visual page builder powered byPuck:

• Drag-and-Drop Interface: Create pages visually without coding
• Component Library: Pre-built components for common UI patterns
• Responsive Design: Built-in responsive design tools
• Real-time Preview: See changes instantly as you build
• Template System: Save and reuse page layouts

• Hero sections
• Text blocks and headings
• Image galleries and carousels
• Cards and containers
• Buttons and forms
• Grid layouts and spacers
• And many more...

The project includes comprehensive component documentation with Storybook:

# Start Storybook development serverpnpm storybook# Build Storybook for productionpnpm build-storybook# Run Storybook testspnpm test-storybook

Storybook provides:

• Interactive component documentation
• Component testing and validation
• Design system guidelines
• Accessibility testing
• Visual regression testing

Storybook is fully integrated into the CI/CD pipeline:

• Automatic Building: Storybook is built on every push to main and pull request
• Testing: Storybook tests run automatically to ensure component quality
• Docker Deployment: Storybook is containerized and deployed to GitHub Container Registry
• Artifact Storage: Storybook build artifacts are stored for 30 days

1. Storybook Build Job: Builds and tests Storybook on every change
2. Docker Image: Creates and pushes Storybook Docker image to GHCR

• Development:https://abp-react-storybook.antosubash.com
• Docker:http://localhost:80 (rundocker run -p 80:80 ghcr.io/your-repo/storybook:latest)
• CI Artifacts: Download Storybook build artifacts from GitHub Actions

ABP React includes Docker support for easy deployment:

# Build the applicationdocker build -t abp-react.# Run the applicationdocker run -p 3000:3000 abp-react

# Build Storybookdocker build -f Dockerfile.storybook -t abp-react-storybook.# Run Storybookdocker run -p 80:80 abp-react-storybook

The Docker setup includes:

• Multi-stage builds for optimization
• Nginx configuration for production
• Security headers and caching
• Non-root user execution

The project maintains high performance scores across all Lighthouse metrics. View the detailed reporthere.

We welcome contributions! Here's how you can help:

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

Please ensure your code:

• Follows the existing code style
• Includes appropriate tests
• Updates documentation as needed
• Passes all CI checks

# Developmentpnpm dev# Start development serverpnpm build# Build for productionpnpm start# Start production serverpnpm lint# Run ESLintpnpm format# Format code with Prettier# Storybookpnpm storybook# Start Storybookpnpm build-storybook# Build Storybookpnpm test-storybook# Test Storybook# API Generationpnpm gen-api# Generate API client from OpenAPI spec

For support, please:

• Open an issue in the GitHub repository
• Contactantosubash@outlook.com
• Join our community discussions

This project is licensed under the MIT License - see theLICENSE file for details.

Special thanks to:

• ABP Framework - The foundation of this project
• React - The UI library
• Next.js - The framework
• TypeScript - The language
• Tailwind CSS - The styling
• Puck - The visual page builder
• Storybook - The component documentation

• Anto Subash - Project Maintainer
• Sajan - Contributor