build: activate Inertia SSR (#7650)

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "sonarlint.connectedMode.project": {
+    "connectionId": "monicahq",
+    "projectKey": "monica"
+  }
+}

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vite build && vite build --ssr",
     "preview": "vite preview",
     "lint": "eslint *.js resources",
     "format": "prettier --write '**/*.{js,vue,css,scss,json,yml,md}'",
@@ -22,6 +22,7 @@
     "@tailwindcss/vite": "^4.0.11",
     "@vitejs/plugin-basic-ssl": "^1.2.0",
     "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/server-renderer": "^3.5.13",
     "ant-design-vue": "^4.2.6",
     "axios": "^1.8.1",
     "charts.css": "^1.1.0",

resources/js/app.js

@@ -1,7 +1,7 @@
 import './bootstrap';
 import '../css/app.css';
 
-import { createApp, h } from 'vue';
+import { createSSRApp, h } from 'vue';
 import { createInertiaApp } from '@inertiajs/vue3';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 import { ZiggyVue } from 'ziggy-js';
@@ -18,7 +18,7 @@ createInertiaApp({
     color: '#4B5563',
   },
   setup({ el, App, props, plugin }) {
-    return createApp({
+    return createSSRApp({
       mounted() {
         this.$nextTick().then(() => {
           sentry.setContext(this);

resources/js/ssr.js

@@ -0,0 +1,36 @@
+import { createSSRApp, h } from 'vue';
+import { createInertiaApp } from '@inertiajs/vue3';
+import { renderToString } from '@vue/server-renderer';
+import createServer from '@inertiajs/vue3/server';
+import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
+import { ZiggyVue } from 'ziggy-js';
+import { sentry } from './sentry';
+
+createServer((page) =>
+  createInertiaApp({
+    page,
+    render: renderToString,
+    title: (title) => `${title} - ${page.props.appName}`,
+    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
+    setup({ App, props, plugin }) {
+      return createSSRApp({
+        render: () => h(App, props),
+        mounted() {
+          this.$nextTick(() => {
+            sentry.setContext(this);
+          });
+        },
+      })
+        .use(plugin)
+        .use(ZiggyVue, {
+          ...page.props.ziggy,
+          location: new URL(page.props.ziggy.location),
+        })
+        .use(i18nVue, {
+          resolve: (lang) => resolvePageComponent(`../../lang/${lang}.json`, import.meta.glob('../../lang/*.json')),
+        })
+        .use(sentry, page.props.sentry)
+        .mixin({ methods: { route: window.route, ...methods } });
+    },
+  }),
+);

scripts/ci/package.sh

@@ -84,7 +84,9 @@ echo "package=$package.tar.bz2" >> $GITHUB_OUTPUT
 # ASSETS
 assets=monica-assets-$version
 mkdir -p $assets/public
+mkdir -p $assets/bootstrap
 ln -s $ROOT/public/build $assets/public/
+ln -s $ROOT/bootstrap/ssr $assets/bootstrap/
 
 tar chfj $assets.tar.bz2 --exclude .gitignore --exclude .gitkeep $assets
 sha512sum "$assets.tar.bz2" > "$assets.tar.bz2.sha512"

vite.config.js

@@ -13,6 +13,7 @@ export default defineConfig(({ mode }) => {
     plugins: [
       laravel({
         input: 'resources/js/app.js',
+        ssr: 'resources/js/ssr.js',
         refresh: true,
       }),
       vue({

yarn.lock

@@ -1256,7 +1256,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/server-renderer@npm:3.5.13":
+"@vue/server-renderer@npm:3.5.13, @vue/server-renderer@npm:^3.5.13":
   version: 3.5.13
   resolution: "@vue/server-renderer@npm:3.5.13"
   dependencies:
@@ -3715,6 +3715,7 @@ __metadata:
     "@tailwindcss/vite": "npm:^4.0.11"
     "@vitejs/plugin-basic-ssl": "npm:^1.2.0"
     "@vitejs/plugin-vue": "npm:^5.2.1"
+    "@vue/server-renderer": "npm:^3.5.13"
     ant-design-vue: "npm:^4.2.6"
     axios: "npm:^1.8.1"
     charts.css: "npm:^1.1.0"