Config To Js Bundle Laravel Package

Getting Started

Minimal Setup

1. Installation Add the package via Composer:

   composer require dawen/config-to-js-bundle
   

   No Symfony-specific AppKernel registration is needed in Laravel (this is a legacy Symfony bundle). Instead, use Laravel's service provider and command registration.

2. Service Provider Register the package in config/app.php under providers:

   Dawen\Bundle\ConfigToJsBundle\ConfigToJsBundle::class,
   

3. Publish Config Publish the default config to config/config-to-js.php:

   php artisan vendor:publish --provider="Dawen\Bundle\ConfigToJsBundle\ConfigToJsBundle" --tag="config"
   

   Edit the config to define your output_path (e.g., public/js/config.js) and config array.

4. First Use Case Run the command to generate the JS file:

   php artisan config:js:dump
   

   This outputs a JavaScript module (e.g., export default { imageLocation: 'http://...', appVersion: '1.1.0' }) to your specified path.

Implementation Patterns

Workflows

1. Dynamic Configuration Use Laravel’s config system to define values in config/config-to-js.php:

   'config' => [
       'imageLocation' => config('app.url') . '/images',
       'appVersion' => config('app.version'),
   ],
   

   This keeps your JS config in sync with Laravel’s environment-aware settings.

2. Environment-Specific Outputs Override output_path per environment in .env:

   CONFIG_TO_JS_OUTPUT_PATH=public/js/config.prod.js
   

   Then reference it in config/config-to-js.php:

   'output_path' => env('CONFIG_TO_JS_OUTPUT_PATH', 'public/js/config.js'),
   

3. Integration with Frontend Builds

   • Vite/Webpack: Treat the output file as a static asset. Use define or require in your build config:

     // vite.config.js
     define({
       __APP_CONFIG__: require('./public/js/config.js'),
     });
     

   • Laravel Mix: Add the file to mix.js:

     mix.js('resources/js/app.js', 'public/js')
         .copy('public/js/config.js');
     

4. Caching and Invalidation

   • Cache Busting: Append a hash to the filename (e.g., config.[hash].js) using Laravel’s mix-version or a custom helper.
   • Automate with Artisan: Schedule the command in app/Console/Kernel.php:

     protected function schedule(Schedule $schedule) {
         $schedule->command('config:js:dump')->hourly();
     }
     

Advanced Patterns

• Merge with Existing Configs Use Laravel’s config() helper to merge dynamic values:

  'config' => array_merge(
      config('app.defaults'),
      config('app.overrides')
  ),
  

• Type-Safe Output Validate the config array in config/config-to-js.php:

  'config' => [
      'imageLocation' => ['required', 'url'],
      'appVersion'   => ['required', 'string'],
  ],
  

  Use a validator (e.g., Illuminate\Support\Facades\Validator) before dumping.

Gotchas and Tips

Pitfalls

1. Symfony Legacy Assumptions

   • The bundle expects a Symfony-like structure. In Laravel:
     • Ignore AppKernel.php steps; use the service provider instead.
     • Ensure output_path is an absolute path (e.g., public/js/config.js resolves to storage/framework/views/public/js/config.js if not prefixed with public/).

2. File Permissions Laravel’s storage/ directory may block writes. Set permissions:

   chmod -R 775 storage/
   

   Or configure output_path to write to public/ (e.g., public/js/config.js).

3. Type Limitation

   • The type: 'module' option only supports ES6 modules. For global variables, modify the bundle’s template or use a wrapper:

     // public/js/config.js
     window.AppConfig = { ... };
     

4. Command Not Found If php artisan config:js:dump fails:

   • Verify the service provider is registered.
   • Check for typos in the command name (case-sensitive).

Debugging

• Check Output Inspect the generated JS file for errors. Use console.log in your frontend to verify values:

  console.log(AppConfig); // or `import config from './config.js'`
  

• Log Config Add a debug dump in config/config-to-js.php:

  \Log::debug('Config-to-JS config:', [
      'output_path' => config('config-to-js.output_path'),
      'config' => config('config-to-js.config'),
  ]);
  

Extension Points

1. Custom Templates Override the JS template by publishing the bundle’s assets:

   php artisan vendor:publish --provider="Dawen\Bundle\ConfigToJsBundle\ConfigToJsBundle" --tag="templates"
   

   Edit resources/views/config-to-js/module.js.twig to modify the output format.

2. Pre/Post-Processing Use Laravel’s events to hook into the dump process. Example:

   // app/Providers/EventServiceProvider.php
   protected $listen = [
       'config-to-js.dump' => [
           \App\Listeners\LogConfigDump::class,
       ],
   ];
   

3. Dynamic Config Sources Fetch config from a database or API before dumping:

   // In a service provider's boot method
   $this->app->afterResolving('config-to-js', function ($bundle) {
       $bundle->setConfig(array_merge(
           config('config-to-js.config'),
           \App\Models\Settings::first()->toArray()
       ));
   });
   

Performance Tips

• Minify Output Use Laravel Mix or a separate tool (e.g., uglify-js) to minify config.js:

  // webpack.mix.js
  mix.js('resources/js/app.js', 'public/js')
      .js('public/js/config.js', 'public/js/config.min.js');
  

• Lazy Loading Load the config file asynchronously if it’s large:

  // Load config.js dynamically
  import('./config.js').then(config => {
      window.AppConfig = config.default;
  });