Lovable + Vike - Server-Side Rendering

npm install vike vike-react express compression serve-static
npm install -D @types/express

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import vike from 'vike/plugin';
import path from 'path';
export default defineConfig({
 plugins: [react(), vike()],
 resolve: {
 alias: {
 '@': path.resolve(__dirname, './src'),
 },
 },
 server: {
 host: true,
 },
});

import vikeReact from 'vike-react/config';
import type { Config } from 'vike/types';
export default {
 extends: vikeReact,
} satisfies Config;

// Catch-all route - matches any URL path
// Delegates routing to React Router instead of Vike filesystem routing
export default '/*';

import RouterApp from '../../lib/RouterApp';
export default function Page() {
 return <RouterApp />;
}

import React from 'react';
import { BrowserRouter, StaticRouter } from 'react-router-dom';
import { usePageContext } from 'vike-react/usePageContext';
function RouterWrapper({ children }: { children: React.ReactNode }) {
 const pageContext = usePageContext();
 const isServer = typeof window === 'undefined';
 if (isServer) {
 // SSR: StaticRouter doesn't use browser APIs
 return (
 <StaticRouter location={pageContext.urlPathname}>
 {children}
 </StaticRouter>
 );
 }
 // Client: BrowserRouter for SPA navigation
 return <BrowserRouter>{children}</BrowserRouter>;
}
export default function Layout({ children }: { children: React.ReactNode }) {
 return (
 <React.StrictMode>
 <RouterWrapper>
 {children}
 </RouterWrapper>
 </React.StrictMode>
 );
}

import { Routes, Route } from 'react-router-dom';
// Import your existing page components
import Index from '../src/pages/Index';
import Admin from '../src/pages/Admin';
import AdminLogin from '../src/pages/AdminLogin';
import Dashboard from '../src/pages/Dashboard';
import Settings from '../src/pages/Settings';
import NotFound from '../src/pages/NotFound';
export default function RouterApp() {
 return (
 <Routes>
 <Route path="/" element={<Index />} />
 <Route path="/admin" element={<Admin />} />
 <Route path="/admin/login" element={<AdminLogin />} />
 <Route path="/dashboard" element={<Dashboard />} />
 <Route path="/settings" element={<Settings />} />
 {/* Keep catch-all route last */}
 <Route path="*" element={<NotFound />} />
 </Routes>
 );
}

That's it! Your existing useNavigate(), useParams(), useLocation(), <Link>, and protected route logic all work unchanged.

import express from 'express';
import compression from 'compression';
import { renderPage } from 'vike/server';
import { createServer as createViteServer } from 'vite';
const isProduction = process.env.NODE_ENV === 'production';
const port = process.env.PORT || 3000;
async function startServer() {
 const app = express();
 app.use(compression());
 if (isProduction) {
 // Serve built assets
 app.use(express.static('dist/client'));
 } else {
 // Dev: use Vite middleware
 const vite = await createViteServer({
 server: { middlewareMode: true },
 });
 app.use(vite.middlewares);
 }
 // SSR handler
 app.get('*', async (req, res, next) => {
 const pageContextInit = { urlOriginal: req.originalUrl };
 const pageContext = await renderPage(pageContextInit);
 
 if (pageContext.httpResponse) {
 const { body, statusCode, headers } = pageContext.httpResponse;
 headers.forEach(([name, value]) => res.setHeader(name, value));
 res.status(statusCode).send(body);
 } else {
 next();
 }
 });
 app.listen(port, () => {
 console.log(`Server running at http://localhost:${port}`);
 });
}
startServer();

{
 "type": "module",
 "scripts": {
 "dev": "node server.js",
 "build": "vite build",
 "start": "NODE_ENV=production node server.js"
 }
}

module.exports = {
 apps: [{
 name: 'lovable-ssr',
 script: 'server.js',
 instances: 'max',
 exec_mode: 'cluster',
 env_production: {
 NODE_ENV: 'production',
 PORT: 3000,
 },
 max_memory_restart: '500M',
 error_file: './logs/err.log',
 out_file: './logs/out.log',
 }]
};