From dbda43077e28a1d491a8a40fd6acd881d8b987df Mon Sep 17 00:00:00 2001
From: Nikolai R Kristiansen <nikolaik@gmail.com>
Date: Sun, 5 Dec 2021 00:45:36 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Make=20new=20frontend=20available?=
 =?UTF-8?q?=20under=20/modern?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

👷 Start adding deploy config and CI
---
 .gitignore                |  4 +++-
 bin/gitlab-ci.yml         | 22 ++++++++++++++++++++++
 frontend/src/App.tsx      |  4 +++-
 frontend/src/client.ts    |  2 +-
 frontend/src/typings.d.ts | 10 ++++++++++
 frontend/tsconfig.json    |  5 ++++-
 frontend/vite.config.js   |  4 +++-
 main/urls.py              |  3 +++
 8 files changed, 49 insertions(+), 5 deletions(-)
 create mode 100644 bin/gitlab-ci.yml

diff --git a/.gitignore b/.gitignore
index dd84108..853292f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,4 +9,6 @@ node_modules/
 .idea/
 CACHE/
 media/
-tmp/
\ No newline at end of file
+tmp/
+frontend/dist
+static/modern
diff --git a/bin/gitlab-ci.yml b/bin/gitlab-ci.yml
new file mode 100644
index 0000000..20554d3
--- /dev/null
+++ b/bin/gitlab-ci.yml
@@ -0,0 +1,22 @@
+build-job:
+  stage: build
+  script:
+    - echo "Hello, $GITLAB_USER_LOGIN!"
+
+test-job1:
+  stage: test
+  script:
+    - echo "This job tests something"
+
+test-job2:
+  stage: test
+  script:
+    - echo "This job tests something, but takes more time than test-job1."
+    - echo "After the echo commands complete, it runs the sleep command for 20 seconds"
+    - echo "which simulates a test that runs 20 seconds longer than test-job1"
+    - sleep 20
+
+deploy-prod:
+  stage: deploy
+  script:
+    - echo "This job deploys something from the $CI_COMMIT_BRANCH branch."
\ No newline at end of file
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index bebd471..b72a4df 100644
--- a/frontend/src/App.tsx
+++ b/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}>
diff --git a/frontend/src/client.ts b/frontend/src/client.ts
index e2f56e5..a3bfa2b 100644
--- a/frontend/src/client.ts
+++ b/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(),
 });
 
diff --git a/frontend/src/typings.d.ts b/frontend/src/typings.d.ts
index 6a82a78..c3d617b 100644
--- a/frontend/src/typings.d.ts
+++ b/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;
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 99460f6..847e702 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -16,5 +16,8 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["./src"]
+  "include": [
+    "./src",
+    "node_modules/vite/types/importMeta.d.ts"
+  ]
 }
\ No newline at end of file
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 2de9534..34824a0 100644
--- a/frontend/vite.config.js
+++ b/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" },
 });
diff --git a/main/urls.py b/main/urls.py
index af4b711..b8275f2 100644
--- a/main/urls.py
+++ b/main/urls.py
@@ -1,5 +1,6 @@
 from django.conf.urls import url
 from django.contrib.staticfiles.views import serve
+from django.urls import path
 
 from main.api.views import ProductViewSet
 from main.views.stats import (
@@ -29,6 +30,8 @@ urlpatterns = [
     url(r"^inventory/$", inventory, name="inventory"),
     url(r"^inventory/add/$", inventory_add, name="inventory-add"),
     url(r"^report$", report, name="report"),
+    # FIXME: Serve the modern stack from here until rest of views are ported
+    url(r"^modern/", serve, kwargs={"path": "modern/index.html"}, name="modern"),
 ]
 # Stats
 urlpatterns += [