trying to get this to work

2026-03-22 06:48:11 +00:00 · 2026-02-01 20:37:09 +01:00
parent 215d24b99a
commit b5598ac423
9 changed files with 65 additions and 66 deletions
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -11,8 +11,7 @@ import ToolBar  from './toolBar/toolBar.jsx';
 //TODO: move to the brew renderer
 import RenderWarnings from '../../components/renderWarnings/renderWarnings.jsx';
 import NotificationPopup from './notificationPopup/notificationPopup.jsx';
-import frameComp from 'react-frame-component';
-const Frame = frameComp.default;
+import Frame from 'react-frame-component';
 import dedent from 'dedent';
 import { printCurrentBrew } from '../../../shared/helpers.js';

--- a/client/homebrew/homebrew.jsx
+++ b/client/homebrew/homebrew.jsx
@@ -1,7 +1,7 @@
 import 'core-js/es/string/to-well-formed.js'; // Polyfill for older browsers
 import './homebrew.less';
 import React, { useState, useEffect } from 'react';
-import { BrowserRouter as Router, Routes, Route, useParams, useSearchParams } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route, useParams, useSearchParams } from 'react-router';

 import { updateLocalStorage } from './utils/updateLocalStorage/updateLocalStorageKeys.js';

@@ -21,31 +21,27 @@ const WithRoute = ({ el: Element, ...rest })=>{
 	return <Element {...rest} {...params} query={queryParams} />;
 };

-const Homebrew = ()=>{
+const Homebrew = (props)=>{
 	// SPA defaults / client-side state
-	const [account, setAccount] = useState(null);
-	const [version] = useState('0.0.0');
-	const [config, setConfig] = useState({});
-	const [brew, setBrew] = useState({
-		title     : '',
-		text      : '',
-		shareId   : null,
-		editId    : null,
-		createdAt : null,
-		updatedAt : null,
-		lang      : ''
-	});
-	const [userThemes, setUserThemes] = useState([]);
-	const [brews, setBrews] = useState([]);
+	const {
+		url = '',
+		version = '0.0.0',
+		account = null,
+		config,
+		brew = {
+			title     : '',
+			text      : '',
+			shareId   : null,
+			editId    : null,
+			createdAt : null,
+			updatedAt : null,
+			lang      : ''
+		},
+		userThemes,
+		brews
+	} = props;

-	// Maybe should fetch the data here?
-	//probably should fetch the object later
-	// useEffect(() => { fetch('/api/...').then(res => res.json()).then(setBrew) }, []);
-
-	// Set globals if needed (legacy)
-	global.account = account;
-	global.version = version;
-	global.config = config;
+	console.log('props: ', props);

 	const backgroundObject = ()=>{
 		if(config?.deployment || (config?.local && config?.development)) {
--- a/client/homebrew/main.jsx
+++ b/client/homebrew/main.jsx
@@ -1,9 +1,7 @@
 import { createRoot } from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
-import App from "./App";
+import Homebrew from "./homebrew.jsx";

-createRoot(document.getElementById("reactRoot")).render(
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>
-);
+const props = window.__INITIAL_PROPS__ || {};
+console.log('props: ', window.__INITIAL_PROPS__);
+
+createRoot(document.getElementById("reactRoot")).render(<Homebrew {...props} />);
--- a/client/index.html
+++ b/client/index.html
@@ -24,6 +24,6 @@
  <body>
    <main id="reactRoot"></main>

-    <script type="module" src="/src/homebrewMain.jsx"></script>
+    <script type="module" src="/client/homebrew/main.jsx"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
@@ -3959,9 +3959,9 @@
      "license": "MIT"
    },
    "node_modules/@types/node": {
-      "version": "25.1.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.1.0.tgz",
-      "integrity": "sha512-t7frlewr6+cbx+9Ohpl0NOTKXZNV9xHRmNOvql47BFJKcEG1CxtxlPEEe+gR9uhVWM4DwhnvTF110mIL4yP9RA==",
+      "version": "25.2.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.2.0.tgz",
+      "integrity": "sha512-DZ8VwRFUNzuqJ5khrvwMXHmvPe+zGayJhr2CDNiKB1WBE1ST8Djl00D0IC4vvNmHMdj6DlbYRIaFE7WHjlDl5w==",
      "devOptional": true,
      "license": "MIT",
      "peer": true,
@@ -12647,22 +12647,22 @@
      }
    },
    "node_modules/tldts": {
-      "version": "7.0.19",
-      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.0.19.tgz",
-      "integrity": "sha512-8PWx8tvC4jDB39BQw1m4x8y5MH1BcQ5xHeL2n7UVFulMPH/3Q0uiamahFJ3lXA0zO2SUyRXuVVbWSDmstlt9YA==",
+      "version": "7.0.21",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.0.21.tgz",
+      "integrity": "sha512-Plu6V8fF/XU6d2k8jPtlQf5F4Xx2hAin4r2C2ca7wR8NK5MbRTo9huLUWRe28f3Uk8bYZfg74tit/dSjc18xnw==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "tldts-core": "^7.0.19"
+        "tldts-core": "^7.0.21"
      },
      "bin": {
        "tldts": "bin/cli.js"
      }
    },
    "node_modules/tldts-core": {
-      "version": "7.0.19",
-      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.0.19.tgz",
-      "integrity": "sha512-lJX2dEWx0SGH4O6p+7FPwYmJ/bu1JbcGJ8RLaG9b7liIgZ85itUVEPbMtWRVrde/0fnDPEPHW10ZsKW3kVsE9A==",
+      "version": "7.0.21",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.0.21.tgz",
+      "integrity": "sha512-oVOMdHvgjqyzUZH1rOESgJP1uNe2bVrfK0jUHHmiM2rpEiRbf3j4BrsIc6JigJRbHGanQwuZv/R+LTcHsw+bLA==",
      "dev": true,
      "license": "MIT"
    },
--- a/package.json
+++ b/package.json
@@ -12,11 +12,10 @@
    "url": "git://github.com/naturalcrit/homebrewery.git"
  },
  "scripts": {
-    "dev":"node server.js",
+    "dev": "vite",
    "build": "vite build && node scripts/compileAssets.js",
-		"start": "node server.js",
+    "preview": "vite preview",
    "compileAssets": "node scripts/compileAssets.js --dev",
-
    "lint": "eslint --fix",
    "lint:dry": "eslint",
    "stylelint": "stylelint --fix **/*.{less}",
--- a/server.js
+++ b/server.js
@@ -8,7 +8,6 @@ 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 },
@@ -17,16 +16,13 @@ async function start() {
 		
 	}

