Easily implement broadcasting in a React/Vue Typescript app (Starter Kits) (#55170)

* Adding initial trial for the framework specific echo lib

* few more updates

* Adding functionality for vue composable

* updating the react hook with updated config options

* Adding the configure code injection step

* Getting styleCI to pass

* removing the useEcho stubs, instead will be added to laravel-echo npm package

* fix spacing

* fix spacing

* fix spacing

* making methods more efficient

* making methods more efficient

* updates to utilize the new packages

* Update BroadcastingInstallCommand.php

* better value detection for .env

* Update BroadcastingInstallCommand.php

* Update BroadcastingInstallCommand.php

* Update BroadcastingInstallCommand.php

* Update BroadcastingInstallCommand.php

* Update BroadcastingInstallCommand.php

* formatting

* Update BroadcastingInstallCommand.php

* formatting

* writeVariable(s) env helpers

* handle blank values cleanly

* use the env variable writer

* unhandle match case

* no need to ask for public key

* warn about pusher protocol support

* move the ably warning up so that it's visible longer

* enable

* driver specific stubs

* hopefully fix line endings

---------

Co-authored-by: Joe Tannenbaum <joe.tannenbaum@laravel.com>
Co-authored-by: Taylor Otwell <taylor@laravel.com>

Author: 3 people

src/Illuminate/Foundation/Console/BroadcastingInstallCommand.php

@@ -5,12 +5,16 @@
 use Composer\InstalledVersions;
 use Illuminate\Console\Command;
 use Illuminate\Filesystem\Filesystem;
+use Illuminate\Support\Env;
 use Illuminate\Support\Facades\Process;
 use Symfony\Component\Console\Attribute\AsCommand;
 
 use function Illuminate\Support\artisan_binary;
 use function Illuminate\Support\php_binary;
 use function Laravel\Prompts\confirm;
+use function Laravel\Prompts\password;
+use function Laravel\Prompts\select;
+use function Laravel\Prompts\text;
 
 #[AsCommand(name: 'install:broadcasting')]
 class BroadcastingInstallCommand extends Command
@@ -26,6 +30,9 @@ class BroadcastingInstallCommand extends Command
                     {--composer=global : Absolute path to the Composer binary which should be used to install packages}
                     {--force : Overwrite any existing broadcasting routes file}
                     {--without-reverb : Do not prompt to install Laravel Reverb}
+                    {--reverb : Install Laravel Reverb as the default broadcaster}
+                    {--pusher : Install Pusher as the default broadcaster}
+                    {--ably : Install Ably as the default broadcaster}
                     {--without-node : Do not prompt to install Node dependencies}';
 
     /**
@@ -35,6 +42,23 @@ class BroadcastingInstallCommand extends Command
      */
     protected $description = 'Create a broadcasting channel routes file';
 
+    /**
+     * The broadcasting driver to use.
+     *
+     * @var string|null
+     */
+    protected $driver = null;
+
+    /**
+     * The framework packages to install.
+     *
+     * @var array
+     */
+    protected $frameworkPackages = [
+        'react' => '@laravel/echo-react',
+        'vue' => '@laravel/echo-vue',
+    ];
+
     /**
      * Execute the console command.
      *
@@ -54,25 +78,44 @@ public function handle()
         $this->uncommentChannelsRoutesFile();
         $this->enableBroadcastServiceProvider();
 
-        // Install bootstrapping...
-        if (! file_exists($echoScriptPath = $this->laravel->resourcePath('js/echo.js'))) {
-            if (! is_dir($directory = $this->laravel->resourcePath('js'))) {
-                mkdir($directory, 0755, true);
-            }
+        $this->driver = $this->resolveDriver();
 
-            copy(__DIR__.'/stubs/echo-js.stub', $echoScriptPath);
-        }
+        Env::writeVariable('BROADCAST_CONNECTION', $this->driver, $this->laravel->basePath('.env'), true);
 
-        if (file_exists($bootstrapScriptPath = $this->laravel->resourcePath('js/bootstrap.js'))) {
-            $bootstrapScript = file_get_contents(
-                $bootstrapScriptPath
-            );
+        $this->collectDriverConfig();
+        $this->installDriverPackages();
+
+        if ($this->isUsingSupportedFramework()) {
+            // If this is a supported framework, we will use the framework-specific Echo helpers...
+            $this->injectFrameworkSpecificConfiguration();
+        } else {
+            // Standard JavaScript implementation...
+            if (! file_exists($echoScriptPath = $this->laravel->resourcePath('js/echo.js'))) {
+                if (! is_dir($directory = $this->laravel->resourcePath('js'))) {
+                    mkdir($directory, 0755, true);
+                }
+
+                $stubPath = __DIR__.'/stubs/echo-js-'.$this->driver.'.stub';
+
+                if (! file_exists($stubPath)) {
+                    $stubPath = __DIR__.'/stubs/echo-js-reverb.stub';
+                }
+
+                copy($stubPath, $echoScriptPath);
+            }
 
-            if (! str_contains($bootstrapScript, './echo')) {
-                file_put_contents(
-                    $bootstrapScriptPath,
-                    trim($bootstrapScript.PHP_EOL.file_get_contents(__DIR__.'/stubs/echo-bootstrap-js.stub')).PHP_EOL,
+            // Only add the bootstrap import for the standard JS implementation...
+            if (file_exists($bootstrapScriptPath = $this->laravel->resourcePath('js/bootstrap.js'))) {
+                $bootstrapScript = file_get_contents(
+                    $bootstrapScriptPath
                 );
+
+                if (! str_contains($bootstrapScript, './echo')) {
+                    file_put_contents(
+                        $bootstrapScriptPath,
+                        trim($bootstrapScript.PHP_EOL.file_get_contents(__DIR__.'/stubs/echo-bootstrap-js.stub')).PHP_EOL,
+                    );
+                }
             }
         }
 
@@ -118,8 +161,10 @@ protected function enableBroadcastServiceProvider()
     {
         $filesystem = new Filesystem;
 
-        if (! $filesystem->exists(app()->configPath('app.php')) ||
-            ! $filesystem->exists('app/Providers/BroadcastServiceProvider.php')) {
+        if (
+            ! $filesystem->exists(app()->configPath('app.php')) ||
+            ! $filesystem->exists('app/Providers/BroadcastServiceProvider.php')
+        ) {
             return;
         }
 
@@ -134,14 +179,179 @@ protected function enableBroadcastServiceProvider()
         }
     }
 
+    /**
+     * Collect the driver configuration.
+     *
+     * @return void
+     */
+    protected function collectDriverConfig()
+    {
+        $envPath = $this->laravel->basePath('.env');
+
+        if (! file_exists($envPath)) {
+            return;
+        }
+
+        match ($this->driver) {
+            'pusher' => $this->collectPusherConfig(),
+            'ably' => $this->collectAblyConfig(),
+            default => null,
+        };
+    }
+
+    /**
+     * Install the driver packages.
+     *
+     * @return void
+     */
+    protected function installDriverPackages()
+    {
+        $package = match ($this->driver) {
+            'pusher' => 'pusher/pusher-php-server',
+            'ably' => 'ably/ably-php',
+            default => null,
+        };
+
+        if (! $package || InstalledVersions::isInstalled($package)) {
+            return;
+        }
+
+        $this->requireComposerPackages($this->option('composer'), [$package]);
+    }
+
+    /**
+     * Collect the Pusher configuration.
+     *
+     * @return void
+     */
+    protected function collectPusherConfig()
+    {
+        $appId = text('Pusher App ID', 'Enter your Pusher app ID');
+        $key = password('Pusher App Key', 'Enter your Pusher app key');
+        $secret = password('Pusher App Secret', 'Enter your Pusher app secret');
+
+        $cluster = select('Pusher App Cluster', [
+            'mt1',
+            'us2',
+            'us3',
+            'eu',
+            'ap1',
+            'ap2',
+            'ap3',
+            'ap4',
+            'sa1',
+        ]);
+
+        Env::writeVariables([
+            'PUSHER_APP_ID' => $appId,
+            'PUSHER_APP_KEY' => $key,
+            'PUSHER_APP_SECRET' => $secret,
+            'PUSHER_APP_CLUSTER' => $cluster,
+            'PUSHER_PORT' => 443,
+            'PUSHER_SCHEME' => 'https',
+            'VITE_PUSHER_APP_KEY' => '${PUSHER_APP_KEY}',
+            'VITE_PUSHER_APP_CLUSTER' => '${PUSHER_APP_CLUSTER}',
+            'VITE_PUSHER_HOST' => '${PUSHER_HOST}',
+            'VITE_PUSHER_PORT' => '${PUSHER_PORT}',
+            'VITE_PUSHER_SCHEME' => '${PUSHER_SCHEME}',
+        ], $this->laravel->basePath('.env'));
+    }
+
+    /**
+     * Collect the Ably configuration.
+     *
+     * @return void
+     */
+    protected function collectAblyConfig()
+    {
+        $this->components->warn('Make sure to enable "Pusher protocol support" in your Ably app settings.');
+
+        $key = password('Ably Key', 'Enter your Ably key');
+
+        $publicKey = explode(':', $key)[0] ?? $key;
+
+        Env::writeVariables([
+            'ABLY_KEY' => $key,
+            'ABLY_PUBLIC_KEY' => $publicKey,
+            'VITE_ABLY_PUBLIC_KEY' => '${ABLY_PUBLIC_KEY}',
+        ], $this->laravel->basePath('.env'));
+    }
+
+    /**
+     * Inject Echo configuration into the application's main file.
+     *
+     * @return void
+     */
+    protected function injectFrameworkSpecificConfiguration()
+    {
+        if ($this->appUsesVue()) {
+            $importPath = $this->frameworkPackages['vue'];
+
+            $filePaths = [
+                $this->laravel->resourcePath('js/app.ts'),
+                $this->laravel->resourcePath('js/app.js'),
+            ];
+        } else {
+            $importPath = $this->frameworkPackages['react'];
+
+            $filePaths = [
+                $this->laravel->resourcePath('js/app.tsx'),
+                $this->laravel->resourcePath('js/app.jsx'),
+            ];
+        }
+
+        $filePath = array_filter($filePaths, function ($path) {
+            return file_exists($path);
+        })[0] ?? null;
+
+        if (! $filePath) {
+            $this->components->warn("Could not find file [{$filePaths[0]}]. Skipping automatic Echo configuration.");
+
+            return;
+        }
+
+        $contents = file_get_contents($filePath);
+
+        $echoCode = <<<JS
+        import { configureEcho } from '{$importPath}';
+
+        configureEcho({
+            broadcaster: '{$this->driver}',
+        });
+        JS;
+
+        preg_match_all('/^import .+;$/m', $contents, $matches);
+
+        if (empty($matches[0])) {
+            // Add the Echo configuration to the top of the file if no import statements are found...
+            $newContents = $echoCode.PHP_EOL.$contents;
+
+            file_put_contents($filePath, $newContents);
+        } else {
+            // Add Echo configuration after the last import...
+            $lastImport = end($matches[0]);
+
+            $positionOfLastImport = strrpos($contents, $lastImport);
+
+            if ($positionOfLastImport !== false) {
+                $insertPosition = $positionOfLastImport + strlen($lastImport);
+                $newContents = substr($contents, 0, $insertPosition).PHP_EOL.$echoCode.substr($contents, $insertPosition);
+
+                file_put_contents($filePath, $newContents);
+            }
+        }
+
+        $this->components->info('Echo configuration added to ['.basename($filePath).'].');
+    }
+
     /**
      * Install Laravel Reverb into the application if desired.
      *
      * @return void
      */
     protected function installReverb()
     {
-        if ($this->option('without-reverb') || InstalledVersions::isInstalled('laravel/reverb')) {
+        if ($this->driver !== 'reverb' || $this->option('without-reverb') || InstalledVersions::isInstalled('laravel/reverb')) {
             return;
         }
 
@@ -199,6 +409,12 @@ protected function installNodeDependencies()
             ];
         }
 
+        if ($this->appUsesVue()) {
+            $commands[0] .= ' '.$this->frameworkPackages['vue'];
+        } elseif ($this->appUsesReact()) {
+            $commands[0] .= ' '.$this->frameworkPackages['react'];
+        }
+
         $command = Process::command(implode(' && ', $commands))
             ->path(base_path());
 
@@ -212,4 +428,79 @@ protected function installNodeDependencies()
             $this->components->info('Node dependencies installed successfully.');
         }
     }
