[1.x] Add Inertia SSR Support (laravel#146)

* feat: Add Inertia SSR Support.

* feat: Add Support for Inertia React

* style: fixes.

src/Console/InstallCommand.php

@@ -5,6 +5,7 @@
 use Illuminate\Console\Command;
 use Illuminate\Filesystem\Filesystem;
 use Illuminate\Support\Str;
+use Symfony\Component\Process\PhpExecutableFinder;
 use Symfony\Component\Process\Process;
 
 class InstallCommand extends Command
@@ -18,7 +19,8 @@ class InstallCommand extends Command
      */
     protected $signature = 'breeze:install {stack=blade : The development stack that should be installed (blade,react,vue,api)}
                             {--inertia : Indicate that the Vue Inertia stack should be installed (Deprecated)}
-                            {--pest : Indicate that Pest should be installed }
+                            {--pest : Indicate that Pest should be installed}
+                            {--ssr : Indicates if Inertia SSR support should be installed}
                             {--composer=global : Absolute path to the Composer binary which should be used to install packages}';
 
     /**
@@ -181,4 +183,14 @@ protected function replaceInFile($search, $replace, $path)
     {
         file_put_contents($path, str_replace($search, $replace, file_get_contents($path)));
     }
+
+    /**
+     * Get the path to the appropriate PHP binary.
+     *
+     * @return string
+     */
+    protected function phpBinary()
+    {
+        return (new PhpExecutableFinder())->find(false) ?: 'php';
+    }
 }

src/Console/InstallsInertiaStacks.php

@@ -3,6 +3,7 @@
 namespace Laravel\Breeze\Console;
 
 use Illuminate\Filesystem\Filesystem;
+use Symfony\Component\Process\Process;
 
 trait InstallsInertiaStacks
 {
@@ -21,15 +22,15 @@ protected function installInertiaVueStack()
             return [
                 '@inertiajs/inertia' => '^0.11.0',
                 '@inertiajs/inertia-vue3' => '^0.6.0',
-                '@inertiajs/progress' => '^0.2.6',
-                '@tailwindcss/forms' => '^0.4.0',
-                '@vue/compiler-sfc' => '^3.2.30',
+                '@inertiajs/progress' => '^0.2.7',
+                '@tailwindcss/forms' => '^0.5.0',
+                '@vue/compiler-sfc' => '^3.2.31',
                 'autoprefixer' => '^10.4.2',
                 'postcss' => '^8.4.6',
                 'postcss-import' => '^14.0.2',
                 'tailwindcss' => '^3.0.18',
-                'vue' => '^3.2.30',
-                'vue-loader' => '^16.1.2',
+                'vue' => '^3.2.31',
+                'vue-loader' => '^17.0.0',
             ] + $packages;
         });
 
@@ -77,10 +78,42 @@ protected function installInertiaVueStack()
         copy(__DIR__.'/../../stubs/inertia-common/resources/css/app.css', resource_path('css/app.css'));
         copy(__DIR__.'/../../stubs/inertia-vue/resources/js/app.js', resource_path('js/app.js'));
 
+        if ($this->option('ssr')) {
+            $this->installInertiaVueSsrStack();
+        }
+
         $this->info('Breeze scaffolding installed successfully.');
         $this->comment('Please execute the "npm install && npm run dev" command to build your assets.');
     }
 
+    /**
+     * Install the Inertia Vue SSR stack into the application.
+     *
+     * @return void
+     */
+    protected function installInertiaVueSsrStack()
+    {
+        $this->updateNodePackages(function ($packages) {
+            return [
+                '@inertiajs/server' => '^0.1.0',
+                '@vue/server-renderer' => '^3.2.31',
+                'webpack-node-externals' => '^3.0.0',
+            ] + $packages;
+        });
+
+        copy(__DIR__.'/../../stubs/inertia-vue/webpack.ssr.mix.js', base_path('webpack.ssr.mix.js'));
+        copy(__DIR__.'/../../stubs/inertia-vue/resources/js/ssr.js', resource_path('js/ssr.js'));
+
+        (new Process([$this->phpBinary(), 'artisan', 'vendor:publish', '--provider=Inertia\ServiceProvider', '--force'], base_path()))
+            ->setTimeout(null)
+            ->run(function ($type, $output) {
+                $this->output->write($output);
+            });
+
+        $this->replaceInFile("'enabled' => false", "'enabled' => true", config_path('inertia.php'));
+        $this->replaceInFile('mix --production', 'mix --production --mix-config=webpack.ssr.mix.js && mix --production', base_path('package.json'));
+    }
+
     /**
      * Install the Inertia React Breeze stack.
      *
@@ -156,7 +189,38 @@ protected function installInertiaReactStack()
         $this->replaceInFile('.vue()', '.react()', base_path('webpack.mix.js'));
         $this->replaceInFile('.vue', '.js', base_path('tailwind.config.js'));
 
+        if ($this->option('ssr')) {
+            $this->installInertiaReactSsrStack();
+        }
+
         $this->info('Breeze scaffolding installed successfully.');
         $this->comment('Please execute the "npm install && npm run dev" command to build your assets.');
     }
+
+    /**
+     * Install the Inertia React SSR stack into the application.
+     *
+     * @return void
+     */
+    protected function installInertiaReactSsrStack()
+    {
+        $this->updateNodePackages(function ($packages) {
+            return [
+                '@inertiajs/server' => '^0.1.0',
+                'webpack-node-externals' => '^3.0.0',
+            ] + $packages;
+        });
+
+        copy(__DIR__.'/../../stubs/inertia-react/webpack.ssr.mix.js', base_path('webpack.ssr.mix.js'));
+        copy(__DIR__.'/../../stubs/inertia-react/resources/js/ssr.js', resource_path('js/ssr.js'));
+
+        (new Process([$this->phpBinary(), 'artisan', 'vendor:publish', '--provider=Inertia\ServiceProvider', '--force'], base_path()))
+            ->setTimeout(null)
+            ->run(function ($type, $output) {
+                $this->output->write($output);
+            });
+
+        $this->replaceInFile("'enabled' => false", "'enabled' => true", config_path('inertia.php'));
+        $this->replaceInFile('mix --production', 'mix --production --mix-config=webpack.ssr.mix.js && mix --production', base_path('package.json'));
+    }
 }

