added ssr?????

config/inertia.ts

@@ -15,6 +15,7 @@ import { InertiaConfig } from '@ioc:EidelLev/Inertia';
 export const inertia: InertiaConfig = {
   view: 'app',
   ssr: {
-    enabled: false,
+    enabled: true,
+    autoreload: process.env.NODE_ENV === 'development',
   },
 };

inertia/ssr/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "ssr": {
+      "js": [
+        "auto/ssr.js"
+      ]
+    }
+  }
+}

inertia/ssr/manifest.json

@@ -0,0 +1,3 @@
+{
+  "ssr/ssr.js": "autossr.js"
+}

package-lock.json

@@ -19,6 +19,7 @@
         "@eidellev/inertia-adonisjs": "^8.0.1",
         "@inertiajs/vue3": "^1.0.9",
         "@vue/compiler-sfc": "^3.3.4",
+        "@vue/server-renderer": "^3.3.4",
         "@vue/tsconfig": "^0.1.3",
         "luxon": "^3.3.0",
         "proxy-addr": "^2.0.7",
@@ -26,7 +27,8 @@
         "source-map-support": "^0.5.21",
         "sqlite3": "^5.1.6",
         "ts-loader": "^9.4.4",
-        "vue": "^3.3.4"
+        "vue": "^3.3.4",
+        "webpack-node-externals": "^3.0.0"
       },
       "devDependencies": {
         "@adonisjs/assembler": "^5.9.5",
@@ -16467,6 +16469,14 @@
         "lodash": "^4.17.15"
       }
     },
+    "node_modules/webpack-node-externals": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/webpack-node-externals/-/webpack-node-externals-3.0.0.tgz",
+      "integrity": "sha512-LnL6Z3GGDPht/AigwRh2dvL9PQPFQ8skEpVrWZXLWBYmqcaojHNN0onvHzie6rq7EWKrrBfPYqNEzTJgiwEQDQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/webpack-sources": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
@@ -29167,6 +29177,11 @@
         "lodash": "^4.17.15"
       }
     },
+    "webpack-node-externals": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/webpack-node-externals/-/webpack-node-externals-3.0.0.tgz",
+      "integrity": "sha512-LnL6Z3GGDPht/AigwRh2dvL9PQPFQ8skEpVrWZXLWBYmqcaojHNN0onvHzie6rq7EWKrrBfPYqNEzTJgiwEQDQ=="
+    },
     "webpack-sources": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",

package.json

@@ -77,6 +77,7 @@
     "@eidellev/inertia-adonisjs": "^8.0.1",
     "@inertiajs/vue3": "^1.0.9",
     "@vue/compiler-sfc": "^3.3.4",
+    "@vue/server-renderer": "^3.3.4",
     "@vue/tsconfig": "^0.1.3",
     "luxon": "^3.3.0",
     "proxy-addr": "^2.0.7",
@@ -84,6 +85,7 @@
     "source-map-support": "^0.5.21",
     "sqlite3": "^5.1.6",
     "ts-loader": "^9.4.4",
-    "vue": "^3.3.4"
+    "vue": "^3.3.4",
+    "webpack-node-externals": "^3.0.0"
   }
 }

resources/js/components/MainNav.vue

@@ -7,21 +7,22 @@
     />
 </template>
 
-<script setup>
+<script setup lang="ts">
+    import type { MenuOption } from 'naive-ui'
     import { Link, usePage } from '@inertiajs/vue3'
-    import { h, ref, watch } from 'vue';
+    import { h, ref } from 'vue';
-    import { NIcon, NButton } from 'naive-ui'
+    import { NIcon } from 'naive-ui'
     import {
         GroupsFilled as Users,
         EventNoteFilled as Events,
         LogOutFilled as Logout
     } from '@vicons/material'
 
-    const { request, isAdmin } = usePage().props
+    const isAdmin: boolean = (usePage().props.isAdmin as boolean)
-    const activeKey = ref(request.url)
+    const activeKey = ref<string>((usePage().props.request as any)?.url)
 
