dev base (kinda stable)

2026-04-01 20:28:11 +00:00 · 2026-01-30 12:41:14 +01:00
parent 86f3d5c290
commit 20678ba420
10 changed files with 755 additions and 564 deletions
--- a/client/entry-client-admin.jsx
+++ b/client/entry-client-admin.jsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { hydrateRoot } from 'react-dom/client';
+import Admin from './admin.jsx';
+
+import './admin/admin.less'
+
+window.start_app = (props) => {
+  hydrateRoot(
+    document.getElementById('reactRoot'),
+    <Admin {...props} />
+  )
+}
--- a/client/entry-client-homebrew.jsx
+++ b/client/entry-client-homebrew.jsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { hydrateRoot } from 'react-dom/client'
+import Homebrew from './homebrew/homebrew.jsx'
+
+// CSS MUST be imported here
+import './homebrew/homebrew.less' // or wherever your CSS lives
+
+window.start_app = (props) => {
+  hydrateRoot(
+    document.getElementById('reactRoot'),
+    <Homebrew {...props} />
+  )
+}
--- a/client/entry-server-admin.jsx
+++ b/client/entry-server-admin.jsx
@@ -1,4 +1,4 @@
 import { renderToString } from 'react-dom/server';
-import Admin from './admin.jsx';
+import Admin from './admin/admin.jsx';

 export default (props) => renderToString(<Admin {...props} />);