stubs/inertia-common/app/Http/Middleware/HandleInertiaRequests.php

@@ -4,6 +4,7 @@
 
 use Illuminate\Http\Request;
 use Inertia\Middleware;
+use Tightenco\Ziggy\Ziggy;
 
 class HandleInertiaRequests extends Middleware
 {
@@ -37,6 +38,9 @@ public function share(Request $request)
             'auth' => [
                 'user' => $request->user(),
             ],
+            'ziggy' => function () {
+                return (new Ziggy)->toArray();
+            },
         ]);
     }
 }

stubs/inertia-common/resources/views/app.blade.php

@@ -15,6 +15,7 @@
         <!-- Scripts -->
         @routes
         <script src="{{ mix('js/app.js') }}" defer></script>
+        @inertiaHead
     </head>
     <body class="font-sans antialiased">
         @inertia

stubs/inertia-react/resources/js/ssr.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+import { createInertiaApp } from '@inertiajs/inertia-react';
+import createServer from '@inertiajs/server';
+import route from 'ziggy';
+
+const appName = 'Laravel';
+
+createServer((page) =>
+    createInertiaApp({
+        page,
+        render: ReactDOMServer.renderToString,
+        title: (title) => `${title} - ${appName}`,
+        resolve: (name) => require(`./Pages/${name}`),
+        setup: ({ App, props }) => {
+            global.route = (name, params, absolute) =>
+                route(name, params, absolute, {
+                    ...page.props.ziggy,
+                    location: new URL(page.props.ziggy.url),
+                });
+
+            return <App {...props} />;
+        },
+    })
+);

stubs/inertia-react/webpack.ssr.mix.js

@@ -0,0 +1,14 @@
+const mix = require('laravel-mix');
+const webpackNodeExternals = require('webpack-node-externals');
+
+mix.options({ manifest: false })
+    .js('resources/js/ssr.js', 'public/js')
+    .react()
+    .alias({
+        '@': 'resources/js',
+        ziggy: 'vendor/tightenco/ziggy/dist/index',
+    })
+    .webpackConfig({
+        target: 'node',
+        externals: [webpackNodeExternals()],
+    });

stubs/inertia-vue/resources/js/ssr.js

@@ -0,0 +1,30 @@
+import { createSSRApp, h } from 'vue';
+import { renderToString } from '@vue/server-renderer';
+import { createInertiaApp } from '@inertiajs/inertia-vue3';
+import createServer from '@inertiajs/server';
+import route from 'ziggy';
+
+const appName = 'Laravel';
+
+createServer((page) =>
+    createInertiaApp({
+        page,
+        render: renderToString,
+        title: (title) => `${title} - ${appName}`,
+        resolve: (name) => require(`./Pages/${name}.vue`),
+        setup({ app, props, plugin }) {
+            return createSSRApp({ render: () => h(app, props) })
+                .use(plugin)
+                .mixin({
+                    methods: {
+                        route: (name, params, absolute) => {
+                            return route(name, params, absolute, {
+                                ...page.props.ziggy,
+                                location: new URL(page.props.ziggy.url),
+                            });
+                        },
+                    },
+                });
+        },
+    })
+);

stubs/inertia-vue/webpack.ssr.mix.js

@@ -0,0 +1,17 @@
+const mix = require('laravel-mix');
+const webpackNodeExternals = require('webpack-node-externals');
+
+mix.js('resources/js/ssr.js', 'public/js')
+    .vue({
+        version: 3,
+        useVueStyleLoader: true,
+        options: { optimizeSSR: true },
+    })
+    .alias({
+        '@': 'resources/js',
+        ziggy: 'vendor/tightenco/ziggy/dist/index',
+    })
+    .webpackConfig({
+        target: 'node',
+        externals: [webpackNodeExternals()],
+    });