Laravel Inertia SSR with vite

@Sinnbeck Yes this is what I need to change:

https://inertiajs.com/server-side-rendering#setting-up-mix

@0mar That does not seem to be nessesarry. Just put the path to the file in vite config, and run it like described in the link I provided

@Sinnbeck

I gotnthis when I run the commande : node bootstrap/ssr/ssr.mjs

node bootstrap/ssr/ssr.mjs

file:///Users/Code/entreprise/bootstrap/ssr/ssr.mjs:5

createServer((page) => createInertiaApp({ ^

TypeError: createServer is not a function

at file:///Users/Code/entreprise/bootstrap/ssr/ssr.mjs:5:1

at ModuleJob.run (node:internal/modules/esm/module_job:198:25)

at async Promise.all (index 0)

at async ESMLoader.import (node:internal/modules/esm/loader:385:24)

at async loadESM (node:internal/process/esm_loader:88:5)

at async handleMainPromise (node:internal/modules/run_main:61:12)

@0mar Can you show your ssr.js file?

@Sinnbeck

import { createSSRApp, h } from "vue";

import { renderToString } from "@vue/server-renderer";

import { createInertiaApp } from "@inertiajs/inertia-vue3";

import createServer from "@inertiajs/server";

createServer((page) => createInertiaApp({

page,render: renderToString, resolve: (name) => require(./Pages/${name}),

setup({ app, props, plugin }) {

return createSSRApp({

  render: () => h(app, props)

}).use(plugin);

}

}));

@0mar Please format your code by adding ``` on the line before and after it

@Sinnbeck

import { createSSRApp, h } from "vue";
import { renderToString } from "@vue/server-renderer";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import createServer from "@inertiajs/server";
createServer((page) => createInertiaApp({
  page,
  render: renderToString,
  resolve: (name) => require(`./Pages/${name}`),
  setup({ app, props, plugin }) {
    return createSSRApp({
      render: () => h(app, props)
    }).use(plugin);
  }
}));

@0mar Hmm looks correct. Your vite config?

@Sinnbeck

import fs from 'fs';
import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import {homedir} from 'os'
import {resolve} from 'path'

let host = 'project.laravel.test'

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            ssr: 'resources/js/ssr.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    server: detectServerConfig(host),
});

function detectServerConfig(host) {
    let keyPath = resolve(homedir(), `.config/valet/Certificates/${host}.key`)
    let certificatePath = resolve(homedir(), `.config/valet/Certificates/${host}.crt`)

    if (!fs.existsSync(keyPath)) {
        return {}
    }

    if (!fs.existsSync(certificatePath)) {
        return {}
    }

    return {
        hmr: {host},
        host,
        https: {
            key: fs.readFileSync(keyPath),
            cert: fs.readFileSync(certificatePath),
        },
    }
}

@0mar Actually try and change this in the ssr.js

import { createSSRApp, h } from "vue";
import { renderToString } from "@vue/server-renderer";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import createServer from "@inertiajs/server";
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

createServer((page) => createInertiaApp({
  page,
  render: renderToString,
  resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
  setup({ app, props, plugin }) {
    return createSSRApp({
      render: () => h(app, props)
    }).use(plugin);
  }
}));

Found a thread with a working config for vite : https://laracasts.com/discuss/channels/inertia/inertia-ssr-with-vite-and-ziggy-vue

@0mar ah ok exelent. Good to hear :)