--- a/client/template.js
+++ b/client/template.js
@@ -1,33 +1,66 @@
-const template = async function(name, title='', props = {}){
+import fs from "fs";
+
+const isProd = process.env.NODE_ENV === "production";
+
+const template = async function ({ vite, url }, name, title = "", props = {}) {
 	const ogTags = [];
 	const ogMeta = props.ogMeta ?? {};
-	Object.entries(ogMeta).forEach(([key, value])=>{
-		if(!value) return;
-		const tag = `<meta property="og:${key}" content="${value}">`;
-		ogTags.push(tag);
-	});
-	const ogMetaTags = ogTags.join('\n');

+	Object.entries(ogMeta).forEach(([key, value]) => {
+		if (!value) return;
+		ogTags.push(`<meta property="og:${key}" content="${value}">`);
+	});
+
+	const ogMetaTags = ogTags.join("\n");
+
+	// ----------------
+	// PROD
+	// ----------------
+	if (isProd) {
 		const ssrModule = await import(`../build/entry-server-${name}/bundle.js`);

 		return `<!DOCTYPE html>
-	<html>
+<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, height=device-height, interactive-widget=resizes-visual" />
    <link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
-			<link href=${`/${name}/bundle.css`} type="text/css" rel='stylesheet' />
+    <link href="/${name}/bundle.css" rel="stylesheet" />
    <link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
    ${ogMetaTags}
    <meta name="twitter:card" content="summary">
-			<title>${title.length ? `${title} - The Homebrewery`: 'The Homebrewery - NaturalCrit'}</title>
+    <title>${title.length ? `${title} - The Homebrewery` : "The Homebrewery - NaturalCrit"}</title>
  </head>
  <body>
    <main id="reactRoot">${ssrModule.default(props)}</main>
-			<script src=${`/${name}/bundle.js`}></script>
+    <script src="/${name}/bundle.js"></script>
    <script>start_app(${JSON.stringify(props)})</script>
  </body>
-	</html>
-	`;
+</html>`;
+	}
+
+	// ----------------
+	// DEV
+	// ----------------
+	const { default: render } = await vite.ssrLoadModule(`/client/entry-server-${name}.jsx`);
+
+	let html = `<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1, height=device-height, interactive-widget=resizes-visual" />
+    ${ogMetaTags}
+    <title>${title.length ? `${title} - The Homebrewery` : "The Homebrewery - NaturalCrit"}</title>
+  </head>
+  <body>
+  <main id="reactRoot">${render(props)}</main>
+
+  <script type="module" src="/@vite/client"></script>
+  <script type="module" src="/client/entry-client-${name}.jsx"></script>
+
+</body>
+
+</html>`;
+
+	return vite.transformIndexHtml(url, html);
 };

 export default template;
--- a/package-lock.json
+++ b/package-lock.json
@@ -5268,9 +5268,9 @@
      }
    },
    "node_modules/ci-info": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.1.tgz",
-      "integrity": "sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
+      "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==",
      "dev": true,
      "funding": [
        {
--- a/package.json
+++ b/package.json
@@ -12,11 +12,13 @@
    "url": "git://github.com/naturalcrit/homebrewery.git"
  },
  "scripts": {
-    "viteDev": "node scripts/dev.js",
+    "viteDev1": "node scripts/dev.js",
+    "viteDev2": "vite dev",
    "viteDevAdmin": "vite --config vite.config.js --ssr client/admin/admin.jsx",
-    "viteBuild": "vite build",
+    "viteBuild": "vite build && node scripts/compileAssets.js",
    "viteStart": "vite preview --outDir build",
 		"start": "node server.js",
+    "compileAssets": "node scripts/compileAssets.js --dev",
    "dev": "node --experimental-require-module scripts/dev.js",
    "quick": "node --experimental-require-module scripts/quick.js",
    "build": "node --experimental-require-module scripts/buildHomebrew.js && node --experimental-require-module scripts/buildAdmin.js",
--- a/scripts/compileAssets.js
+++ b/scripts/compileAssets.js
@@ -0,0 +1,90 @@
+import fs from "fs-extra";
+import less from "less";
+const isDev = !!process.argv.find((arg) => arg === "--dev");
+
+const compileAssets = async () => {
+	await fs.copy("./client/homebrew/favicon.ico", "./build/assets/favicon.ico");
+
+	//v==----------------------------- COMPILE THEMES --------------------------------==v//
+
+	// Update list of all Theme files
+	const themes = { Legacy: {}, V3: {} };
+
+	let themeFiles = fs.readdirSync("./themes/Legacy");
+	for (const dir of themeFiles) {
+		const themeData = JSON.parse(fs.readFileSync(`./themes/Legacy/${dir}/settings.json`).toString());
+		themeData.path = dir;
+		themes.Legacy[dir] = themeData;
+		//fs.copy(`./themes/Legacy/${dir}/dropdownTexture.png`, `./build/themes/Legacy/${dir}/dropdownTexture.png`);
+		const src = `./themes/Legacy/${dir}/style.less`;
+		((outputDirectory) => {
+			less.render(
+				fs.readFileSync(src).toString(),
+				{
+					compress: !isDev,
+				},
+				function (e, output) {
+					fs.outputFile(outputDirectory, output.css);
+				},
+			);
+		})(`./build/themes/Legacy/${dir}/style.css`);
+	}
+
+	themeFiles = fs.readdirSync("./themes/V3");
+	for (const dir of themeFiles) {
+		const themeData = JSON.parse(fs.readFileSync(`./themes/V3/${dir}/settings.json`).toString());
+		themeData.path = dir;
+		themes.V3[dir] = themeData;
+		fs.copy(`./themes/V3/${dir}/dropdownTexture.png`, `./build/themes/V3/${dir}/dropdownTexture.png`);
+		fs.copy(`./themes/V3/${dir}/dropdownPreview.png`, `./build/themes/V3/${dir}/dropdownPreview.png`);
+		const src = `./themes/V3/${dir}/style.less`;
+		((outputDirectory) => {
+			less.render(
+				fs.readFileSync(src).toString(),
+				{
+					compress: !isDev,
+				},
+				function (e, output) {
+					fs.outputFile(outputDirectory, output.css);
+				},
+			);
+		})(`./build/themes/V3/${dir}/style.css`);
+	}
+
+	await fs.outputFile("./themes/themes.json", JSON.stringify(themes, null, 2));
+
+	// await less.render(lessCode, {
+	// 	compress  : !dev,
+	// 	sourceMap : (dev ? {
+	// 		sourceMapFileInline: true,
+	// 		outputSourceFiles: true
+	// 	} : false),
+	// })
+
+	// Move assets
+	await fs.copy("./themes/fonts", "./build/fonts");
+	await fs.copy("./themes/assets", "./build/assets");
+	await fs.copy("./client/icons", "./build/icons");
+
+	//v==---------------------------MOVE CM EDITOR THEMES -----------------------------==v//
+
+	const editorThemesBuildDir = "./build/homebrew/cm-themes";
+	await fs.copy("./node_modules/codemirror/theme", editorThemesBuildDir);
+	await fs.copy("./themes/codeMirror/customThemes", editorThemesBuildDir);
+	const editorThemeFiles = fs.readdirSync(editorThemesBuildDir);
+
+	const editorThemeFile = "./themes/codeMirror/editorThemes.json";
+	if (fs.existsSync(editorThemeFile)) fs.rmSync(editorThemeFile);
+	const stream = fs.createWriteStream(editorThemeFile, { flags: "a" });
+	stream.write('[\n"default"');
+
+	for (const themeFile of editorThemeFiles) {
+		stream.write(`,\n"${themeFile.slice(0, -4)}"`);
+	}
+	stream.write("\n]\n");
+	stream.end();
+
+	await fs.copy("./themes/codeMirror", "./build/homebrew/codeMirror");
+};
+
+compileAssets();
--- a/server.js
+++ b/server.js
@@ -1,20 +1,47 @@
-import DB     from './server/db.js';
-import server from './server/app.js';
-import config from './server/config.js';
+import DB from "./server/db.js";
+import createApp from "./server/app.js";
+import config from "./server/config.js";
+import { createServer as createViteServer } from "vite";

-DB.connect(config).then(()=>{
-	// Ensure that we have successfully connected to the database
-	// before launching server
-	const PORT = process.env.PORT || config.get('web_port') || 8000;
-	server.listen(PORT, ()=>{
-		const reset = '\x1b[0m'; // Reset to default style
-		const bright = '\x1b[1m'; // Bright (bold) style
-		const cyan = '\x1b[36m'; // Cyan color
-		const underline = '\x1b[4m'; // Underlined style
+const isProd = process.env.NODE_ENV === "production";
+
+async function start() {
+	let vite;
+
+	//==== Create Vite dev server only in development ====//
+	if (!isProd) {
+		vite = await createViteServer({
+			server: { middlewareMode: true },
+			appType: "custom",
+			logLevel: 'error',
+		});
+		
+	}
+
+	//==== Connect to the database ====//
+	await DB.connect(config).catch((err) => {
+		console.error("Database connection failed:", err);
+		process.exit(1);
+	});
+
+	//==== Create the Express app ====//
+	const app = await createApp(vite);
+
+	//==== Start listening ====//
+	const PORT = process.env.PORT || config.get("web_port") || 8000;
+	app.listen(PORT, () => {
+		const reset = "\x1b[0m"; // Reset to default style
+		const bright = "\x1b[1m"; // Bright (bold) style
+		const cyan = "\x1b[36m"; // Cyan color
+		const underline = "\x1b[4m"; // Underlined style

 		console.log(`\n\tserver started at: ${new Date().toLocaleString()}`);
 		console.log(`\tserver on port: ${PORT}`);
-		console.log(`\t${bright + cyan}Open in browser: ${reset}${underline + bright + cyan}http://localhost:${PORT}${reset}\n\n`);
-
+		console.log(
+			`\t${bright + cyan}Open in browser: ${reset}${underline + bright + cyan}http://localhost:${PORT}${reset}\n\n`,
+		);
 	});
-});
+}
+
+//==== Start the server ====//
+start();
--- a/server/app.js
+++ b/server/app.js
@@ -14,7 +14,6 @@ import express from 'express';
 import config  from './config.js';
 import fs      from 'fs-extra';

