Nova Devtool Laravel Package

Getting Started

Minimal Setup for Immediate Use

1. Install the package in your Laravel project:

   composer require --dev laravel/nova-devtool
   npm install --save-dev @laravel/nova-devtool
   

2. Initialize a Nova development environment using Orchestra Workbench:

   php vendor/bin/testbench nova:devtool setup
   

3. Serve Nova locally with auto-authentication:

   composer run serve
   

   (Edit testbench.yaml to set user: nova@laravel.com under workbench for automatic login.)

First Use Case: Debugging a Custom Nova Field

• Enable Vue DevTools for real-time component inspection:

  php vendor/bin/testbench nova:devtool enable-vue-devtool
  

• Rebuild assets and refresh Nova to see Vue DevTools active in browser.

Implementation Patterns

Workflow: Developing a Nova Tool

1. Scaffold a Nova Tool (e.g., custom card):

   php artisan nova:tool Card
   

2. Install Dev Dependencies (Axios, Tailwind, etc.):

   php vendor/bin/testbench nova:devtool install
   

3. Enable Vue DevTools for debugging:

   php vendor/bin/testbench nova:devtool enable-vue-devtool
   

4. Iterate with Hot Reload:

   npm run dev
   

   (Changes reflect instantly in Nova.)

Integration with Laravel Mix

Replace require('./nova.mix') in webpack.mix.js with:

mix.extend('nova', new require('laravel-nova-devtool'));

Workbench Integration

• Automate testing: Use Workbench’s user config to auto-login and test tools:

  workbench:
    start: /nova
    user: nova@laravel.com
  

• Run tests:

  php vendor/bin/testbench
  

Upgrading Nova Versions

1. Update Nova via Composer:

   composer require laravel/nova:5.7.*
   

2. Reconfigure DevTool:

   php vendor/bin/testbench nova:devtool install
   

Gotchas and Tips

Pitfalls

1. Vue DevTools Conflicts:

   • If Vue DevTools fails to load, ensure webpack.mix.js includes:

     mix.extend('nova', new require('laravel-nova-devtool'));
     

   • Clear node_modules and reinstall:

     rm -rf node_modules && npm install
     

2. Webpack 5 Compatibility:

   • Use nova:devtool enable-vue-devtool after upgrading Webpack to 5.10.6+.
   • If assets fail to compile, downgrade Webpack temporarily:

     npm install webpack@5.10.5
     

3. Workbench Authentication:

   • Ensure testbench.yaml has the correct user email (must match a registered Nova user).
   • Debug login issues with:

     php artisan tinker
     >>> \App\Models\User::where('email', 'nova@laravel.com')->first();
     

Debugging Tips

• Check Nova Logs:

  tail -f storage/logs/nova.log
  

• Verify Mix Config: Run npm run dev to catch Mix errors early.

Extension Points

1. Custom Commands: Extend nova:devtool by publishing a custom command:

   // app/Console/Commands/ExtendNovaDevtool.php
   public function handle() {
       $this->call('nova:devtool', ['--custom' => 'flag']);
   }
   

2. Tailwind Config: Override Tailwind in tailwind.config.js:

   module.exports = {
       presets: [require('laravel-nova-devtool/tailwind')],
       // Customize here
   };
   

3. TypeScript Support: Generate tsconfig.json:

   php vendor/bin/testbench nova:devtool tsconfig
   

Pro Tips

• Auto-Reload Nova: Use laravel-echo + pusher-js for real-time updates during development.
• Share Configs: Store testbench.yaml and webpack.mix.js in a shared repo for team consistency.
• Nova 4 Migration: Replace nova.mix.js with mix.extend('nova', ...) and remove the old file.