✨ 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;
+}