Problem with Inertia SSR + Vuejs + Laravel Forge Deployment
Hi guys! This is my first message and I come to you looking for some light.
I recently started a project with laravel inertia and vuejs. The product is a marketplace or directory where the search engine part has indexed pages and then a profile part to configure and modify all the information shown in the marketplace. This service also has a subscription using Laravel SPARK (which I have problems to validate the account with Paddle, but that's another book I don't want to open yet haha).
The problem comes when I deployed the application using forge and configuring it according to the Inertia guide, it is not completely SSR, I don't know why, but it doesn't look like it looks for example in the same example web. In fact, the Chrome dev tools recognizes the vuejs components... I must be doing something wrong.
The ssr looks like: ssr.js
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(`./features/${name}`),
setup({ app, props, plugin }) {
return createSSRApp({
render: () => h(app, props),
}).use(plugin)
},
}))
app.js
require('./bootstrap');
import { createApp, h } from 'vue'
import { InertiaProgress } from '@inertiajs/progress'
import { createInertiaApp, Link } from '@inertiajs/inertia-vue3'
import { createI18n } from "vue-i18n"
import { i18Config } from '@/plugins/i18n'
import emitter from '@/plugins/emitter'
import 'flowbite';
import VCalendar from 'v-calendar';
import VueMixpanel from 'vue-mixpanel'
import { vfmPlugin } from 'vue-final-modal'
import Toaster from "@meforma/vue-toaster";
const toastConfig = {
position: "top-right",
duration: 1955,
}
createInertiaApp({
resolve: name => require(`./features/${name}`),
title: title => title ? `${title}',
setup({ el, App, props, plugin }) {
const i18n = createI18n(i18Config);
createApp({ render: () => h(App, props) })
.mixin({ methods: { route: window.route } })
.use(plugin)
.use(i18n)
.use(emitter)
.use(Toaster, toastConfig)
.use(VueMixpanel, {
token: 'xx',
config: {
debug: true
}
})
.use(VCalendar, {})
.use(vfmPlugin)
.component('Link', Link)
.mount(el)
},
})
webpack.ssr.min.js
const path = require('path')
const mix = require('laravel-mix')
const cssImport = require('postcss-import')
const cssNesting = require('postcss-nesting')
const webpackNodeExternals = require('webpack-node-externals')
const webpackConfig = require('./webpack.config')
mix
.options({ manifest: false })
.js('resources/js/ssr.js', 'public/js')
.vue({ version: 3, options: { optimizeSSR: true } })
.webpackConfig(webpackConfig)
.postCss('resources/css/app.css', 'public/css', [
cssImport(),
cssNesting(),
require('tailwindcss'),
])
.webpackConfig({
target: 'node',
externals: [webpackNodeExternals()],
})
Regarding the daemon (mencioned in the documentation), event i think is good configured, it doesnt work, but i dont now it this is the problem at all.
Another thing that is failing is the command:
mix --production && mix --production --mix-config=webpack.ssr.mix.js
it Is returing a time out issue
Any of you have been working with inertia + vuejs + laravel forge in a ssr mode?
Thanks a lot
Please or to participate in this conversation.