-    const menuOptions = ref([])
+    const menuOptions: MenuOption[] = []
-    menuOptions.value.push({
+    menuOptions.push({
         label: () =>
             h(
                 Link, {
@@ -34,7 +35,7 @@
             icon: renderIcon(Events)
     })
 
-    if(isAdmin) menuOptions.value.push({
+    if(isAdmin) menuOptions.push({
         label: () => 
             h(
                 Link, {
@@ -47,7 +48,7 @@
             icon: renderIcon(Users)
     })
 
-    menuOptions.value.push({
+    menuOptions.push({
         label: () =>
             h(
                 Link, {
@@ -63,7 +64,7 @@
 
     
 
-    function renderIcon(icon) {
+    function renderIcon(icon: any) {
         return () => h(NIcon, null, { default: () => h(icon) })
 
     }

resources/js/ssr.js

@@ -0,0 +1,16 @@
+import { createSSRApp, h } from 'vue';
+import { renderToString } from '@vue/server-renderer';
+import { createInertiaApp } from '@inertiajs/vue3';
+
+export default function render(page) {
+  return createInertiaApp({
+    page,
+    render: renderToString,
+    resolve: (name) => require(`./pages/${name}`),
+    setup({ app, props, plugin }) {
+      return createSSRApp({
+        render: () => h(app, props),
+      }).use(plugin);
+    },
+  });
+}

resources/views/app.edge

@@ -9,7 +9,7 @@
   @entryPointScripts('app')
 
   <title>enzos-events</title>
-  
+  @inertiaHead
 </head>
 <body>
   @inertia

start/inertia.ts

@@ -8,11 +8,11 @@
 |
 */
 
-import Inertia from '@ioc:EidelLev/Inertia'
+import Inertia from '@ioc:EidelLev/Inertia';
 
 Inertia.share({
-  //errors: ({session}) => session.flashMessages.get('errors'),
+  errors: ({ session }) => session.flashMessages.get('errors'),
   request: ({ request }) => request,
   isAdmin: ({ auth }) => auth.user?.isAdmin,
   flashMessages: ({ session }) => session.flashMessages.all(),
-}).version(() => Inertia.manifestFile('public/assets/manifest.json'))
+}).version(() => Inertia.manifestFile('public/assets/manifest.json'));

webpack.config.js

@@ -1,4 +1,4 @@
-const { join, resolve } = require('path')
+const { join } = require('path')
 const Encore = require('@symfony/webpack-encore')
 const Components = require('unplugin-vue-components/webpack')
 const { NaiveUiResolver } = require('unplugin-vue-components/resolvers')

webpack.ssr.config.js

@@ -0,0 +1,208 @@
+const { join } = require('path')
+const Encore = require('@symfony/webpack-encore')
+const Components = require('unplugin-vue-components/webpack')
+const { NaiveUiResolver } = require('unplugin-vue-components/resolvers')
+const nodeExternals = require('webpack-node-externals')
+
+/*
+|--------------------------------------------------------------------------
+| Encore runtime environment
+|--------------------------------------------------------------------------
+*/
+if (!Encore.isRuntimeEnvironmentConfigured()) {
+  Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev')
+}
+
+/*
+|--------------------------------------------------------------------------
+| Output path
+|--------------------------------------------------------------------------
+|
+| The output path for writing the compiled files. It should always
+| be inside the public directory, so that AdonisJS can serve it.
+|
+*/
+Encore.setOutputPath('./inertia/ssr')
+
+/*
+|--------------------------------------------------------------------------
+| Public URI
+|--------------------------------------------------------------------------
+|
+| The public URI to access the static files. It should always be
+| relative from the "public" directory.
+|
+*/
+Encore.setPublicPath('/ssr')
+
+/*
+|--------------------------------------------------------------------------
+| Entrypoints
+|--------------------------------------------------------------------------
+|
+| Entrypoints are script files that boots your frontend application. Ideally
+| a single entrypoint is used by majority of applications. However, feel
+| free to add more (if required).
+|
+| Also, make sure to read the docs on "Assets bundler" to learn more about
+| entrypoints.
+|
+*/
+Encore.addEntry('ssr', './resources/js/ssr.js')
+
+/*
+|--------------------------------------------------------------------------
+| Isolated entrypoints
+|--------------------------------------------------------------------------
+|
+| Treat each entry point and its dependencies as its own isolated module.
+|
+*/
+Encore.disableSingleRuntimeChunk()
+
+/*
+|--------------------------------------------------------------------------
+| Cleanup output folder
+|--------------------------------------------------------------------------
+|
+| It is always nice to cleanup the build output before creating a build. It
+| will ensure that all unused files from the previous build are removed.
+|
+*/
+Encore.cleanupOutputBeforeBuild()
+
+/*
+|--------------------------------------------------------------------------
+| Assets versioning
+|--------------------------------------------------------------------------
+|
+| Enable assets versioning to leverage lifetime browser and CDN cache
+|
+*/
+Encore.enableVersioning(Encore.isProduction())
+
+/*
+|--------------------------------------------------------------------------
+| Configure dev server
+|--------------------------------------------------------------------------
+|
+| Here we configure the dev server to enable live reloading for edge templates.
+| Remember edge templates are not processed by Webpack and hence we need
+| to watch them explicitly and livereload the browser.
+|
+*/
+Encore.configureDevServerOptions((options) => {
+  /**
+   * Normalize "options.static" property to an array
+   */
+  if (!options.static) {
+    options.static = []
+  } else if (!Array.isArray(options.static)) {
+    options.static = [options.static]
+  }
+
+  /**
+   * Enable live reload and add views directory
+   */
+  options.liveReload = true
+  options.static.push({
+    directory: join(__dirname, './resources/views'),
+    watch: true,
+  })
+})
+
+/*
+|--------------------------------------------------------------------------
+| CSS precompilers support
+|--------------------------------------------------------------------------
+|
+| Uncomment one of the following lines of code to enable support for your
+| favorite CSS precompiler
+|
+*/
+// Encore.enableSassLoader()
+// Encore.enableLessLoader()
+// Encore.enableStylusLoader()
+
+/*
+|--------------------------------------------------------------------------
+| CSS loaders
+|--------------------------------------------------------------------------
+|
+| Uncomment one of the following line of code to enable support for
+| PostCSS or CSS.
+|
+*/
+Encore.enablePostCssLoader()
+// Encore.configureCssLoader(() => {})
+
+/*
+|--------------------------------------------------------------------------
+| Enable Vue loader
+|--------------------------------------------------------------------------
+|
+| Uncomment the following lines of code to enable support for vue. Also make
+| sure to install the required dependencies.
+|
+*/
+Encore.enableVueLoader(() => {}, {
+  version: 3,
+  runtimeCompilerBuild: false,
+  useJsx: false,
+}).enableTypeScriptLoader(config => {
+  config.configFile = 'tsconfig.vue.json'
+}).addAliases({
+  '@': join(__dirname, 'resources/js')
+}).configureDefinePlugin(options => {
+  options['__VUE_OPTIONS_API__'] = true
+  options['__VUE_PROD_DEVTOOLS__'] = false
+}).addPlugin( Components({
+  resolvers: [NaiveUiResolver()]
+}))
+
+/*
+|--------------------------------------------------------------------------
+| Configure logging
+|--------------------------------------------------------------------------
+|
+| To keep the terminal clean from unnecessary info statements , we only
+| log warnings and errors. If you want all the logs, you can change
+| the level to "info".
+|
+*/
+const config = Encore.getWebpackConfig()
+config.infrastructureLogging = {
+  level: 'warn',
+}
+config.stats = 'errors-warnings'
+
+/*
+|--------------------------------------------------------------------------
+| SSR Config
+|--------------------------------------------------------------------------
+|
+*/
+//config.externals = [require('webpack-node-externals')()]
+config.externals = [
+  nodeExternals({ 
+    allowlist: ['@inertiajs/core', '@inertiajs/vue3'], 
+  }), 
+]
+config.externalsPresets = { node: true }
+config.output = {
+  libraryTarget: 'commonjs2',
+  filename: 'ssr.js',
+  path: join(__dirname, './inertia/ssr'),
+}
+config.experiments = { outputModule: true }
+
+/*
+|--------------------------------------------------------------------------
+| Export config
+|--------------------------------------------------------------------------
+|
+| Export config for webpack to do its job
+|
+*/
+
+module.exports = config