-const app = express();

 import api from './homebrew.api.js';
 const { homebrewApi, getBrew, getUsersBrewThemes, getCSS } = api;
@@ -24,7 +23,7 @@ import GoogleActions               from './googleActions.js';
 import serveCompressedStaticAssets from './static-assets.mv.js';
 import sanitizeFilename            from 'sanitize-filename';
 import asyncHandler                from 'express-async-handler';
-import templateFn                  from '../client/template.js';
+import template                  from '../client/template.js';
 import { model as HomebrewModel }   from './homebrew.model.js';

 import { DEFAULT_BREW }              from './brewDefaults.js';
@@ -37,30 +36,37 @@ import cookieParser       from 'cookie-parser';
 import forceSSL           from './forcessl.mw.js';
 import dbCheck            from './middleware/dbCheck.js';

+import cors from 'cors';

-const sanitizeBrew = (brew, accessType)=>{
+export default async function createApp(vite) {
+	const app = express();
+
+	const nodeEnv = config.get('node_env');
+	const isProd = nodeEnv === 'production';
+	const isLocalEnvironment = config.get('local_environments').includes(nodeEnv);
+
+
+	const sanitizeBrew = (brew, accessType)=>{
 		brew._id = undefined;
 		brew.__v = undefined;
 		if(accessType !== 'edit' && accessType !== 'shareAuthor') {
 			brew.editId = undefined;
 		}
 		return brew;
-};
+	};

-app.set('trust proxy', 1 /* number of proxies between user and server */);
+	app.set('trust proxy', 1 /* number of proxies between user and server */);

-app.use('/', serveCompressedStaticAssets(`build`));
-app.use(contentNegotiation);
-app.use(bodyParser.json({ limit: '25mb' }));
-app.use(cookieParser());
-app.use(forceSSL);
+	app.use(vite.middlewares);

-import cors from 'cors';
+	app.use('/', serveCompressedStaticAssets('build'));
+	app.use(contentNegotiation);
+	app.use(bodyParser.json({ limit: '25mb' }));
+	app.use(cookieParser());
+	app.use(forceSSL);

-const nodeEnv = config.get('node_env');
-const isLocalEnvironment = config.get('local_environments').includes(nodeEnv);

-const corsOptions = {
+	const corsOptions = {
 		origin : (origin, callback)=>{

 			const allowedOrigins = [
@@ -83,12 +89,12 @@ const corsOptions = {
 		},
 		methods     : ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
 		credentials : true,
-};
+	};

-app.use(cors(corsOptions));
+	app.use(cors(corsOptions));

-//Account Middleware
-app.use((req, res, next)=>{
+	//Account Middleware
+	app.use((req, res, next)=>{
 		if(req.cookies && req.cookies.nc_session){
 			try {
 				req.account = jwt.decode(req.cookies.nc_session, config.get('secret'));
@@ -104,35 +110,35 @@ app.use((req, res, next)=>{
 			google_client_secret : config.get('google_client_secret')
 		};
 		return next();
-});
+	});

-app.use(homebrewApi);
-app.use(adminApi);
-app.use(vaultApi);
+	app.use(homebrewApi);
+	app.use(adminApi);
+	app.use(vaultApi);

-const welcomeText       = fs.readFileSync('./client/homebrew/pages/homePage/welcome_msg.md', 'utf8');
-const welcomeTextLegacy = fs.readFileSync('./client/homebrew/pages/homePage/welcome_msg_legacy.md', 'utf8');
-const migrateText       = fs.readFileSync('./client/homebrew/pages/homePage/migrate.md', 'utf8');
-const changelogText     = fs.readFileSync('changelog.md', 'utf8');
-const faqText           = fs.readFileSync('faq.md', 'utf8');
+	const welcomeText       = fs.readFileSync('./client/homebrew/pages/homePage/welcome_msg.md', 'utf8');
+	const welcomeTextLegacy = fs.readFileSync('./client/homebrew/pages/homePage/welcome_msg_legacy.md', 'utf8');
+	const migrateText       = fs.readFileSync('./client/homebrew/pages/homePage/migrate.md', 'utf8');
+	const changelogText     = fs.readFileSync('changelog.md', 'utf8');
+	const faqText           = fs.readFileSync('faq.md', 'utf8');

-String.prototype.replaceAll = function(s, r){return this.split(s).join(r);};
+	String.prototype.replaceAll = function(s, r){return this.split(s).join(r);};

-const defaultMetaTags = {
+	const defaultMetaTags = {
 		site_name   : 'The Homebrewery - Make your Homebrew content look legit!',
 		title       : 'The Homebrewery',
 		description : 'A NaturalCrit Tool for creating authentic Homebrews using Markdown.',
 		image       : `${config.get('publicUrl')}/thumbnail.png`,
 		type        : 'website'
-};
+	};

-//Robots.txt
-app.get('/robots.txt', (req, res)=>{
+	//Robots.txt
+	app.get('/robots.txt', (req, res)=>{
 		return res.sendFile(`robots.txt`, { root: process.cwd() });
-});
+	});

-//Home page
-app.get('/', (req, res, next)=>{
+	//Home page
+	app.get('/', (req, res, next)=>{
 		req.brew = {
 			text     : welcomeText,
 			renderer : 'V3',
@@ -146,10 +152,10 @@ app.get('/', (req, res, next)=>{

 		splitTextStyleAndMetadata(req.brew);
 		return next();
-});
+	});

-//Home page Legacy
-app.get('/legacy', (req, res, next)=>{
+	//Home page Legacy
+	app.get('/legacy', (req, res, next)=>{
 		req.brew = {
 			text     : welcomeTextLegacy,
 			renderer : 'legacy',
@@ -163,10 +169,10 @@ app.get('/legacy', (req, res, next)=>{

 		splitTextStyleAndMetadata(req.brew);
 		return next();
-});
+	});

-//Legacy/Other Document -> v3 Migration Guide
-app.get('/migrate', (req, res, next)=>{
+	//Legacy/Other Document -> v3 Migration Guide
+	app.get('/migrate', (req, res, next)=>{
 		req.brew = {
 			text     : migrateText,
 			renderer : 'V3',
@@ -180,10 +186,10 @@ app.get('/migrate', (req, res, next)=>{

 		splitTextStyleAndMetadata(req.brew);
 		return next();
-});
+	});

-//Changelog page
-app.get('/changelog', async (req, res, next)=>{
+	//Changelog page
+	app.get('/changelog', async (req, res, next)=>{
 		req.brew = {
 			title    : 'Changelog',
 			text     : changelogText,
@@ -198,10 +204,10 @@ app.get('/changelog', async (req, res, next)=>{

 		splitTextStyleAndMetadata(req.brew);
 		return next();
-});
+	});

-//FAQ page
-app.get('/faq', async (req, res, next)=>{
+	//FAQ page
+	app.get('/faq', async (req, res, next)=>{
 		req.brew = {
 			title    : 'FAQ',
 			text     : faqText,
@@ -216,10 +222,10 @@ app.get('/faq', async (req, res, next)=>{

 		splitTextStyleAndMetadata(req.brew);
 		return next();
-});
+	});

-//Source page
-app.get('/source/:id', asyncHandler(getBrew('share')), (req, res)=>{
+	//Source page
+	app.get('/source/:id', asyncHandler(getBrew('share')), (req, res)=>{
 		const { brew } = req;

 		const replaceStrings = { '&': '&amp;', '<': '&lt;', '>': '&gt;' };
@@ -229,10 +235,10 @@ app.get('/source/:id', asyncHandler(getBrew('share')), (req, res)=>{
 		}
 		text = `<code><pre style="white-space: pre-wrap;">${text}</pre></code>`;
 		res.status(200).send(text);
-});
+	});

-//Download brew source page
-app.get('/download/:id', asyncHandler(getBrew('share')), (req, res)=>{
+	//Download brew source page
+	app.get('/download/:id', asyncHandler(getBrew('share')), (req, res)=>{
 		const { brew } = req;
 		sanitizeBrew(brew, 'share');
 		const prefix = 'HB - ';
@@ -252,10 +258,10 @@ app.get('/download/:id', asyncHandler(getBrew('share')), (req, res)=>{
 			'Content-Disposition' : `attachment; filename*=UTF-8''${encodeRFC3986ValueChars(fileName)}.txt`
 		});
 		res.status(200).send(brew.text);
-});
+	});

-//Serve brew metadata
-app.get('/metadata/:id', asyncHandler(getBrew('share')), (req, res)=>{
+	//Serve brew metadata
+	app.get('/metadata/:id', asyncHandler(getBrew('share')), (req, res)=>{
 		const { brew } = req;
 		sanitizeBrew(brew, 'share');

@@ -269,13 +275,13 @@ app.get('/metadata/:id', asyncHandler(getBrew('share')), (req, res)=>{
 	  return acc;
 		}, {});
 		res.status(200).json(metadata);
-});
+	});

-//Serve brew styling
-app.get('/css/:id', asyncHandler(getBrew('share')), (req, res)=>{getCSS(req, res);});
+	//Serve brew styling
+	app.get('/css/:id', asyncHandler(getBrew('share')), (req, res)=>{getCSS(req, res);});

-//User Page
-app.get('/user/:username', dbCheck, async (req, res, next)=>{
+	//User Page
+	app.get('/user/:username', dbCheck, async (req, res, next)=>{
 		const ownAccount = req.account && (req.account.username == req.params.username);

 		req.ogMeta = { ...defaultMetaTags,
@@ -344,10 +350,10 @@ app.get('/user/:username', dbCheck, async (req, res, next)=>{
 		});

 		return next();
-});
+	});

-//Change author name on brews
-app.put('/api/user/rename', dbCheck, async (req, res)=>{
+	//Change author name on brews
+	app.put('/api/user/rename', dbCheck, async (req, res)=>{
 		const { username, newUsername } = req.body;
 		const ownAccount = req.account && (req.account.username == newUsername);

@@ -372,10 +378,10 @@ app.put('/api/user/rename', dbCheck, async (req, res)=>{
 			console.error('Error renaming brews:', error);
 			return res.status(500).json({ error: 'Failed to rename brews.' });
 		}
-});
+	});

-//Edit Page
-app.get('/edit/:id', asyncHandler(getBrew('edit')), asyncHandler(async(req, res, next)=>{
+	//Edit Page
+	app.get('/edit/:id', asyncHandler(getBrew('edit')), asyncHandler(async(req, res, next)=>{
 		req.brew = req.brew.toObject ? req.brew.toObject() : req.brew;

 		req.userThemes = await(getUsersBrewThemes(req.account?.username));
@@ -392,10 +398,10 @@ app.get('/edit/:id', asyncHandler(getBrew('edit')), asyncHandler(async(req, res,
 		splitTextStyleAndMetadata(req.brew);
 		res.header('Cache-Control', 'no-cache, no-store');	//reload the latest saved brew when pressing back button, not the cached version before save.
 		return next();
-}));
+	}));

-//New Page from ID
-app.get('/new/:id', asyncHandler(getBrew('share')), asyncHandler(async(req, res, next)=>{
+	//New Page from ID
+	app.get('/new/:id', asyncHandler(getBrew('share')), asyncHandler(async(req, res, next)=>{
 		sanitizeBrew(req.brew, 'share');
 		splitTextStyleAndMetadata(req.brew);
 		const brew = {
@@ -418,10 +424,10 @@ app.get('/new/:id', asyncHandler(getBrew('share')), asyncHandler(async(req, res,
 		};

 		return next();
-}));
+	}));

-//New Page
-app.get('/new', asyncHandler(async(req, res, next)=>{
+	//New Page
+	app.get('/new', asyncHandler(async(req, res, next)=>{
 		req.userThemes = await(getUsersBrewThemes(req.account?.username));

 		req.ogMeta = { ...defaultMetaTags,
@@ -430,10 +436,10 @@ app.get('/new', asyncHandler(async(req, res, next)=>{
 		};

 		return next();
-}));
+	}));

-//Share Page
-app.get('/share/:id', dbCheck, asyncHandler(getBrew('share')), asyncHandler(async (req, res, next)=>{
+	//Share Page
+	app.get('/share/:id', dbCheck, asyncHandler(getBrew('share')), asyncHandler(async (req, res, next)=>{
 		const { brew } = req;
 		req.ogMeta = { ...defaultMetaTags,
 			title       : `${req.brew.title || 'Untitled Brew'} - ${req.brew.authors[0] || 'No author.'}`,
@@ -457,10 +463,10 @@ app.get('/share/:id', dbCheck, asyncHandler(getBrew('share')), asyncHandler(asyn
 		brew.authors.includes(req.account?.username) ? sanitizeBrew(req.brew, 'shareAuthor') : sanitizeBrew(req.brew, 'share');
 		splitTextStyleAndMetadata(req.brew);
 		return next();
-}));
+	}));

-//Account Page
-app.get('/account', dbCheck, asyncHandler(async (req, res, next)=>{
+	//Account Page
+	app.get('/account', dbCheck, asyncHandler(async (req, res, next)=>{
 		const data = {};
 		data.title = 'Account Information Page';

@@ -510,10 +516,10 @@ app.get('/account', dbCheck, asyncHandler(async (req, res, next)=>{
 		};

 		return next();
-}));
+	}));

-// Local only
-if(isLocalEnvironment){
+	// Local only
+	if(isLocalEnvironment){
 	// Login
 		app.post('/local/login', (req, res)=>{
 			const username = req.body.username;
@@ -522,32 +528,32 @@ if(isLocalEnvironment){
 			const payload = jwt.encode({ username: username, issued: new Date }, config.get('secret'));
 			return res.json(payload);
 		});
-}
+	}

-// Add Static Local Paths
-app.use('/staticImages', express.static(config.get('hb_images') && fs.existsSync(config.get('hb_images')) ? config.get('hb_images') :'staticImages'));
-app.use('/staticFonts', express.static(config.get('hb_fonts')  && fs.existsSync(config.get('hb_fonts')) ? config.get('hb_fonts'):'staticFonts'));
+	// Add Static Local Paths
+	app.use('/staticImages', express.static(config.get('hb_images') && fs.existsSync(config.get('hb_images')) ? config.get('hb_images') :'staticImages'));
+	app.use('/staticFonts', express.static(config.get('hb_fonts')  && fs.existsSync(config.get('hb_fonts')) ? config.get('hb_fonts'):'staticFonts'));

-//Vault Page
-app.get('/vault', asyncHandler(async(req, res, next)=>{
+	//Vault Page
+	app.get('/vault', asyncHandler(async(req, res, next)=>{
 		req.ogMeta = { ...defaultMetaTags,
 			title       : 'The Vault',
 			description : 'Search for Brews'
 		};
 		return next();
-}));
+	}));

-//Send rendered page
-app.use(asyncHandler(async (req, res, next)=>{
+	//Send rendered page
+	app.use(asyncHandler(async (req, res, next)=>{
 		if(!req.route) return res.redirect('/'); // Catch-all for invalid routes

 		const page = await renderPage(req, res);
 		if(!page) return;
 		res.send(page);
-}));
+	}));

-//Render the page
-const renderPage = async (req, res)=>{
+	//Render the page
+	const renderPage = async (req, res)=>{
 	// Create configuration object
 		const configuration = {
 			local       : isLocalEnvironment,
@@ -568,16 +574,22 @@ const renderPage = async (req, res)=>{
 			userThemes  : req.userThemes
 		};
 		const title = req.brew ? req.brew.title : '';
-	const page = await templateFn('homebrew', title, props)
-		.catch((err)=>{
-			console.log(err);
-		});
-	return page;
-};

-//v=====----- Error-Handling Middleware -----=====v//
-//Format Errors as plain objects so all fields will appear in the string sent
-const formatErrors = (key, value)=>{
+		const page = await template(
+    	isProd ? {} : { vite, url: req.originalUrl },
+    	'homebrew',
+    	title,
+    	props
+  	).catch((err)=>{
+    	console.error(err);
+  	});
+
+		return page;
+	};
+
+	//v=====----- Error-Handling Middleware -----=====v//
+	//Format Errors as plain objects so all fields will appear in the string sent
+	const formatErrors = (key, value)=>{
 		if(value instanceof Error) {
 			const error = {};
 			Object.getOwnPropertyNames(value).forEach(function (key) {
@@ -586,13 +598,13 @@ const formatErrors = (key, value)=>{
 			return error;
 		}
 		return value;
-};
+	};

-const getPureError = (error)=>{
+	const getPureError = (error)=>{
 		return JSON.parse(JSON.stringify(error, formatErrors));
-};
+	};

-app.use(async (err, req, res, next)=>{
+	app.use(async (err, req, res, next)=>{
 		err.originalUrl = req.originalUrl;
 		console.error(err);

@@ -622,14 +634,15 @@ app.use(async (err, req, res, next)=>{
 		const page = await renderPage(req, res);
 		if(!page) return;
 		res.send(page);
-});
+	});

-app.use((req, res)=>{
+	app.use((req, res)=>{
 		if(!res.headersSent) {
 			console.error('Headers have not been sent, responding with a server error.', req.url);
 			res.status(500).send('An error occurred and the server did not send a response. The error has been logged, please note the time this occurred and report this issue.');
 		}
-});
-//^=====--------------------------------------=====^//
+	});
+	//^=====--------------------------------------=====^//

-export default app;
+	return app;
+}
--- a/vite.config.js
+++ b/vite.config.js
@@ -23,6 +23,7 @@ export default defineConfig({
 		},
 	},
 	server: {
+		port:8000,
 		fs: {
 			allow: ["."],
 		},