From 4b0e75308001127ef5bb994a3f63f1791eed7e3a Mon Sep 17 00:00:00 2001 From: Francisco Madeira Date: Sun, 20 Mar 2022 01:11:05 +0000 Subject: [PATCH 1/7] Add Inertia SSR Support --- src/Console/InstallCommand.php | 15 +++++++++++ src/Http/Middleware/ShareInertiaData.php | 4 +++ stubs/inertia/resources/js/ssr.js | 28 +++++++++++++++++++++ stubs/inertia/resources/views/app.blade.php | 1 + stubs/inertia/webpack.ssr.mix.js | 18 +++++++++++++ 5 files changed, 66 insertions(+) create mode 100644 stubs/inertia/resources/js/ssr.js create mode 100644 stubs/inertia/webpack.ssr.mix.js diff --git a/src/Console/InstallCommand.php b/src/Console/InstallCommand.php index 475c6f78f..db06be0e5 100644 --- a/src/Console/InstallCommand.php +++ b/src/Console/InstallCommand.php @@ -288,13 +288,16 @@ protected function installInertiaStack() '@inertiajs/inertia' => '^0.11.0', '@inertiajs/inertia-vue3' => '^0.6.0', '@inertiajs/progress' => '^0.2.7', + '@inertiajs/server' => '^0.1.0', '@tailwindcss/forms' => '^0.5.0', '@tailwindcss/typography' => '^0.5.2', 'postcss-import' => '^14.0.2', 'tailwindcss' => '^3.0.0', 'vue' => '^3.2.31', '@vue/compiler-sfc' => '^3.2.31', + '@vue/server-renderer' => '^3.2.31', 'vue-loader' => '^17.0.0', + 'webpack-node-externals' => '^3.0.0' ] + $packages; }); @@ -308,6 +311,7 @@ protected function installInertiaStack() // Tailwind Configuration... copy(__DIR__.'/../../stubs/inertia/tailwind.config.js', base_path('tailwind.config.js')); copy(__DIR__.'/../../stubs/inertia/webpack.mix.js', base_path('webpack.mix.js')); + copy(__DIR__.'/../../stubs/inertia/webpack.ssr.mix.js', base_path('webpack.ssr.mix.js')); // Directories... (new Filesystem)->ensureDirectoryExists(app_path('Actions/Fortify')); @@ -341,6 +345,16 @@ protected function installInertiaStack() $this->output->write($output); }); + // SSR... + (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')); + $this->installMiddlewareAfter('SubstituteBindings::class', '\App\Http\Middleware\HandleInertiaRequests::class'); // Models... @@ -382,6 +396,7 @@ protected function installInertiaStack() copy(__DIR__.'/../../stubs/public/css/app.css', public_path('css/app.css')); copy(__DIR__.'/../../stubs/resources/css/app.css', resource_path('css/app.css')); copy(__DIR__.'/../../stubs/inertia/resources/js/app.js', resource_path('js/app.js')); + copy(__DIR__.'/../../stubs/inertia/resources/js/ssr.js', resource_path('js/ssr.js')); // Flush node_modules... // static::flushNodeModules(); diff --git a/src/Http/Middleware/ShareInertiaData.php b/src/Http/Middleware/ShareInertiaData.php index 8928520a0..e87b61f67 100644 --- a/src/Http/Middleware/ShareInertiaData.php +++ b/src/Http/Middleware/ShareInertiaData.php @@ -7,6 +7,7 @@ use Inertia\Inertia; use Laravel\Fortify\Features; use Laravel\Jetstream\Jetstream; +use Tightenco\Ziggy\Ziggy; class ShareInertiaData { @@ -56,6 +57,9 @@ public function handle($request, $next) return [$key => $bag->messages()]; })->all(); }, + 'ziggy' => function () { + return (new Ziggy)->toArray(); + } ])); return $next($request); diff --git a/stubs/inertia/resources/js/ssr.js b/stubs/inertia/resources/js/ssr.js new file mode 100644 index 000000000..92f43c845 --- /dev/null +++ b/stubs/inertia/resources/js/ssr.js @@ -0,0 +1,28 @@ +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), + }) + }, + } + }); + }, +})); diff --git a/stubs/inertia/resources/views/app.blade.php b/stubs/inertia/resources/views/app.blade.php index fe0e36dd5..f651f27c2 100644 --- a/stubs/inertia/resources/views/app.blade.php +++ b/stubs/inertia/resources/views/app.blade.php @@ -15,6 +15,7 @@ @routes + @inertiaHead @inertia diff --git a/stubs/inertia/webpack.ssr.mix.js b/stubs/inertia/webpack.ssr.mix.js new file mode 100644 index 000000000..ad8de65fa --- /dev/null +++ b/stubs/inertia/webpack.ssr.mix.js @@ -0,0 +1,18 @@ +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()], + }) From 77cca0ca6a3326f92967913b6da3ae8d6595cec4 Mon Sep 17 00:00:00 2001 From: Francisco Madeira Date: Sun, 20 Mar 2022 01:28:59 +0000 Subject: [PATCH 2/7] Add `--ssr` option. --- src/Console/InstallCommand.php | 44 +++++++++++++++++++++++++--------- 1 file changed, 33 insertions(+), 11 deletions(-) diff --git a/src/Console/InstallCommand.php b/src/Console/InstallCommand.php index db06be0e5..504a9c00d 100644 --- a/src/Console/InstallCommand.php +++ b/src/Console/InstallCommand.php @@ -19,6 +19,7 @@ class InstallCommand extends Command protected $signature = 'jetstream:install {stack : The development stack that should be installed} {--teams : Indicates if team support should be installed} {--pest : Indicates if 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}'; /** @@ -345,16 +346,6 @@ protected function installInertiaStack() $this->output->write($output); }); - // SSR... - (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')); - $this->installMiddlewareAfter('SubstituteBindings::class', '\App\Http\Middleware\HandleInertiaRequests::class'); // Models... @@ -396,7 +387,6 @@ protected function installInertiaStack() copy(__DIR__.'/../../stubs/public/css/app.css', public_path('css/app.css')); copy(__DIR__.'/../../stubs/resources/css/app.css', resource_path('css/app.css')); copy(__DIR__.'/../../stubs/inertia/resources/js/app.js', resource_path('js/app.js')); - copy(__DIR__.'/../../stubs/inertia/resources/js/ssr.js', resource_path('js/ssr.js')); // Flush node_modules... // static::flushNodeModules(); @@ -418,6 +408,10 @@ protected function installInertiaStack() $this->installInertiaTeamStack(); } + if ($this->option('ssr')) { + $this->installInertiaSsrStack(); + } + $this->line(''); $this->info('Inertia scaffolding installed successfully.'); $this->comment('Please execute "npm install && npm run dev" to build your assets.'); @@ -497,6 +491,34 @@ protected function ensureApplicationIsTeamCompatible() copy(__DIR__.'/../../database/factories/TeamFactory.php', base_path('database/factories/TeamFactory.php')); } + /** + * Install the Inertia SSR stack into the application. + * + * @return void + */ + protected function installInertiaSsrStack() + { + $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/webpack.ssr.mix.js', base_path('webpack.ssr.mix.js')); + copy(__DIR__.'/../../stubs/inertia/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 service provider in the application configuration file. * From 7c000a27f19433285c5cfb14751d426980db4028 Mon Sep 17 00:00:00 2001 From: Francisco Madeira Date: Sun, 20 Mar 2022 01:40:17 +0000 Subject: [PATCH 3/7] Remove not need imports on default inertia stack --- src/Console/InstallCommand.php | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/Console/InstallCommand.php b/src/Console/InstallCommand.php index 504a9c00d..060f5b21f 100644 --- a/src/Console/InstallCommand.php +++ b/src/Console/InstallCommand.php @@ -289,16 +289,13 @@ protected function installInertiaStack() '@inertiajs/inertia' => '^0.11.0', '@inertiajs/inertia-vue3' => '^0.6.0', '@inertiajs/progress' => '^0.2.7', - '@inertiajs/server' => '^0.1.0', '@tailwindcss/forms' => '^0.5.0', '@tailwindcss/typography' => '^0.5.2', 'postcss-import' => '^14.0.2', 'tailwindcss' => '^3.0.0', 'vue' => '^3.2.31', '@vue/compiler-sfc' => '^3.2.31', - '@vue/server-renderer' => '^3.2.31', 'vue-loader' => '^17.0.0', - 'webpack-node-externals' => '^3.0.0' ] + $packages; }); @@ -502,7 +499,7 @@ protected function installInertiaSsrStack() return [ '@inertiajs/server' => '^0.1.0', '@vue/server-renderer' => '^3.2.31', - 'webpack-node-externals' => '^3.0.0' + 'webpack-node-externals' => '^3.0.0', ] + $packages; }); From e80cb33351fa9d31d25e661dfd251e0152356fe3 Mon Sep 17 00:00:00 2001 From: Francisco Madeira Date: Sun, 20 Mar 2022 01:42:39 +0000 Subject: [PATCH 4/7] style: fixes --- src/Http/Middleware/ShareInertiaData.php | 2 +- stubs/inertia/resources/js/ssr.js | 46 ++++++++++++------------ stubs/inertia/webpack.ssr.mix.js | 11 +++--- 3 files changed, 30 insertions(+), 29 deletions(-) diff --git a/src/Http/Middleware/ShareInertiaData.php b/src/Http/Middleware/ShareInertiaData.php index e87b61f67..59c9cfe5a 100644 --- a/src/Http/Middleware/ShareInertiaData.php +++ b/src/Http/Middleware/ShareInertiaData.php @@ -59,7 +59,7 @@ public function handle($request, $next) }, 'ziggy' => function () { return (new Ziggy)->toArray(); - } + }, ])); return $next($request); diff --git a/stubs/inertia/resources/js/ssr.js b/stubs/inertia/resources/js/ssr.js index 92f43c845..c33c7fd7b 100644 --- a/stubs/inertia/resources/js/ssr.js +++ b/stubs/inertia/resources/js/ssr.js @@ -1,28 +1,30 @@ -import { createSSRApp, h } from 'vue' -import { renderToString } from '@vue/server-renderer' +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), - }) - }, - } - }); - }, -})); +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), + }) + }, + } + }); + }, + }) +); diff --git a/stubs/inertia/webpack.ssr.mix.js b/stubs/inertia/webpack.ssr.mix.js index ad8de65fa..6dfaae611 100644 --- a/stubs/inertia/webpack.ssr.mix.js +++ b/stubs/inertia/webpack.ssr.mix.js @@ -1,18 +1,17 @@ const mix = require('laravel-mix'); -const webpackNodeExternals = require('webpack-node-externals') +const webpackNodeExternals = require('webpack-node-externals'); -mix - .js('resources/js/ssr.js', 'public/js') +mix.js('resources/js/ssr.js', 'public/js') .vue({ version: 3, useVueStyleLoader: true, - options: { optimizeSSR: true } + options: { optimizeSSR: true }, }) .alias({ '@': 'resources/js', - 'ziggy': 'vendor/tightenco/ziggy/dist/index', + ziggy: 'vendor/tightenco/ziggy/dist/index', }) .webpackConfig({ target: 'node', externals: [webpackNodeExternals()], - }) + }); From 2f253116b3e8b06c4bb56c646e40068052a5240e Mon Sep 17 00:00:00 2001 From: Francisco Madeira Date: Sun, 20 Mar 2022 01:43:42 +0000 Subject: [PATCH 5/7] style: fixes --- src/Console/InstallCommand.php | 2 +- stubs/inertia/resources/js/ssr.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Console/InstallCommand.php b/src/Console/InstallCommand.php index 060f5b21f..401325cb3 100644 --- a/src/Console/InstallCommand.php +++ b/src/Console/InstallCommand.php @@ -513,7 +513,7 @@ protected function installInertiaSsrStack() }); $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')); + $this->replaceInFile('mix --production', 'mix --production --mix-config=webpack.ssr.mix.js && mix --production', base_path('package.json')); } /** diff --git a/stubs/inertia/resources/js/ssr.js b/stubs/inertia/resources/js/ssr.js index c33c7fd7b..4e40c74dc 100644 --- a/stubs/inertia/resources/js/ssr.js +++ b/stubs/inertia/resources/js/ssr.js @@ -1,7 +1,7 @@ import { createSSRApp, h } from 'vue'; import { renderToString } from '@vue/server-renderer'; import { createInertiaApp } from '@inertiajs/inertia-vue3'; -import createServer from '@inertiajs/server' +import createServer from '@inertiajs/server'; import route from 'ziggy'; const appName = 'Laravel'; From 1d30b8574a6c5b134ac4cdc606c50a6e4e8a0126 Mon Sep 17 00:00:00 2001 From: Francisco Madeira Date: Sun, 20 Mar 2022 01:44:11 +0000 Subject: [PATCH 6/7] style: fixes --- stubs/inertia/resources/js/ssr.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/stubs/inertia/resources/js/ssr.js b/stubs/inertia/resources/js/ssr.js index 4e40c74dc..59b904cf9 100644 --- a/stubs/inertia/resources/js/ssr.js +++ b/stubs/inertia/resources/js/ssr.js @@ -21,9 +21,9 @@ createServer((page) => return route(name, params, absolute, { ...page.props.ziggy, location: new URL(page.props.ziggy.url), - }) + }); }, - } + }, }); }, }) From 1ed23b8de63380f33c192dc3cf9799d13b9aa984 Mon Sep 17 00:00:00 2001 From: Francisco Madeira Date: Sun, 20 Mar 2022 01:52:39 +0000 Subject: [PATCH 7/7] Remove `webpack.ssr.mix.js` on the Inertia default stack --- src/Console/InstallCommand.php | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Console/InstallCommand.php b/src/Console/InstallCommand.php index 401325cb3..4ef2cecf5 100644 --- a/src/Console/InstallCommand.php +++ b/src/Console/InstallCommand.php @@ -309,7 +309,6 @@ protected function installInertiaStack() // Tailwind Configuration... copy(__DIR__.'/../../stubs/inertia/tailwind.config.js', base_path('tailwind.config.js')); copy(__DIR__.'/../../stubs/inertia/webpack.mix.js', base_path('webpack.mix.js')); - copy(__DIR__.'/../../stubs/inertia/webpack.ssr.mix.js', base_path('webpack.ssr.mix.js')); // Directories... (new Filesystem)->ensureDirectoryExists(app_path('Actions/Fortify'));