Bower Bundle Laravel Package

Getting Started

Minimal Setup

1. Install the Bundle

   composer require sp/bower-bundle
   

   Add to config/bundles.php:

   Sp\BowerBundle\SpBowerBundle::class => ['all' => true],
   

2. Configure Bower Edit config/packages/sp_bower.yaml (or create it):

   sp_bower:
       offline: false  # Set to true if behind a proxy/firewall
       components_dir: "%kernel.project_dir%/vendor/bower_components"
       assets_dir: "%kernel.project_dir%/web/bower_components"
       packages: []    # Define packages per environment if needed
   

3. Install Bower Packages

   php bin/console sp:bower:install jquery bootstrap
   

   This installs packages to vendor/bower_components and symlinks them to web/bower_components.

4. Use in Templates In Twig:

   {{ asset('bower_components/jquery/dist/jquery.js') }}
   

Implementation Patterns

Workflow Integration

1. Bundle-Specific Packages Define packages per bundle in Resources/config/sp_bower.yaml:

   sp_bower:
       packages:
           AcmeDemoBundle:
               - jquery
               - bootstrap
   

   Install them via:

   php bin/console sp:bower:install --bundle=AcmeDemoBundle
   

2. Asset Registration Automatically registers all installed Bower packages as Assetic resources. Use in Twig:

   {% stylesheets
       'bower_components/bootstrap/dist/css/bootstrap.css'
       filter='cssrewrite'
   %}
       <link rel="stylesheet" href="{{ asset_url }}">
   {% endstylesheets %}
   

3. Cache Management Warm the cache to generate Assetic bundles:

   php bin/console cache:warmup
   

   Or manually trigger Bower updates:

   php bin/console sp:bower:update
   

4. Environment-Specific Config Override sp_bower.yaml per environment (e.g., config/packages/dev/sp_bower.yaml):

   sp_bower:
       offline: true
       packages:
           AcmeDemoBundle:
               - jquery@3.0.0
   

Gotchas and Tips

Pitfalls

1. Deprecation Warning

   • The bundle is archived and not maintained. Migrate to Webpack Encore or Vite for long-term projects.
   • Symfony 3+ removes Assetic from the standard edition; this bundle relies on it.

2. Bower Version Mismatch

   • Bower ≥1.0.0: Use sp/bower-bundle ≥0.8.
   • Bower <1.0.0: Use sp/bower-bundle ≤0.7 (see upgrade guide).

3. Cache Issues

   • Clear cache after installing/updating packages:

     php bin/console cache:clear
     php bin/console cache:warmup
     

   • Assetic bundles won’t generate if no scripts/styles are defined in sp_bower.yaml.

4. Windows TTY Errors

   • Use --no-interactive flag to avoid TTY issues:

     php bin/console sp:bower:install --no-interactive
     

5. Symlink Failures

   • Ensure web/bower_components is writable. Manually create symlinks if needed:

     ln -s vendor/bower_components/web/bower_components
     

Debugging Tips

1. List Installed Packages

   php bin/console sp:bower:list
   

   Outputs all registered Assetic resources.

2. Check Bower Paths Verify components_dir and assets_dir in sp_bower.yaml point to correct locations.

3. Offline Mode Set offline: true if behind a proxy, but ensure vendor/bower_components is pre-populated.

4. Assetic Debugging Enable Assetic debug mode in config/packages/dev/assetic.yaml:

   assetic:
       debug: true
   

Extension Points

1. Custom Commands Extend Sp\BowerBundle\Command\BowerCommand for custom logic (e.g., post-install hooks).

2. Event Listeners Subscribe to sp.bower.install or sp.bower.update events to run custom tasks:

   // src/EventListener/BowerListener.php
   public function onBowerInstall(InstallEvent $event) {
       // Post-install logic (e.g., run Grunt tasks)
   }
   

3. Override Asset Paths Extend Sp\BowerBundle\Twig\Extension\BowerExtension to modify asset URLs dynamically.

4. CI/CD Integration Use sp:bower:update in CI pipelines to ensure consistent asset versions:

   # .github/workflows/deploy.yml
   - run: php bin/console sp:bower:update --no-interactive