add a basic server UI (#16)

.github/workflows/docker.yml

@@ -20,6 +20,17 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ vars.NODE_VERSION }}
+
+      - name: Build Server UI
+        run: |
+          cd ./server-ui
+          npm i --omit=dev
+          npm run build
+
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
 

.gitignore

@@ -167,4 +167,8 @@ cython_debug/
 # compose.yaml
 
 # Swagger-UI
-docs.yaml
+
+# Node js
+node_modules
+/server-ui/public/main.js
+/server/static/js/server-ui.js

.vscode/launch.json

@@ -5,13 +5,11 @@
     "version": "0.2.0",
     "configurations": [
         {
-            "name": "Current File",
-            "type": "python",
+            "command": "npm start",
+            "name": "Run Server UI",
             "request": "launch",
-            "program": "${file}",
-            "console": "integratedTerminal",
-            "justMyCode": true,
-            "cwd": "${workspaceFolder}/server"
+            "type": "node-terminal",
+            "cwd": "${workspaceFolder}/server-ui"
         },
         {
             "name": "Run Server",
@@ -30,7 +28,15 @@
                 "80"
             ],
             "jinja": true,
-            "justMyCode": true
+            "justMyCode": true,
+            "preLaunchTask": "Build Server UI"
+        }
+    ],
+    "compounds": [
+        {
+            "name": "Server All",
+            "configurations": ["Run Server UI", "Run Server"],
+            "stopAll": true
         }
     ]
 }

.vscode/tasks.json

@@ -0,0 +1,14 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "build",
+			"path": "server-ui",
+			"group": "build",
+			"problemMatcher": [],
+			"label": "Build Server UI",
+			"detail": "webpack --config webpack.prod.js"
+		}
+	]
+}

server-ui/.babelrc

@@ -0,0 +1,16 @@
+{
+    /*
+        a preset is a set of plugins used to support particular language features.
+        The two presets Babel uses by default: es2015, react
+    */
+    "presets": [
+        "@babel/preset-env", //compiling ES2015+ syntax
+        "@babel/preset-react" //for react
+    ],
+    /*
+        Babel's code transformations are enabled by applying plugins (or presets) to your configuration file.
+    */
+    "plugins": [
+        "@babel/plugin-transform-runtime"
+    ]
+}