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,67 +1,64 @@
-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();
+	const app = Fastify();
 
-  // 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, "");
-  });
+	// 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("*", (_request, _payload, done) => done(null, ""));
 
-  await app.register(await import("@fastify/middie"));
+	await app.register(await import("@fastify/middie"));
 
-  if (process.env.NODE_ENV === "production") {
-    await app.register(await import("@fastify/static"), {
-      root: `${root}/dist/client`,
-      wildcard: false,
-    });
-  } else {
-    // Instantiate Vite's development server and integrate its middleware to our server.
-    // ⚠️ We should instantiate it *only* in development. (It isn't needed in production
-    // and would unnecessarily bloat our server in production.)
-    const vite = await import("vite");
-    const viteDevMiddleware = (
-      await vite.createServer({
-        root,
-        server: { middlewareMode: true, hmr: { port: hmrPort } },
-      })
-    ).middlewares;
-    app.use(viteDevMiddleware);
-  }
+	if (process.env.NODE_ENV === "production") {
+		await app.register(await import("@fastify/static"), {
+			root: `${root}/dist/client`,
+			wildcard: false,
+		});
+	} else {
+		// Instantiate Vite's development server and integrate its middleware to our server.
+		// ⚠️ We should instantiate it *only* in development. (It isn't needed in production
+		// and would unnecessarily bloat our server in production.)
+		const vite = await import("vite");
+		const viteDevMiddleware = (
+			await vite.createServer({
+				root,
+				server: { middlewareMode: true, hmr: { port: config.HMR_PORT } },
+			})
+		).middlewares;
+		app.use(viteDevMiddleware);
+	}
 
-  app.post<{ Body: string }>("/_telefunc", createHandler(telefuncHandler)());
+	app.post<{ Body: string }>("/_telefunc", createHandler(telefuncHandler)());
 
-  /**
-   * Vike route
-   *
-   * @link {@see https://vike.dev}
-   **/
-  app.all("/*", createHandler(vikeHandler)());
+	/**
+	 * Vike route
+	 *
+	 * @link {@see https://vike.dev}
+	 **/
+	app.all("/*", createHandler(vikeHandler)());
 
-  return app;
+	return app;
 }
 
 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,50 +1,52 @@
-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";
 
 export default function LayoutDefault(props: { children?: JSX.Element }) {
-  return (
-    <div class={"flex max-w-5xl m-auto"}>
-      <Sidebar>
-        <Logo />
-        <Link href="/">Welcome</Link>
-        <Link href="/todo">Todo</Link>
-        <Link href="/star-wars">Data Fetching</Link>
-        {""}
-      </Sidebar>
-      <Content>{props.children}</Content>
-    </div>
-  );
+	return (
+		<div class={"flex max-w-5xl m-auto"}>
+			<Sidebar>
+				<Logo />
+				<Link href="/">Welcome</Link>
+				<Link href="/todo">Todo</Link>
+				<Link href="/star-wars">Data Fetching</Link>
+				{""}
+			</Sidebar>
+			<Content>{props.children}</Content>
+		</div>
+	);
 }
 
 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"}>
-      {props.children}
-    </div>
-  );
+	return (
+		<div
+			id="sidebar"
+			class={"p-5 flex flex-col shrink-0 border-r-2 border-r-gray-200"}
+		>
+			{props.children}
+		</div>
+	);
 }
 
 function Content(props: { children: JSX.Element }) {
-  return (
-    <div id="page-container">
-      <div id="page-content" class={"p-5 pb-12 min-h-screen"}>
-        {props.children}
-      </div>
-    </div>
-  );
+	return (
+		<div id="page-container">
+			<div id="page-content" class={"p-5 pb-12 min-h-screen"}>
+				{props.children}
+			</div>
+		</div>
+	);
 }
 
 function Logo() {
-  return (
-    <div class={"p-5 mb-2"}>
-      <a href="/">
-        <img src={logoUrl} height={64} width={64} alt="logo" />
-      </a>
-    </div>
-  );
+	return (
+		<div class={"p-5 mb-2"}>
+			<a href="/">
+				<img src={logoUrl} height={64} width={64} alt="logo" />
+			</a>
+		</div>
+	);
 }

app/layouts/tailwind.css

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

app/package.json

@@ -1,38 +1,39 @@
 {
-  "scripts": {
-    "dev": "bun ./fastify-entry.ts",
-    "build": "vike build",
-    "preview": "cross-env NODE_ENV=production bun ./fastify-entry.ts",
-    "lint": "biome lint --write .",
-    "format": "biome format --write ."
-  },
-  "dependencies": {
-    "vike": "^0.4.228",
-    "@fastify/middie": "^9.0.3",
-    "@fastify/static": "^8.1.1",
-    "@universal-middleware/fastify": "^0.5.16",
-    "fastify": "^5.3.0",
-    "@universal-middleware/core": "^0.4.7",
-    "solid-js": "^1.9.5",
-    "vike-solid": "^0.7.9",
-    "telefunc": "^0.2.3"
-  },
-  "devDependencies": {
-    "@biomejs/biome": "1.9.4",
-    "@eslint/js": "^9.24.0",
-    "@tailwindcss/vite": "^4.1.3",
-    "@types/node": "^18.19.86",
-    "cross-env": "^7.0.3",
-    "eslint": "^9.24.0",
-    "eslint-config-prettier": "^10.1.2",
-    "eslint-plugin-prettier": "^5.2.6",
-    "eslint-plugin-solid": "^0.14.5",
-    "globals": "^16.0.0",
-    "prettier": "^3.5.3",
-    "tailwindcss": "^4.1.3",
-    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.29.1",
-    "vite": "^6.2.6"
-  },
-  "type": "module"
-}
+	"scripts": {
+		"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 ."
+	},
+	"dependencies": {
+		"vike": "^0.4.228",
+		"@fastify/middie": "^9.0.3",
+		"@fastify/static": "^8.1.1",
+		"@universal-middleware/fastify": "^0.5.16",
+		"fastify": "^5.3.0",
+		"@universal-middleware/core": "^0.4.7",
+		"solid-js": "^1.9.5",
+		"vike-solid": "^0.7.9",
+		"telefunc": "^0.2.3"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "1.9.4",
+		"@eslint/js": "^9.24.0",
+		"@tailwindcss/vite": "^4.1.3",
+		"@types/node": "^18.19.86",
+		"cross-env": "^7.0.3",
+		"eslint": "^9.24.0",
+		"eslint-config-prettier": "^10.1.2",
+		"eslint-plugin-prettier": "^5.2.6",
+		"eslint-plugin-solid": "^0.14.5",
+		"globals": "^16.0.0",
+		"prettier": "^3.5.3",
+		"tailwindcss": "^4.1.3",
+		"typescript": "^5.8.3",
+		"typescript-eslint": "^8.29.1",
+		"vite": "^6.2.6"
+	},
+	"type": "module"
+}

app/pages/+config.ts

@@ -1,17 +1,20 @@
-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)
 // https://vike.dev/config
 
 export default {
-  // https://vike.dev/Layout
-  Layout,
+	// https://vike.dev/Layout
+	Layout,
 
-  // https://vike.dev/head-tags
-  title: "My Vike App",
-  description: "Demo showcasing Vike",
+	// https://vike.dev/head-tags
+	title: "My Vike App",
+	description: "Demo showcasing Vike",
 
-  extends: vikeSolid,
+	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