diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 401b197d3..a42b3a64d 100644 --- 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'; diff --git a/client/homebrew/homebrew.jsx b/client/homebrew/homebrew.jsx index 86b0d57c4..aa03a05a8 100644 --- 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 ; }; -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)) { diff --git a/client/homebrew/main.jsx b/client/homebrew/main.jsx index 00f68f4d6..baabbf472 100644 --- 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( - - - -); +const props = window.__INITIAL_PROPS__ || {}; +console.log('props: ', window.__INITIAL_PROPS__); + +createRoot(document.getElementById("reactRoot")).render(); diff --git a/client/index.html b/index.html similarity index 90% rename from client/index.html rename to index.html index dc6e934b4..bfe95b67e 100644 --- a/client/index.html +++ b/index.html @@ -24,6 +24,6 @@
- + diff --git a/package-lock.json b/package-lock.json index 7a06b778c..1b96d7ff9 100644 --- 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" }, diff --git a/package.json b/package.json index cf1964d93..27b8e1ac6 100644 --- 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}", diff --git a/server.js b/server.js index 0405128ff..750716151 100644 --- 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(); diff --git a/server/app.js b/server/app.js index 89c577c8b..926e3d3ba 100644 --- 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( + '', + `\n` + ); - return page; + if(!isProd && vite?.transformIndexHtml) { + console.log('transforming'); + return await vite.transformIndexHtml(req.originalUrl, html); + } + + return html; }; //v=====----- Error-Handling Middleware -----=====v// diff --git a/vite.config.js b/vite.config.js index be9cda56c..8795d18da 100644 --- 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: ["."], },