Merge pull request #180 from DigitalSlideArchive/vue-binary-build

Vue binary build

.gitignore

@@ -1,6 +1,11 @@
+# Developer tools
 .envrc
 .vscode/*
-# Redacted Images
+
+# Build artifacts
+*/web_static/*
+
+# Sample Redacted Images
 */REDACTED_*
 */Redacted_*
 Redacted_*/

client/.env.development

@@ -0,0 +1,2 @@
+# This could leak to production. Should only be used in DEBUG mode for FastAPI
+VITE_APP_API_URL=http://127.0.0.1:8000

client/README.md

@@ -0,0 +1,21 @@
+## Development
+For efficient front end developement in the project root run:
+
+   ```bash
+   export DEBUG=True
+   hypercorn --reload imagedephi.gui:app
+   ```
+
+In a new terminal:
+
+```bash
+cd client/
+yarn dev
+```
+
+**Note**
+`imagedephi gui` will break and tests will fail in debug mode. Remember to reset variable when done with development.
+
+```bash
+export DEBUG=False
+```

imagedephi/client/package.json → client/package.json

@@ -2,11 +2,15 @@
   "name": "imagedephi",
   "private": true,
   "version": "0.0.0",
+  "license": "Apache-2.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --port 8080",
-    "build": "vue-tsc && vite build",
-    "preview": "vite preview"
+    "lint:tsc": "vue-tsc --noEmit",
+    "lint": "npm-run-all lint:*",
+    "dev": "NODE_ENV=development vite --port 8080",
+    "build:clean": "rimraf ../imagedephi/web_static",
+    "build:compile": "vite build --outDir ../imagedephi/web_static",
+    "build": "npm-run-all build:clean build:compile"
   },
   "dependencies": {
     "vue": "^3.3.4"
@@ -15,7 +19,9 @@
     "@vitejs/plugin-vue": "^4.2.3",
     "autoprefixer": "^10.4.16",
     "daisyui": "^4.0.7",
+    "npm-run-all": "^4.1.5",
     "postcss": "^8.4.31",
+    "rimraf": "^5.0.5",
     "tailwindcss": "^3.3.5",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",

client/src/api/rest.ts

@@ -0,0 +1,8 @@
+export async function getDirectoryInfo(path?:string) {
+    const selectedPath= path ? path : '';
+    const basePath = import.meta.env.VITE_APP_API_URL ? import.meta.env.VITE_APP_API_URL : '';
+    const response = await fetch(`${basePath}/directory/${selectedPath}`, {method: "GET", mode: 'cors'});
+
+    return response.json()
+
+}

imagedephi/client/src/main.ts → client/src/main.ts

@@ -1,5 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import './style.css'
+import { getDirectoryInfo } from './api/rest.ts'
 
 createApp(App).mount('#app')
+getDirectoryInfo()