fix: settings and app

src/components/App.tsx

@@ -8,6 +8,7 @@ import { type Action } from "redux"
 
 import "./App.css"
 import { useLocation } from "../hooks"
+import { SSR } from "../settings"
 // import { InactiveDialog, ScreenTimeDialog } from "../features"
 // import { useCountdown, useEventListener } from "../hooks"
 // import "../scripts"
@@ -63,6 +64,23 @@ const App = <A extends Action = Action, S = unknown>({
   maxTotalSeconds = 60 * 60,
   ...routesProps
 }: AppProps<A, S>): JSX.Element => {
+  let router: ReactNode
+  if (SSR) {
+    if (!path) throw new Error("Running server and path not provided.")
+
+    router = (
+      <StaticRouter location={path}>
+        <Routes path={path} {...routesProps} />
+      </StaticRouter>
+    )
+  } else {
+    router = (
+      <BrowserRouter>
+        <BrowserRoutes {...routesProps} />
+      </BrowserRouter>
+    )
+  }
+
   // TODO: cannot use document during SSR
   // const root = document.getElementById("root") as HTMLElement
 
@@ -97,15 +115,7 @@ const App = <A extends Action = Action, S = unknown>({
             setTotalSeconds(maxTotalSeconds)
           }}
         /> */}
-        {path ? (
-          <StaticRouter location={path}>
-            <Routes path={path} {...routesProps} />
-          </StaticRouter>
-        ) : (
-          <BrowserRouter>
-            <BrowserRoutes {...routesProps} />
-          </BrowserRouter>
-        )}
+        {router}
       </Provider>
     </ThemeProvider>
   )

src/server.js

@@ -3,19 +3,22 @@ import express from "express"
 
 export default class Server {
   constructor(
-    /** @type {Partial<{ env: "local" | "development" | "staging" | "production"; port: number; base: string }>} */
-    { env, port, base } = {},
+    /** @type {Partial<{ mode: "local" | "development" | "staging" | "production"; port: number; base: string }>} */
+    { mode, port, base } = {},
   ) {
-    /** @type {boolean} */
-    this.isLocal = (env || process.env.NODE_ENV) === "local"
+    /** @type {"local" | "development" | "staging" | "production"} */
+    this.mode = mode || process.env.MODE || "local"
     /** @type {number} */
     this.port = port || (process.env.PORT ? Number(process.env.PORT) : 5173)
     /** @type {string} */
     this.base = base || process.env.BASE || "/"
-    /** @type {string} */
-    this.hostname = this.isLocal ? "localhost" : "0.0.0.0"
+
+    /** @type {boolean} */
+    this.envIsProduction = process.env.NODE_ENV === "production"
     /** @type {string} */
     this.templateHtml = ""
+    /** @type {string} */
+    this.hostname = this.mode === "local" ? "localhost" : "0.0.0.0"
 
     /** @type {Express} */
     this.app = express()
@@ -52,25 +55,26 @@ export default class Server {
   /** @type {(request: Request, response: Response) => Promise<void>} */
   async handleServeHtml(request, response) {
     try {
-      const url = request.originalUrl //.replace(this.base, "")
+      const path = request.originalUrl //.replace(this.base, "")
 
       /** @type {string} */
       let template
-      /** @type {(url: string) => Promise<{ head?: string; html?: string }>} */
+      /** @type {(path: string) => Promise<{ head?: string; html?: string }>} */
       let render
-      if (this.isLocal) {
-        // Always read fresh template.
-        template = await fs.readFile("./index.html", "utf-8")
-        template = await this.vite.transformIndexHtml(url, template)
-        render = (await this.vite.ssrLoadModule("/src/entry-server.tsx")).render
-      } else {
+      if (this.envIsProduction) {
         render = (await import("./dist/server/entry-server.js")).render
 
         // Use cached template.
         template = this.templateHtml
+      } else {
+        render = (await this.vite.ssrLoadModule("/src/entry-server.tsx")).render
+
+        // Always read fresh template.
+        template = await fs.readFile("./index.html", "utf-8")
+        template = await this.vite.transformIndexHtml(path, template)
       }
 
-      const rendered = await render(url)
+      const rendered = await render(path)
 
       const html = template
         .replace(`<!--app-head-->`, rendered.head ?? "")
@@ -85,24 +89,25 @@ export default class Server {
   }
 
   async run() {
-    if (this.isLocal) {
+    if (this.envIsProduction) {
+      const compression = (await import("compression")).default
+      const sirv = (await import("sirv")).default
+
+      this.templateHtml = await fs.readFile("./dist/client/index.html", "utf-8")
+
+      this.app.use(compression())
+      this.app.use(this.base, sirv("./dist/client", { extensions: [] }))
+    } else {
       const { createServer } = await import("vite")
 
       this.vite = await createServer({
         server: { middlewareMode: true },
         appType: "custom",
         base: this.base,
+        mode: this.mode,
       })
 
       this.app.use(this.vite.middlewares)
-    } else {
-      const compression = (await import("compression")).default
-      const sirv = (await import("sirv")).default
-
-      this.templateHtml = await fs.readFile("./dist/client/index.html", "utf-8")
-
-      this.app.use(compression())
-      this.app.use(this.base, sirv("./dist/client", { extensions: [] }))
     }
 
     // Start http server

src/settings.ts → src/settings/custom.ts

@@ -6,18 +6,18 @@
  */
 
 // Shorthand to access environment variables.
-const env = import.meta.env as Record<string, string>
-export default env
+const env = import.meta.env
 
 // The name of the current service.
-export const SERVICE_NAME = env.VITE_SERVICE_NAME ?? "REPLACE_ME"
+export const SERVICE_NAME: string = env.VITE_SERVICE_NAME ?? "REPLACE_ME"
 
 // The api url of the current service.
-export const SERVICE_API_URL =
+export const SERVICE_API_URL: string =
   env.VITE_SERVICE_API_URL ?? "http://localhost:8000"
 
 // The names of cookies.
 export const CSRF_COOKIE_NAME = `${SERVICE_NAME}_csrftoken`
-export const SESSION_COOKIE_NAME = env.VITE_SESSION_COOKIE_NAME ?? "session_key"
-export const SESSION_METADATA_COOKIE_NAME =
+export const SESSION_COOKIE_NAME: string =
+  env.VITE_SESSION_COOKIE_NAME ?? "session_key"
+export const SESSION_METADATA_COOKIE_NAME: string =
   env.VITE_SESSION_METADATA_COOKIE_NAME ?? "session_metadata"

src/settings/index.ts

@@ -0,0 +1,5 @@
+// Shorthand to access environment variables.
+export default import.meta.env
+
+export * from "./custom"
+export * from "./vite"

src/settings/vite.ts

@@ -0,0 +1,26 @@
+/**
+ * This file contains all of vite's environment variables.
+ *
+ * https://vite.dev/guide/env-and-mode#env-variables
+ */
+
+// Shorthand to access environment variables.
+const env = import.meta.env
+
+// The mode the app is running in.
+export const MODE = env.MODE
+
+// The base url the app is being served from.
+// This is determined by the base config option.
+export const BASE_URL = env.BASE_URL
+
+// Whether the app is running in production (running the dev server with
+// NODE_ENV='production' or running an app built with NODE_ENV='production').
+export const PROD = env.PROD
+
+// Whether the app is running in development (always the opposite of
+// import.meta.env.PROD)
+export const DEV = env.DEV
+
+// Whether the app is running in the server.
+export const SSR = env.SSR