Skip to main content

Applying Your Rebrand

Once you've created your rebrand using the Rebrand Engine, you'll need to integrate it into your main application build. This guide walks you through the process of applying your rebranded assets and configurations.

Overview​

The rebranding process creates a complete copy of your application in the rebrand/web/full-kit/ directory with all your custom theme settings, logos, and configurations applied. To use this rebrand in production, you'll need to copy specific files and folders to your main build directory.

Step 1: Build Your Rebrand​

First, ensure your rebrand is fully built:

cd /path/to/LibreApps Desktop
./scripts/rebrand.sh

This generates the rebranded application in rebrand/web/full-kit/ with a production build in rebrand/web/full-kit/.next/.

Step 2: Copy Theme Files​

Copy your custom theme configuration:

# Copy your theme folder
cp -R rebrand/themer/YourTheme/ build/web/full-kit/src/themes/YourTheme/

# Update theme references
# Edit build/web/full-kit/src/lib/theme.ts to import your theme

Step 3: Copy Asset Files​

Transfer all branding assets:

# Copy logos and favicons
cp -R rebrand/assets/gallery/YourBrand/ build/web/full-kit/public/

# Copy any custom images
cp -R rebrand/web/full-kit/public/images/ build/web/full-kit/public/images/

Step 4: Update Configuration Files​

Several configuration files need to be synchronized:

Theme Settings (settings.md)​

cp rebrand/settings.md build/web/full-kit/

Environment Variables​

Copy any custom environment variables from your rebrand:

# Review and merge .env files
cp rebrand/web/full-kit/.env.local build/web/full-kit/.env.local

Metadata & SEO​

Update src/app/layout.tsx with your brand's:

  • Site title
  • Description
  • Favicon references
  • OG image paths

Step 5: Copy Modified Components​

If you've customized specific components during rebranding:

# Copy modified dashboard components
cp -R rebrand/web/full-kit/src/app/[lang]/(dashboard-layout)/dashboards/* \
      build/web/full-kit/src/app/[lang]/(dashboard-layout)/dashboards/

# Copy navigation changes
cp rebrand/web/full-kit/src/components/layout/navigation/* \
   build/web/full-kit/src/components/layout/navigation/

Step 6: Rebuild Your Application​

After copying all files, rebuild your main application:

cd build/web/full-kit
pnpm install
pnpm build

Important Adjustments​

Theme Activation​

Ensure your new theme is properly registered:

  1. Add theme import in src/themes/index.ts
  2. Update default theme in src/lib/theme.ts
  3. Test theme switching functionality

Widget Configuration​

If you've toggled widgets off in your rebrand:

  1. Review src/config/widgets.ts for disabled widgets
  2. Verify dashboard layouts match your rebrand
  3. Test all dashboard pages

Check navigation configuration:

  1. Verify menu items in src/config/navigation.ts
  2. Test all route redirects
  3. Confirm authentication routes

Color System​

Ensure CSS variables are updated:

# Copy global styles if customized
cp rebrand/web/full-kit/src/app/globals.css \
   build/web/full-kit/src/app/globals.css

Folders to Copy​

Essential directories that need to be synchronized:

Source (Rebrand)Destination (Build)Purpose
rebrand/themer/YourTheme/build/web/full-kit/src/themes/YourTheme/Theme configuration
rebrand/assets/gallery/YourBrand/build/web/full-kit/public/Logos, favicons, images
rebrand/settings.mdbuild/web/full-kit/settings.mdRebrand settings
rebrand/web/full-kit/src/app/globals.cssbuild/web/full-kit/src/app/globals.cssGlobal styles (if modified)
rebrand/web/full-kit/.env.localbuild/web/full-kit/.env.localEnvironment variables

Testing Your Rebrand​

After applying the rebrand, thoroughly test:

  1. Visual Consistency: Check all pages for correct branding
  2. Theme Switching: Verify light/dark mode if applicable
  3. Asset Loading: Ensure all logos and images load correctly
  4. Navigation: Test all menu items and routes
  5. Widgets: Confirm only enabled widgets appear
  6. Responsive Design: Test on mobile, tablet, and desktop

Troubleshooting​

Missing Logos or Images​

  • Verify file paths in public/ directory
  • Check image references in components
  • Ensure favicon links in layout.tsx are correct

Theme Not Applying​

  • Confirm theme is registered in src/themes/index.ts
  • Check default theme setting in src/lib/theme.ts
  • Clear browser cache and rebuild

Widgets Not Hiding​

  • Review src/config/widgets.ts configuration
  • Verify widget toggle logic in dashboard layouts
  • Check for hardcoded widget imports

Build Errors​

  • Run pnpm install to update dependencies
  • Clear .next cache and rebuild
  • Check for TypeScript errors in copied files

Best Practices​

  1. Version Control: Commit your rebrand files separately before applying
  2. Backup: Create a backup of build/ before copying files
  3. Incremental Testing: Apply changes in stages and test after each step
  4. Documentation: Keep notes on custom modifications for future rebrands
  5. Automation: Consider creating a custom script to automate the copy process

Next Steps: Once your rebrand is applied and tested, proceed to Production Builds to deploy your rebranded application.