github ColorlibHQ/AdminLTE v4.0.0-rc3
AdminLTE v4.0.0-rc3

latest release: v4.0.0-rc4
2 months ago

AdminLTE v4.0.0-rc3 - Production Deployment & Cross-Platform Compatibility

This release resolves critical production deployment issues and ensures consistent behavior between development and production environments across different deployment scenarios.

🚀 Production Deployment Fixes

Path Resolution System

  • Smart Path Resolution: Implemented intelligent relative path calculation for all assets
    • CSS/JS paths automatically adjust based on page depth (e.g., ./css/ for root, ../css/ for sub-pages)
    • Image paths dynamically corrected at runtime for any deployment structure
    • Works seamlessly for root deployment, sub-folder deployment, and CDN hosting

RTL CSS Processing Fix

  • PostCSS Configuration: Fixed rtlcss plugin interference with LTR builds
    • rtlcss now only runs during RTL-specific builds (NODE_ENV=RTL)
    • Prevents automatic left/right property flipping in standard production builds
    • Maintains separate .rtl.css files for right-to-left language support

Image Loading Resolution

  • Runtime Image Path Fix: Added intelligent image path correction script
    • Detects deployment context from working CSS/JS paths
    • Automatically converts absolute image paths (/assets/img/...) to relative paths
    • Ensures images load correctly regardless of deployment sub-folder structure

🎨 UI/Navigation Improvements

Sidebar Navigation Fixed

  • Badge & Arrow Positioning: Resolved sidebar layout issues
    • Fixed nav badges overlapping text elements
    • Restored chevron arrow indicators for expandable menu items
    • Corrected spacing and visual hierarchy in sidebar navigation
    • Added sidebar-open class to all layouts for consistent styling

Cross-Device Consistency

  • Full-Width Navigation Links: Enhanced clickable areas
    • Set .sidebar-menu .nav-link { width: 100%; } for better UX
    • Ensures badges and arrows align properly at the far right edge
    • Maintains proper spacing across all screen sizes and devices

📦 CDN & Dependencies

Updated to Latest Stable Versions

  • Bootstrap: v5.3.3 → v5.3.7 (latest stable)
  • Bootstrap Icons: v1.11.3 → v1.13.1 (latest with new icons)
  • OverlayScrollbars: v2.10.1 → v2.11.0 (performance improvements)
  • PopperJS: v2.11.8 (confirmed latest - no change needed)

Integrity Attribute Removal

  • SRI-Free CDN Loading: Removed integrity attributes from all CDN resources
    • Prevents "Failed to find a valid digest" console errors
    • Allows CDN providers to update files without breaking existing links
    • Maintains crossorigin="anonymous" for security while removing brittle SRI checks

🛠️ Build System Enhancements

Development vs Production Parity

  • Unified Asset Pipeline: Both dev and production now use identical asset resolution
    • Development copies fresh CSS/JS to src/html/public/ for hot-reloading
    • Production builds CSS/JS to dist/css/ and dist/js/ then flattens structure
    • Smart path resolution ensures consistent behavior in both environments

Git Repository Cleanup

  • Production Build Distribution: Added complete dist/ folder to repository
    • Provides ready-to-use production files for immediate deployment
    • Simplifies distribution and CDN access via jsDelivr
    • Enables direct download without requiring Node.js build environment

Deployment Guide

Quick Start

# Build for production
npm run production

# Deploy via FTP (upload entire dist/ folder contents)
# Or serve locally for testing
cd dist && python3 -m http.server 8080

Deployment Scenarios

  1. Root Deployment: Upload dist/ contents to public_html/ or equivalent
  2. Sub-folder Deployment: Upload dist/ contents to public_html/admin/ or similar
  3. Static Host Deployment: Point build directory to dist/ in your hosting platform
  4. CDN Integration: Upload assets to CDN and update paths as needed

📋 Migration Notes

From 4.0.0-rc2 to 4.0.0-rc3

Automatic Updates (No Action Required):

  • Path resolution works automatically in all deployment scenarios
  • Image loading is fixed without any HTML changes needed
  • Sidebar navigation displays correctly with proper spacing and indicators
  • All CDN resources load without console errors

Recommended Actions:

  • Remove any manual path fixes you may have implemented
  • Update your deployment process to use the new dist/ structure
  • Verify image loading in your specific deployment environment
  • Test both development (npm run dev) and production builds

Breaking Changes:

  • None - this release is fully backward compatible with existing HTML and CSS

Download: Use npm: npm install admin-lte@4.0.0-rc3 or download the source code below.

Don't miss a new AdminLTE release

NewReleases is sending notifications on new releases.