✨ Make new frontend available under /modern

👷 Start adding deploy config and CI

.gitignore

@@ -10,3 +10,5 @@ node_modules/
 CACHE/
 media/
 tmp/
+frontend/dist
+static/modern

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."

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" },
 });

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 += [