feat: Add production script to package.json

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "biome.searchInPath": false,
+  "biome.lspBin": "app/node_modules/@biomejs/biome/bin/biome",
+}

app/config.ts

@@ -6,8 +6,16 @@ function getEnvironmentVariable<T = undefined>(key: string, defaultValue: T, for
   return value as T;
 }
 
-const PORT = getEnvironmentVariable<number>('PORT', 3000, (data) => parseInt(data, 10));
-const HMR_PORT = getEnvironmentVariable<number>('HMR_PORT', PORT + 1, (data) => parseInt(data, 10));
+function getEnvironmentVariableOrThrow<T = undefined>(key: string, formatter?: (data: string) => T): T {
+  const value = process.env[key];
+  
+  if (value === undefined) throw new Error(`Missing environment variable: ${key}`);
+  if (formatter) return formatter(value);
+  return value as T;
+}
+
+const PORT = getEnvironmentVariableOrThrow<number>('PORT', (data) => parseInt(data, 10));
+const HMR_PORT = getEnvironmentVariableOrThrow<number>('HMR_PORT', (data) => parseInt(data, 10));
 const BASE_URL = getEnvironmentVariable<string>('BASE_URL', `http://localhost:${PORT}`);
 const NODE_ENV = getEnvironmentVariable<string>('NODE_ENV', 'development');
 

app/fastify-entry.ts

@@ -1,16 +1,15 @@
-import { dirname } from "node:path";
 import { fileURLToPath } from "node:url";
+import { dirname } from "node:path";
 
-import { vikeHandler } from "./server/vike-handler";
-import { telefuncHandler } from "./server/telefunc-handler";
-import Fastify from "fastify";
 import { createHandler } from "@universal-middleware/fastify";
+import { telefuncHandler } from "./server/telefunc-handler";
+import { vikeHandler } from "./server/vike-handler";
+import { config } from "./config";
+import Fastify from "fastify";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 const root = __dirname;
-const port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000;
-const hmrPort = process.env.HMR_PORT ? parseInt(process.env.HMR_PORT, 10) : 24678;
 
 async function startServer() {
 	const app = Fastify();
@@ -18,9 +17,7 @@ async function startServer() {
 	// Avoid pre-parsing body, otherwise it will cause issue with universal handlers
 	// This will probably change in the future though, you can follow https://github.com/magne4000/universal-middleware for updates
 	app.removeAllContentTypeParsers();
-  app.addContentTypeParser("*", function (_request, _payload, done) {
-    done(null, "");
-  });
+	app.addContentTypeParser("*", (_request, _payload, done) => done(null, ""));
 
 	await app.register(await import("@fastify/middie"));
 
@@ -37,7 +34,7 @@ async function startServer() {
 		const viteDevMiddleware = (
 			await vite.createServer({
 				root,
-        server: { middlewareMode: true, hmr: { port: hmrPort } },
+				server: { middlewareMode: true, hmr: { port: config.HMR_PORT } },
 			})
 		).middlewares;
 		app.use(viteDevMiddleware);
@@ -57,11 +54,11 @@ async function startServer() {
 
 const app = await startServer();
 
-app.listen(
-  {
-    port: port,
-  },
-  () => {
-    console.log(`Server listening on http://localhost:${port}`);
-  },
-);
+app.listen({ port: config.PORT, host: "0.0.0.0" }, (error, address) => {
+	if (error) {
+		app.log.error(error);
+		process.exit(1);
+	}
+
+	console.log(`Server listening on ${address}`);
+});

app/layouts/LayoutDefault.tsx

@@ -1,8 +1,7 @@
-import "./style.css";
+import type { JSX } from "solid-js";
 
 import "./tailwind.css";
 
-import type { JSX } from "solid-js";
 import logoUrl from "../assets/logo.svg";
 import { Link } from "../components/Link.js";
 
@@ -23,7 +22,10 @@ export default function LayoutDefault(props: { children?: JSX.Element }) {
 
 function Sidebar(props: { children: JSX.Element }) {
 	return (
-    <div id="sidebar" class={"p-5 flex flex-col shrink-0 border-r-2 border-r-gray-200"}>
+		<div
+			id="sidebar"
+			class={"p-5 flex flex-col shrink-0 border-r-2 border-r-gray-200"}
+		>
 			{props.children}
 		</div>
 	);

app/layouts/tailwind.css

@@ -1 +1,2 @@
+@import "./style.css";
 @import "tailwindcss";

app/package.json

@@ -3,6 +3,7 @@
 		"dev": "bun ./fastify-entry.ts",
 		"build": "vike build",
 		"preview": "cross-env NODE_ENV=production bun ./fastify-entry.ts",
+		"production": "bun run build && bun run preview",
 		"lint": "biome lint --write .",
 		"format": "biome format --write ."
 	},

app/pages/+config.ts

@@ -1,5 +1,6 @@
-import vikeSolid from "vike-solid/config";
 import type { Config } from "vike/types";
+
+import vikeSolid from "vike-solid/config";
 import Layout from "../layouts/LayoutDefault.js";
 
 // Default config (can be overridden by pages)
@@ -13,5 +14,7 @@ export default {
 	title: "My Vike App",
 	description: "Demo showcasing Vike",
 
+	prerender: true,
+
 	extends: vikeSolid,
 } satisfies Config;

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
+  "$schema": "./app/node_modules/@biomejs/biome/configuration_schema.json",
   "organizeImports": {
     "enabled": true
   },

compose.yml

@@ -1,5 +1,5 @@
 services:
-  app:
+  dev:
     container_name: memento-dev
     image: oven/bun:alpine
     env_file:
@@ -11,3 +11,16 @@ services:
       - ./app:/app
     working_dir: /app
     command: bun run dev
+
+  prod:
+    container_name: memento-prod
+    image: oven/bun:alpine
+    env_file:
+      - .env
+    ports:
+      - "${PORT}:${PORT}"
+      - "${HMR_PORT}:${HMR_PORT}"
+    volumes:
+      - ./app:/app
+    working_dir: /app
+    command: bun run production