The official homepage for Liberalistene (Norwegian political party), built on Enonic XP CMS with modern React components and React4xp v6 architecture.

• Overview
• Tech Stack
• Prerequisites
• Quick Start
• Development
• Documentation
• Contributing
• License

This project powers the Liberalistene party website, providing:

• Modern, responsive design with Tailwind CSS v4
• Server-side rendering with React4xp v6
• Content management with Enonic XP
• Component development environment with Storybook
• Comprehensive testing with Jest
• Automated releases with semantic versioning

Repository: https://github.com/Liberalistene-Developers/lib.no

• CMS: Enonic XP 7.7+
• Framework: React4xp v6.1.0
• Frontend: React 19, TypeScript 5+
• Styling: Tailwind CSS v4, PostCSS
• Build System: Gradle + tsup + esbuild

• Component Development: Storybook 10.x
• Testing: Jest 30 + React Testing Library
• Code Quality: ESLint 10 + TypeScript ESLint 8
• Version Control: Git with Conventional Commits
• CI/CD: GitHub Actions + semantic-release

• Maps: Leaflet + react-leaflet
• Icons: FontAwesome
• Security: Enonic XP's processHtml for HTML sanitization

Before you begin, ensure you have the following installed:

1. Node.js - Version 22.15.1 or higher

   # Using nvm (recommended)
   nvm install 22.15.1
   nvm use

2. Java 17 - Required for Enonic XP

3. Enonic CLI - Installation guide

   npm install -g @enonic/cli

npm install

# Development build (default)
npm run build

# Production build (minified)
npm run build:prod

# Deploy to local Enonic sandbox
npm run deploy

# Or use Enonic CLI directly
enonic project deploy

• Website: http://localhost:8080
• Admin Console: http://localhost:8080/admin

# Build
npm run build                 # Build with Gradle (development)
npm run build:prod            # Build with Gradle (production)
npm run build:assets          # Build assets only
npm run build:react4xp        # Build React4xp components
npm run clean                 # Clean build artifacts

# Deploy
npm run deploy                # Deploy to Enonic
npm run watch                 # Deploy and watch for changes
npm run rewatch               # Clean, deploy, then watch

# Type Checking
npm run check                 # Run all type checks and linting
npm run check:types           # Run all TypeScript type checks
npm run check:types:node      # Check Node tooling types
npm run check:types:react4xp  # Check React components
npm run check:types:xp        # Check XP server-side code

# Testing
npm test                      # Run Jest tests
npm run test:coverage         # Run tests with coverage
npm run test:watch            # Run tests in watch mode

# Linting
npm run lint                  # Run ESLint
npm run lint:css              # Run Stylelint

# Component Development
npm run storybook             # Start Storybook on port 6006
npm run build-storybook       # Build static Storybook

# Browser Sync
npm run browserSync           # Start browser-sync with live reload

1. Start watching for changes:

   npm run watch

2. Develop components in Storybook:

   npm run storybook
   # Visit http://localhost:6006

3. Run type checks:

   npm run check:types

4. Run tests:

   npm test

For optimal development with clean logs and proper routing, see the Sandbox Setup Guide for:

• Creating and configuring the Enonic sandbox
• Virtual host (vhost) configuration - Required for localhost access
• Log optimization and debugging setup

Important: The vhost configuration is required for the site to work correctly on localhost.

Comprehensive documentation is available:

• CLAUDE.md - Complete developer guide including:

  • Project structure and architecture
  • React4xp v6 architecture patterns
  • Code conventions and best practices
  • Build system details
  • Testing guidelines
  • Release process

• Component Catalog - Complete reference for all React components

• Sandbox Setup Guide - Enonic sandbox configuration

• GitHub Issues - Issue tracking and roadmap

• Roadmap Issue #31 - Codebase modernization roadmap

• Storybook - Interactive component documentation (run npm run storybook, then visit http://localhost:6006)

We welcome contributions! Please follow these guidelines:

This project uses Conventional Commits:

• feat: - New features
• fix: - Bug fixes
• chore: - Maintenance tasks
• docs: - Documentation changes
• style: - Code style changes
• refactor: - Code refactoring
• perf: - Performance improvements
• test: - Tests

Example: feat: add dark mode toggle to settings page

Commit messages are enforced by Commitlint via Husky pre-commit hooks.

• TypeScript: All code must be written in proper TypeScript
• React Imports: Use inline type modifier for type-only imports
• Import Paths: Prefer absolute imports with path aliases (@common/, @utils/)
• Formatting: ESLint and Stylelint are configured and enforced

This project uses git worktrees for all feature development. See CLAUDE.md for the full worktree workflow.

1. Create a worktree for your branch (git worktree add .worktrees/feat-123-my-feature -b feat/123_my-feature)
2. Make your changes following the code style guidelines
3. Run tests and type checks (npm run check and npm test)
4. Commit with conventional commit messages
5. Push your branch and submit a pull request

This project follows React4xp v6 architecture with strict separation of concerns:

• Parts - 4-line shims using createPartShim
• Processors - Data fetching and transformation
• Components - Pure React components in /common/

See CLAUDE.md for detailed architecture documentation.

This project is licensed under the Apache License 2.0 - see the LICENSE.txt file for details.

Copyright 2026 Liberalistene

• Author: Benny Thomas
• Repository: https://github.com/Liberalistene-Developers/lib.no
• Issues: https://github.com/Liberalistene-Developers/lib.no/issues

Built with Enonic XP and React4xp