Frontend Assets Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require app-dev-panel/frontend-assets
   

   Publish the package assets (if needed):

   php artisan vendor:publish --provider="AppDevPanel\FrontendAssets\FrontendAssetsServiceProvider" --tag="public"
   

2. Basic Configuration Add the service provider to config/app.php:

   'providers' => [
       AppDevPanel\FrontendAssets\FrontendAssetsServiceProvider::class,
   ],
   

3. First Use Case Register assets in a controller or service:

   use AppDevPanel\FrontendAssets\Facades\FrontendAssets;
   
   public function index()
   {
       FrontendAssets::register([
           'css' => [
               'app' => asset('css/app.css'),
               'vendor' => asset('css/vendor.css'),
           ],
           'js' => [
               'app' => asset('js/app.js'),
           ],
       ]);
   
       return view('welcome');
   }
   

4. View Integration Include the generated assets in your layout:

   @frontendAssets
   

Implementation Patterns

Asset Registration Workflows

1. Dynamic Registration Register assets conditionally based on user roles or routes:

   if (auth()->check()) {
       FrontendAssets::register([
           'js' => ['auth' => asset('js/auth.js')],
       ]);
   }
   

2. Grouping Assets Organize assets by logical groups (e.g., admin, dashboard):

   FrontendAssets::group('admin', [
       'css' => ['admin' => asset('css/admin.css')],
       'js' => ['admin' => asset('js/admin.js')],
   ]);
   

3. Versioning Automatically append version hashes to assets:

   FrontendAssets::setVersioning(true);
   

Integration with Laravel Features

1. Middleware Integration Register assets in middleware for global access:

   public function handle($request, Closure $next)
   {
       FrontendAssets::register(['css' => ['global' => asset('css/global.css')]]);
       return $next($request);
   }
   

2. Service Provider Boot Register default assets in a service provider:

   public function boot()
   {
       FrontendAssets::register([
           'css' => ['base' => asset('css/base.css')],
       ]);
   }
   

3. Blade Directives Extend the @frontendAssets directive for custom logic:

   Blade::directive('frontendAssets', function () {
       return "<?php echo AppDevPanel\FrontendAssets\Facades\FrontendAssets::render(); ?>";
   });
   

Gotchas and Tips

Common Pitfalls

1. Asset Overwriting

   • Issue: Registering the same asset group multiple times may overwrite previous entries.
   • Fix: Use merge() to combine assets:

     FrontendAssets::merge(['js' => ['extra' => asset('js/extra.js')]]);
     

2. Missing Assets in Production

   • Issue: Assets not loading due to incorrect paths in production.
   • Fix: Use mix() for Laravel Mix assets:

     FrontendAssets::register(['css' => ['app' => mix('css/app.css')]]);
     

3. Caching Conflicts

   • Issue: Cached views not reflecting new asset registrations.
   • Fix: Clear view cache after changes:

     php artisan view:clear
     

Debugging Tips

1. Inspect Registered Assets Dump registered assets for debugging:

   dd(FrontendAssets::getRegisteredAssets());
   

2. Check Rendered Output Verify the rendered HTML output:

   dd(FrontendAssets::render());
   

3. Disable Versioning Temporarily For debugging, disable versioning:

   FrontendAssets::setVersioning(false);
   

Extension Points

1. Custom Asset Tags Extend the package to support custom tags (e.g., fonts, images):

   // In a service provider
   FrontendAssets::extend('fonts', function ($tag, $assets) {
       return '<link rel="preload" href="' . $assets . '" as="font">';
   });
   

2. Asset Preprocessing Hook into asset registration to modify paths or add attributes:

   FrontendAssets::preprocess(function ($assets) {
       foreach ($assets['js'] as &$path) {
           $path = str_replace('js/', 'dist/js/', $path);
       }
       return $assets;
   });
   

3. Custom Render Logic Override the default rendering behavior:

   FrontendAssets::setRenderer(function ($assets) {
       return '<div class="custom-assets">' . htmlspecialchars(print_r($assets, true)) . '</div>';
   });