AdminLTE v4.0.0-rc3

[puikinsh]

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 [email protected] or download the source code below.

---

This discussion was created from the release AdminLTE v4.0.0-rc3.

[wolverin0]

Can we migrate from 3.2.0 to some 4 versión without Breaking everything?