+
+    /**
+     * Resolve the provider to use based on the user's choice.
+     *
+     * @return string
+     */
+    protected function resolveDriver(): string
+    {
+        if ($this->option('reverb')) {
+            return 'reverb';
+        }
+
+        if ($this->option('pusher')) {
+            return 'pusher';
+        }
+
+        if ($this->option('ably')) {
+            return 'ably';
+        }
+
+        return select('Which broadcasting driver would you like to use?', [
+            'reverb' => 'Laravel Reverb',
+            'pusher' => 'Pusher',
+            'ably' => 'Ably',
+        ]);
+    }
+
+    /**
+     * Detect if the user is using a supported framework (React or Vue).
+     *
+     * @return bool
+     */
+    protected function isUsingSupportedFramework(): bool
+    {
+        return $this->appUsesReact() || $this->appUsesVue();
+    }
+
+    /**
+     * Detect if the user is using React.
+     *
+     * @return bool
+     */
+    protected function appUsesReact(): bool
+    {
+        return $this->packageDependenciesInclude('react');
+    }
+
+    /**
+     * Detect if the user is using Vue.
+     *
+     * @return bool
+     */
+    protected function appUsesVue(): bool
+    {
+        return $this->packageDependenciesInclude('vue');
+    }
+
+    /**
+     * Detect if the package is installed.
+     *
+     * @return bool
+     */
+    protected function packageDependenciesInclude(string $package): bool
+    {
+        $packageJsonPath = $this->laravel->basePath('package.json');
+
+        if (! file_exists($packageJsonPath)) {
+            return false;
+        }
+
+        $packageJson = json_decode(file_get_contents($packageJsonPath), true);
+
+        return isset($packageJson['dependencies'][$package]) ||
+            isset($packageJson['devDependencies'][$package]);
+    }
 }