Browser Sync Bundle Laravel Package

Getting Started

Minimal Setup

1. Installation Add the bundle to your composer.json:

   composer require axstrad/browser-sync-bundle
   

   Register the bundle in app/AppKernel.php:

   new Axstrad\BrowserSyncBundle\AxstradBrowserSyncBundle(),
   

2. Configuration Enable BrowserSync in config.yml:

   axstrad_browser_sync:
       enabled: true
       proxy: "your-local-server.dev"
       files: ["web/**/*", "assets/**/*"]
   

3. First Use Case Run BrowserSync via a custom command:

   php bin/console axstrad:browser-sync:start
   

   Open http://localhost:3000 in your browser to see live-reload in action.

Implementation Patterns

Workflow Integration

• Asset Pipeline Sync Use files config to auto-reload when modifying:

  axstrad_browser_sync:
      files: ["assets/css/**/*.scss", "assets/js/**/*.js"]
  

  Combine with Laravel Mix/Webpack for seamless frontend workflows.

• Proxying Symfony Dev Server Proxy API routes to Symfony’s built-in server:

  axstrad_browser_sync:
      proxy: "http://localhost:8000"
      port: 3001
  

• Environment-Specific Configs Override settings per environment (e.g., config_dev.yml):

  axstrad_browser_sync:
      enabled: true
      notify: false  # Disable desktop notifications in CI
  

• Custom Commands Extend the bundle’s command for custom logic:

  // src/Command/CustomSyncCommand.php
  class CustomSyncCommand extends BrowserSyncCommand {
      protected function configure() {
          $this->setName('axstrad:custom-sync');
          $this->addOption('watch-only', null, InputOption::VALUE_NONE, 'Watch files only');
      }
  }
  

Gotchas and Tips

Pitfalls

• Symfony 2.3 Dependency The bundle targets Symfony 2.3. If using a newer version, expect compatibility issues (e.g., ContainerAware traits). Use a wrapper or fork if needed.

• Proxy Conflicts Ensure the proxy URL matches your Symfony dev server’s route (e.g., localhost:8000 vs. your-local-server.dev). Test with:

  curl -I http://localhost:3000
  

• File Watching Quirks Glob patterns (e.g., **/*) may not work as expected. Test with explicit paths:

  files: ["assets/css/style.css", "assets/js/app.js"]
  

Debugging

• Logs Enable debug mode in config.yml:

  axstrad_browser_sync:
      debug: true
  

  Check var/log/dev.log for BrowserSync initialization errors.

• Port Conflicts If 3000 is busy, override the port:

  axstrad_browser_sync:
      port: 3001
  

Extension Points

• Custom Middleware Inject middleware via the browser_sync.middleware service tag:

  services:
      app.browser_sync.middleware:
          class: App\Middleware\CustomMiddleware
          tags:
              - { name: browser_sync.middleware }
  

• Event Listeners Subscribe to BrowserSync events (e.g., browser_sync.init):

  // src/EventListener/BrowserSyncListener.php
  class BrowserSyncListener {
      public function onInit(BrowserSyncEvent $event) {
          // Custom logic on startup
      }
  }
  

  Register in services.yml:

  services:
      app.browser_sync.listener:
          class: App\EventListener\BrowserSyncListener
          tags:
              - { name: kernel.event_listener, event: browser_sync.init, method: onInit }
  

• Docker/Remote Sync For remote environments, use the external option:

  axstrad_browser_sync:
      external: true
      bind_address: 0.0.0.0