-	//==== 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
@@ -42,5 +38,4 @@ async function start() {
 	});
 }

-//==== Start the server ====//
 start();
--- a/server/app.js
+++ b/server/app.js
@@ -12,9 +12,9 @@ import _       from 'lodash';
 import jwt     from 'jwt-simple';
 import express from 'express';
 import config  from './config.js';
+import path from 'path';
 import fs      from 'fs-extra';

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

 import { DEFAULT_BREW }              from './brewDefaults.js';
@@ -545,7 +544,8 @@ export default async function createApp(vite) {

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

 		const page = await renderPage(req, res);
 		if(!page) return;
@@ -554,6 +554,7 @@ export default async function createApp(vite) {

 	//Render the page
 	const renderPage = async (req, res)=>{
+		console.log('renderpage');
 	// Create configuration object
 		const configuration = {
 			local       : isLocalEnvironment,
@@ -573,18 +574,25 @@ export default async function createApp(vite) {
 			ogMeta      : req.ogMeta,
 			userThemes  : req.userThemes
 		};
-		const title = req.brew ? req.brew.title : '';
+		console.log('props: ',props);
+		return await renderSPA(req, props);
+	};

-		const page = await template(
-    	isProd ? {} : { vite, url: req.originalUrl },
-    	'homebrew',
-    	title,
-    	props
-  	).catch((err)=>{
-    	console.error(err);
-  	});
+	const renderSPA = async (req, props)=>{
+		const htmlPath = isProd ? path.resolve('build', 'index.html') : path.resolve('index.html');
+		let html = fs.readFileSync(htmlPath, 'utf-8');
+		console.log('index.html snippet:', html.slice(0, 200)); // see the first 200 chars
+		html = html.replace(
+			'</head>',
+			`<script>window.__INITIAL_PROPS__ = ${JSON.stringify(props)}</script>\n</head>`
+		);

-		return page;
+		if(!isProd && vite?.transformIndexHtml) {
+			console.log('transforming');
+			return await vite.transformIndexHtml(req.originalUrl, html);
+		}
+
+		return html;
 	};

 	//v=====----- Error-Handling Middleware -----=====v//
--- a/vite.config.js
+++ b/vite.config.js
@@ -20,8 +20,12 @@ export default defineConfig({
 			},
 		},
 	},
+	// vite.config.js
+	define: {
+		global: "window",
+	},
 	server: {
-		port:8000,
+		port: 8000,
 		fs: {
 			allow: ["."],
 		},