From c67457efee18a49ce1a0dc583ea588de1e6d7bef Mon Sep 17 00:00:00 2001 From: SKairinos Date: Mon, 9 Dec 2024 11:48:17 +0000 Subject: [PATCH 01/25] fix: default settings --- src/settings.ts | 19 +++---------------- 1 file changed, 3 insertions(+), 16 deletions(-) diff --git a/src/settings.ts b/src/settings.ts index 65c73581..416ebcc6 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -10,24 +10,11 @@ const env = import.meta.env as Record export default env // The name of the current service. -export const SERVICE_NAME = env.VITE_SERVICE_NAME ?? "replace-me" - -// If the current service the root service. This will only be true for portal. -export const SERVICE_IS_ROOT = Boolean(Number(env.VITE_SERVICE_IS_ROOT ?? "0")) - -// The protocol, domain and port of the current service. -export const SERVICE_PROTOCOL = env.VITE_SERVICE_PROTOCOL ?? "http" -export const SERVICE_DOMAIN = env.VITE_SERVICE_DOMAIN ?? "localhost" -export const SERVICE_PORT = Number(env.VITE_SERVICE_PORT ?? "8000") - -// The base url of the current service. -// The root service does not need its name included in the base url. -export const SERVICE_BASE_URL = - `${SERVICE_PROTOCOL}://${SERVICE_DOMAIN}:${SERVICE_PORT}` + - (SERVICE_IS_ROOT ? "" : `/${SERVICE_NAME}`) +export const SERVICE_NAME = env.VITE_SERVICE_NAME ?? "REPLACE_ME" // The api url of the current service. -export const SERVICE_API_URL = `${SERVICE_BASE_URL}/api` +export const SERVICE_API_URL = + env.VITE_SERVICE_API_URL ?? "http://localhost:8000" // The names of cookies. export const CSRF_COOKIE_NAME = `${SERVICE_NAME}_csrftoken` From 7c05947269a391323be6464a6dff378abbb26c92 Mon Sep 17 00:00:00 2001 From: SKairinos Date: Wed, 11 Dec 2024 09:54:08 +0000 Subject: [PATCH 02/25] feat: ssr --- package.json | 3 + src/components/App.tsx | 90 +++++------ src/server.js | 113 ++++++++++++++ yarn.lock | 338 ++++++++++++++++++++++++++++++++++++++++- 4 files changed, 494 insertions(+), 50 deletions(-) create mode 100644 src/server.js diff --git a/package.json b/package.json index 3ab937c7..cc3da355 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,9 @@ "@mui/material": "^5.11.12", "@mui/x-date-pickers": "^7.7.1", "@reduxjs/toolkit": "^2.0.1", + "compression": "^1.7.5", "dayjs": "^1.11.11", + "express": "^4.21.2", "formik": "^2.2.9", "js-cookie": "^3.0.5", "qs": "^6.11.2", @@ -53,6 +55,7 @@ "react-redux": "^9.1.0", "react-router-dom": "^6.23.1", "serve": "^14.2.3", + "sirv": "^3.0.0", "yup": "^1.1.1" }, "devDependencies": { diff --git a/src/components/App.tsx b/src/components/App.tsx index 51624238..649f4615 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1,13 +1,15 @@ import { CssBaseline, ThemeProvider } from "@mui/material" import { type ThemeProviderProps } from "@mui/material/styles/ThemeProvider" -import { useCallback, type FC, type ReactNode } from "react" +import { type FC, type ReactNode } from "react" import { Provider, type ProviderProps } from "react-redux" import { BrowserRouter, Routes as RouterRoutes } from "react-router-dom" +import { StaticRouter } from "react-router-dom/server" import { type Action } from "redux" import "./App.css" -import { InactiveDialog, ScreenTimeDialog } from "../features" -import { useCountdown, useEventListener, useLocation } from "../hooks" +import { useLocation } from "../hooks" +// import { InactiveDialog, ScreenTimeDialog } from "../features" +// import { useCountdown, useEventListener } from "../hooks" // import "../scripts" // import { // configureFreshworksWidget, @@ -15,6 +17,7 @@ import { useCountdown, useEventListener, useLocation } from "../hooks" // } from "../utils/window" export interface AppProps { + path?: string theme: ThemeProviderProps["theme"] store: ProviderProps["store"] routes: ReactNode @@ -26,53 +29,54 @@ export interface AppProps { maxTotalSeconds?: number } -const Routes: FC< - Pick< - AppProps, - "routes" | "header" | "footer" | "headerExcludePaths" | "footerExcludePaths" - > -> = ({ +type RoutesProps = Pick< + AppProps, + "routes" | "header" | "footer" | "headerExcludePaths" | "footerExcludePaths" +> & { path: string } + +const Routes: FC = ({ + path, routes, header = <>, // TODO: "header =
" footer = <>, // TODO: "footer =