Merge pull request #16 from ozziexsh/ssr

SSR Support

.github/workflows/nightly-clone.yml

@@ -12,6 +12,8 @@ jobs:
             flags: ''
           - name: Teams Conversion
             flags: '--teams'
+          - name: SSR Conversion
+            flags: '--ssr'
     steps:
       - name: Setup PHP
         uses: shivammathur/setup-php@v2

.github/workflows/test-conversion.yml

@@ -10,6 +10,8 @@ jobs:
             flags: ''
           - name: Teams Conversion
             flags: '--teams'
+          - name: SSR Conversion
+            flags: '--ssr'
     steps:
       - uses: actions/checkout@v3
 

README.md

@@ -16,17 +16,17 @@ composer create-project laravel/laravel myapp
 cd myapp
 composer require laravel/jetstream
 php artisan jetstream:install inertia
-npx laravel-jetstream-react install
+npx laravel-jetstream-react@latest install
 ```
 
-It also supports teams
+It supports teams and/or SSR
 
 ```bash
 composer create-project laravel/laravel myapp
 cd myapp
 composer require laravel/jetstream
-php artisan jetstream:install inertia --teams
-npx laravel-jetstream-react install --teams
+php artisan jetstream:install inertia --teams --ssr
+npx laravel-jetstream-react@latest install --teams --ssr
 ```
 
 ## Components

src/commands/install.ts

@@ -11,10 +11,12 @@ export default class Install extends Command {
     '$ laravel-jetstream-react install',
     '$ laravel-jetstream-react install --teams',
     '$ laravel-jetstream-react install --force',
+    '$ laravel-jetstream-react install --ssr',
   ];
 
   static flags = {
     teams: Flags.boolean({ default: false }),
+    ssr: Flags.boolean({ default: false }),
     force: Flags.boolean({ default: false }),
   };
 
@@ -59,6 +61,7 @@ export default class Install extends Command {
     '@inertiajs/inertia-vue3',
     '@inertiajs/progress',
     '@vue/compiler-sfc',
+    '@vue/server-renderer',
     'vue',
     'vue-loader',
   ];
@@ -109,9 +112,13 @@ export default class Install extends Command {
     this.log('Running install again');
     execSync('npm install');
 
-    this.log('Replacing webpack.mix.js and webpack.config.js');
+    this.log('Replacing webpack.mix.js');
     this.moveStub('webpack.mix.js', 'webpack.mix.js');
-    this.moveStub('webpack.config.js', 'webpack.config.js');
+
+    if (flags.ssr) {
+      this.log('Replacing webpack.ssr.mix.js');
+      this.moveStub('webpack.ssr.mix.js', 'webpack.ssr.mix.js');
+    }
 
     this.log('Creating tsconfig.json');
     this.moveStub('tsconfig.json', 'tsconfig.json');
@@ -145,6 +152,10 @@ export default class Install extends Command {
       this.removeTeams();
     }
 
+    if (!flags.ssr) {
+      fs.rmSync(path.join(process.cwd(), 'resources', 'js', 'ssr.tsx'));
+    }
+
     this.log('Installation complete. Enjoy :)');
     this.exit(0);
   }

src/stubs/resources/js/Hooks/useRoute.ts

@@ -1,23 +1,12 @@
-import { RouteParamsWithQueryOverload, Router } from 'ziggy-js';
+import route from 'ziggy-js';
+import { createContext, useContext } from 'react';
 
-export default function useRoute() {
-  function routeWrapper(
-    name?: undefined,
-    params?: RouteParamsWithQueryOverload,
-    absolute?: boolean,
-  ): Router;
-  function routeWrapper(
-    name: string,
-    params?: RouteParamsWithQueryOverload,
-    absolute?: boolean,
-  ): string;
-  function routeWrapper(
-    name?: any,
-    params?: RouteParamsWithQueryOverload,
-    absolute?: boolean,
-  ): any {
-    return (window as any).route(name, params, absolute);
-  }
+export const RouteContext = createContext<typeof route | null>(null);
 
-  return routeWrapper;
+export default function useRoute(): typeof route {
+  const fn = useContext(RouteContext);
+  if (!fn) {
+    throw new Error('Route function must be provided');
+  }
+  return fn;
 }

src/stubs/resources/js/Jetstream/Modal.tsx

@@ -23,6 +23,10 @@ export default function JetModal({
     '2xl': 'sm:max-w-2xl',
   }[maxWidth];
 
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
   return ReactDOM.createPortal(
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog

src/stubs/resources/js/app.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { render } from 'react-dom';
 import { createInertiaApp } from '@inertiajs/inertia-react';
 import { InertiaProgress } from '@inertiajs/progress';
+import { RouteContext } from '@/Hooks/useRoute';
 
 const appName =
   window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
@@ -12,7 +13,12 @@ createInertiaApp({
   title: title => `${title} - ${appName}`,
   resolve: name => require(`./Pages/${name}.tsx`),
   setup({ el, App, props }) {
-    return render(<App {...props} />, el);
+    return render(
+      <RouteContext.Provider value={(window as any).route}>
+        <App {...props} />
+      </RouteContext.Provider>,
+      el,
+    );
   },
 });
 

src/stubs/resources/js/ssr.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+import { createInertiaApp } from '@inertiajs/inertia-react';
+import createServer from '@inertiajs/server';
+import { RouteContext } from '@/Hooks/useRoute';
+import route from 'ziggy-js';
+
+const appName = 'Laravel';
+
+createServer(page =>
+  createInertiaApp({
+    page,
+    render: ReactDOMServer.renderToString,
+    title: title => `${title} - ${appName}`,
+    resolve: name => require(`./Pages/${name}.tsx`),
+    setup: ({ App, props }) => {
+      const ssrRoute = (name: any, params: any, absolute: any, config: any) => {
+        return route(name, params, absolute, {
+          ...(page.props as any).ziggy,
+          location: new URL((page.props as any).ziggy.url),
+          ...config,
+        });
+      };
+      return (
+        <RouteContext.Provider value={ssrRoute as any}>
+          <App {...props} />
+        </RouteContext.Provider>
+      );
+    },
+  }),
+);

src/stubs/webpack.mix.js

@@ -19,7 +19,9 @@ mix
     require('tailwindcss'),
     require('autoprefixer'),
   ])
-  .webpackConfig(require('./webpack.config'));
+  .alias({
+    '@': 'resources/js',
+  });
 
 if (mix.inProduction()) {
   mix.version();

src/stubs/webpack.ssr.mix.js

@@ -0,0 +1,12 @@
+const mix = require('laravel-mix');
+const webpackNodeExternals = require('webpack-node-externals');
+
+mix.ts('resources/js/ssr.tsx', 'public/js')
+  .react()
+  .alias({
+    '@': 'resources/js',
+  })
+  .webpackConfig({
+    target: 'node',
+    externals: [webpackNodeExternals()],
+  });