Vite And Compress Twig Symfony Bundle Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require daddl3/vite-and-compress-twig-symfony-bundle
   

   Add to config/bundles.php:

   return [
       // ...
       Daddl3\ViteAndCompressTwigSymfonyBundle\Daddl3ViteAndCompressTwigSymfonyBundle::class => ['all' => true],
   ];
   

2. Basic Configuration Override default Vite settings in config/packages/daddl3_vite_and_compress_twig_symfony.yaml:

   vite:
       entry_points: ['resources/js/app.js']
       output_dir: 'public/build'
       dev_server: true
   

3. First Use Case: Twig Compression Enable Twig compression in config/packages/twig.yaml:

   twig:
       compression:
           enabled: true
           strategy: 'vite' # Uses this bundle's compression
   

   Add Twig extension to your template:

   {% vite_js_entry app %}
   {% vite_css_entry app %}
   

Implementation Patterns

Workflow: Development vs Production

• Development Run Vite dev server:

  symfony serve
  

  Bundle auto-reloads assets on file changes (no manual npm run dev).

• Production Build assets:

  php bin/console vite:build
  

  Compress Twig templates:

  php bin/console twig:compress
  

Integration with Symfony UX

Pair with symfony/ux-vite for seamless reactivity:

{% vite_client %}
{% vite_js_entry app %}

Custom Asset Handling

Override default asset paths in config/packages/daddl3_vite_and_compress_twig_symfony.yaml:

vite:
    asset_paths:
        js: 'build/js'
        css: 'build/css'

Environment-Specific Configs

Use Symfony’s environment variables:

vite:
    dev_server_host: '%env(VITE_HOST)%'

Gotchas and Tips

Pitfalls

• Twig Compression Cache Clear cache after changing Twig templates:

  php bin/console cache:clear
  php bin/console twig:compress
  

• Vite Config Overrides Ensure vite.config.js exists in project root. Bundle merges configs but prioritizes project’s file.

• Symfony 6+ Asset Component Disable Symfony’s built-in asset system to avoid conflicts:

  framework:
      assets: false
  

Debugging

• Asset Not Loading? Check Vite dev server logs (npm run dev) and verify output_dir in config matches public/ structure.

• Twig Compression Errors Ensure strategy: 'vite' is set in twig.compression and Twig extension is enabled.

Extension Points

• Custom Compression Strategies Extend Daddl3\ViteAndCompressTwigSymfonyBundle\Twig\Compression\Strategy\ViteStrategy for custom logic.

• Pre/Post-Build Hooks Use Symfony’s event system to trigger actions after vite:build:

  // config/services.yaml
  Daddl3\ViteAndCompressTwigSymfonyBundle\EventListener\ViteBuildListener:
      tags:
          - { name: kernel.event_listener, event: vite.post_build, method: onPostBuild }