✨ Make new frontend available under /modern

👷 Start adding deploy config and CI

frontend/src/App.tsx

@@ -10,9 +10,11 @@ import { Header } from "./components/Header";
 import { Toast } from "./components/Toast";
 import { ToastProvider } from "./components/ToastProvider";
 
+const baseUrl = import.meta.env.BASE_URL;
+
 const App: React.FC = () => (
   <ApolloProvider client={client}>
-    <Router>
+    <Router basename={baseUrl.replace("/static", "")}>
       <ToastProvider>
         <Header />
         <div className={styles.app}>

frontend/src/client.ts

@@ -1,7 +1,7 @@
 import { ApolloClient, InMemoryCache } from "@apollo/client";
 
 const client = new ApolloClient({
-  uri: "http://localhost:8000/graphql/", // FIXME: env
+  uri: import.meta.env.VITE_API_URL || "http://localhost:8000/graphql/",
   cache: new InMemoryCache(),
 });
 

frontend/src/typings.d.ts

@@ -1,6 +1,16 @@
+/* svgs */
 declare module "*.svg" {
   import { ReactElement, SVGProps } from "react";
   const content: (props: SVGProps<SVGElement>) => ReactElement;
   export default content;
 }
+/* CSS modules */
 declare module "*.module.css";
+
+/* Vite env vars */
+interface ImportMetaEnv {
+  readonly VITE_API_URL: string;
+}
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

frontend/tsconfig.json

@@ -16,5 +16,8 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["./src"]
+  "include": [
+    "./src",
+    "node_modules/vite/types/importMeta.d.ts"
+  ]
 }

frontend/vite.config.js

@@ -4,9 +4,11 @@ import reactSvgPlugin from "vite-plugin-react-svg";
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: process.env.NODE_ENV !== "production" ? "/" : "/static/modern/",
   plugins: [reactSvgPlugin({ defaultExport: "component" })],
   define: {
-    __DEV__: process.env.NODE_ENV !== "prodution",
+    __DEV__: process.env.NODE_ENV !== "production",
   },
   envDir: "..",
+  build: { outDir: "../static/modern" },
 });