feat: Added dynamic env variables injection to det PATHs and URLs

.env

@@ -1,4 +1,4 @@
-BASE_URL=http://192.168.0.17
-WWW_PORT=8989
-API_PORT=8988
-SEMVER=0.4.4
+APP_URL=http://192.168.0.17:8999
+API_URL=http://192.168.0.17:8998
+APP_PORT=8999
+API_PORT=8998

.github/workflows/Bump App Version.yml

@@ -1,6 +1,11 @@
 name: Bump App Semver
 
 on:
+  push:
+    branches:
+      - "main"
+    paths-ignore:
+      - "frontend/package.json"
   pull_request:
     types:
       - closed
@@ -27,14 +32,6 @@ jobs:
         with:
           scheme: conventional_commits
 
-      - name: Find and Replace in env
-        uses: thiagodnf/string-replacer@v1.0.2
-        with:
-          find: "SEMVER=.+"
-          replace: "SEMVER=${{ steps.version.outputs.version }}"
-          include: |
-            .env
-
       - name: Find and Replace in package
         uses: thiagodnf/string-replacer@v1.0.2
         with:
@@ -47,4 +44,4 @@ jobs:
         uses: EndBug/add-and-commit@v9
         with:
           message: ${{ github.event.pull_request.title }}
-          add: '[".env", "frontend/package.json"]'
+          add: '["frontend/package.json"]'

.github/workflows/Tag and Release.yml

@@ -1,11 +1,6 @@
 name: Tag and Release
 
 on:
-  push:
-    branches:
-      - 'main'
-    paths:
-      - '.env'
   workflow_dispatch:
 
 jobs:
@@ -22,7 +17,7 @@ jobs:
         id: version
         with:
           scheme: conventional_commits
-      
+
       - name: Tag and Release
         uses: BrandonStudio/tag-and-release@v1
         with:

README.md

@@ -10,7 +10,6 @@
 [![Docker Frontend CI](https://img.shields.io/github/actions/workflow/status/moddroid94/STLVault/Docker%20Backend%20CI.yml?style=for-the-badge&logo=docker&label=Backend)](https://github.com/moddroid94/STLVault/actions/workflows/Docker%20Backend%20CI.yml)
 [![Docker Pulls](https://img.shields.io/docker/pulls/moddroid94/stlvault-frontend?style=for-the-badge&logo=docker)](https://hub.docker.com/u/moddroid94)
 
-
 ![License](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)
 
 **STLVault** is a containerized 3D Model library manager and organizer, designed specifically for 3D printing enthusiasts. It provides a clean, modern web interface to manage your growing collection of STL, STEP, and 3MF files.
@@ -49,7 +48,6 @@
 ![Model Viewer/Info Preview](https://github.com/user-attachments/assets/db0c4141-51f6-408d-a6c5-9b3df20a3fc7)![ModelViewer2](https://github.com/user-attachments/assets/dc470ef9-0cf3-4f08-b60d-3985d2461576)
 ![Setting Page](https://github.com/user-attachments/assets/23c703ce-73b0-43bb-9ff4-f4a64c5f7147)
 
-
 ---
 
 ## 🚀 Deployment
@@ -64,9 +62,9 @@ services:
     image: moddroid94/stlvault-backend:latest
     pull_policy: build
     environment:
-      - FILE_STORAGE=/app/uploads
-      - DB_PATH=/app/data/data.db
-      - WEBUI_URL=http://192.168.178.21:8999
+      - FILE_STORAGE=/app/uploads #DO NOT CHANGE, MODIFY THE BINDS
+      - DB_PATH=/app/data/data.db #DO NOT CHANGE, MODIFY THE BINDS
+      - WEBUI_URL: "${APP_URL}"
     ports:
       - '8998:8080'
     volumes:
@@ -76,6 +74,9 @@ services:
   stlvfrontend:
     image: moddroid94/stlvault-frontend:latest
     pull_policy: build
+    environment:
+      - TERA_API_URL: "${API_URL}"
+      - TERA_APP_URL: "${APP_URL}"
     volumes:
       - node_modules:/app/node_modules
     ports:
@@ -97,14 +98,16 @@ volumes:
     ```
 
 2.  **Configure Environment:**
-    Review the `stack.env` file. You can modify the ports or URL if necessary, don't change the SEMVER tag.
+    Review the `.env` file. You can modify the ports/URL if necessary.
 
     ```bash
     # stack.env example
-    BASE_URL=http://0.0.0.0
-    WWW_PORT=8989
-    API_PORT=8988
-    SEMVER=x.x.x
+    APP_URL=http://192.168.0.17:8999
+    API_URL=http://192.168.0.17:8998
+    APP_PORT=8999
+    API_PORT=8998
+    UPLOAD_PATH=/your/mount/path
+    DATA_PATH=/your/mount/otherpath
     ```
 
 3.  **Start the Stack:**
@@ -114,22 +117,16 @@ volumes:
     ```
 
 4.  **Access the App:**
-    Open your browser and navigate to `http://localhost:8989` (or the port you configured).
+    Open your browser and navigate to `http://localhost:8999` (or the port you configured).
 
-### Portainer
+### GitOps (Deploy from Repo)
 
-You can deploy STLVault directly from Portainer using the repository as a stack source.
+You can deploy STLVault directly from any git deploy compatible docker manager using the repository as a stack source.
 
 1.  Create a new **Stack**.
 2.  Select **Repository** as the build method.
 3.  Enter the repository URL: `https://github.com/moddroid94/STLVault`.
-4.  **Environment Variables:** Define the variables below in the Portainer UI (variable substitution will automatically update `stack.env`).
-
-    | Variable   | Default          | Description                       |
-    | :--------- | :--------------- | :-------------------------------- |
-    | `BASE_URL` | `http://0.0.0.0` | The base URL for the application. |
-    | `WWW_PORT` | `8989`           | Port for the Frontend Web UI.     |
-    | `API_PORT` | `8988`           | Port for the Backend API.         |
+4.  **Environment Variables:** Define the environment variables in the Docker Manager UI.
 
 ---
 

docker-compose.yml

@@ -4,26 +4,26 @@ services:
       context: ./backend
     pull_policy: build
     environment:
-      - FILE_STORAGE=/app/uploads
-      - DB_PATH=/app/data/data.db
-      - WEBUI_URL=${BASE_URL}:${WWW_PORT}
+      - FILE_STORAGE=/app/uploads #DO NOT CHANGE, MODIFY THE BINDS
+      - DB_PATH=/app/data/data.db #DO NOT CHANGE, MODIFY THE BINDS
+      - WEBUI_URL=${APP_URL}
     ports:
       - "${API_PORT}:8080"
     volumes:
-      - ./backend/uploads:/app/uploads
-      - ./backend/data:/app/data
+      - ${UPLOAD_PATH}:/app/uploads
+      - ${DATA_PATH}:/app/data
     restart: always
   frontend:
     build:
       context: ./frontend
-      args:
-        - VITE_APP_API=${BASE_URL}:${API_PORT}
-        - VITE_APP_TAG=${SEMVER}
+    environment:
+      - TERA_API_URL=${API_URL}
+      - TERA_APP_URL=${APP_URL}
     pull_policy: build
     volumes:
       - node_modules:/app/node_modules
     ports:
-      - "${WWW_PORT}:5173"
+      - "${APP_PORT}:5173"
     depends_on:
       - backend
     restart: always

frontend/App.tsx

@@ -73,7 +73,7 @@ const App = () => {
   );
   const [importUrl, setImportUrl] = useState("");
   const [importFolderId, setImportFolderId] = useState("");
-
+  const port = import.meta.env.VITE_API_URL;
   // Delete Confirmation State
   const [deleteConfirmState, setDeleteConfirmState] = useState<{
     isOpen: boolean;
@@ -100,7 +100,6 @@ const App = () => {
     };
     fetchData();
   }, []);
-  const port = localStorage.getItem("api-port-override");
 
   // Refresh storage stats when models change (upload, delete, replace)
   useEffect(() => {

frontend/Dockerfile

@@ -1,12 +1,5 @@
 FROM node:22-alpine
 
-# Set env variable
-ARG VITE_APP_API
-ENV VITE_APP_API=$VITE_APP_API
-
-ARG VITE_APP_TAG
-ENV VITE_APP_TAG=$VITE_APP_TAG
-
 WORKDIR /app
 
 COPY package.json .
@@ -19,4 +12,9 @@ RUN npm run build
 
 EXPOSE 5173
 
-CMD [ "npm", "run", "preview" ]
+# Copy the runtime injection script into the container
+COPY env.sh /docker-entrypoint.d/env.sh
+RUN dos2unix /docker-entrypoint.d/env.sh
+RUN chmod +x /docker-entrypoint.d/env.sh
+
+ENTRYPOINT ["/docker-entrypoint.d/env.sh"]

frontend/components/Settings.tsx

@@ -37,7 +37,7 @@ const Settings: React.FC<SettingsProps> = ({ onBack }) => {
   });
 
   const [selectedApiPort, setSelectedApiPort] = useState<string>(() => {
-    const envport = import.meta.env.VITE_APP_API;
+    const envport = import.meta.env.VITE_API_URL;
     const port = localStorage.getItem("api-port-override");
     if (port) {
       setApiPortStatus(true);
@@ -184,8 +184,6 @@ const Settings: React.FC<SettingsProps> = ({ onBack }) => {
               </div>
             </form>
           </div>
-
-
         </div>
       </div>
     </div>

frontend/components/Sidebar.tsx

@@ -36,7 +36,7 @@ import Button from "@mui/material/Button";
 import OutlinedInput from "@mui/material/OutlinedInput";
 import Badge from "@mui/material/Badge";
 
-const APP_TAG = import.meta.env.VITE_APP_TAG || __APP_VERSION__ || "dev";
+const APP_TAG = import.meta.env.VITE_APP_TAG || "dev";
 
 interface SidebarProps {
   folders: Folder[];
@@ -75,7 +75,7 @@ const Sidebar: React.FC<SidebarProps> = ({
   const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
   const [editingId, setEditingId] = useState<string | null>(null);
   const [creatingSubfolderId, setCreatingSubfolderId] = useState<string | null>(
-    null
+    null,
   );
   const [dragTargetId, setDragTargetId] = useState<string | null>(null);
 
@@ -89,7 +89,7 @@ const Sidebar: React.FC<SidebarProps> = ({
       e.preventDefault(); // Prevent text selection
       setIsResizing(true);
     },
-    [isDesktopVariant]
+    [isDesktopVariant],
   );
 
   // Calculate direct counts only (not recursive, matching file system behavior usually)
@@ -297,7 +297,7 @@ const Sidebar: React.FC<SidebarProps> = ({
             onClick={onPlusClick}
             aria-label="select item"
             size="small"
-            sx={{ color: 'grey.300' }}
+            sx={{ color: "grey.300" }}
           >
             <PlusIcon />
           </IconButton>
@@ -306,7 +306,7 @@ const Sidebar: React.FC<SidebarProps> = ({
             aria-label="select item"
             size="small"
             edge="end"
-            sx={{ color: 'grey.300' }}
+            sx={{ color: "grey.300" }}
           >
             <Trash2 />
           </IconButton>
@@ -317,15 +317,15 @@ const Sidebar: React.FC<SidebarProps> = ({
 
   const CustomTreeItem = React.forwardRef(function CustomTreeItem(
     props: TreeItemProps,
-    ref: React.Ref<HTMLLIElement>
+    ref: React.Ref<HTMLLIElement>,
   ) {
     const { interactions, status } = useTreeItemUtils({
       itemId: props.itemId,
       children: props.children,
     });
 
     const handleContentClick: UseTreeItemContentSlotOwnProps["onClick"] = (
-      event
+      event,
     ) => {
       onSelectFolder(props.itemId);
     };

frontend/components/Viewer3D.tsx

@@ -36,7 +36,7 @@ let API_BASE_URL = "";
 if (localStorage.getItem("api-port-override")) {
   API_BASE_URL = localStorage.getItem("api-port-override");
 } else {
-  const url = import.meta.env.VITE_APP_API;
+  const url = import.meta.env.VITE_API_URL;
   API_BASE_URL = url;
 }
 

frontend/env.sh

@@ -0,0 +1,15 @@
+#!/bin/sh
+# Replace placeholders in JS files with actual env vars
+for i in $(env | grep '^TERA_'); do
+  key=$(echo $i | cut -d '=' -f 1)
+  value=$(echo $i | cut -d '=' -f 2-)
+  echo "Replacing static $key with $value"
+  find /app/dist -type f -name '*.js' -exec sed -i "s|${key}|${value}|g" '{}' +
+done
+for i in $(env | grep '^TERA_'); do
+  key=$(echo $i | cut -d '=' -f 1)
+  value=$(echo $i | cut -d '=' -f 2-)
+  echo "Replacing config $key with $value"
+  find /app -type f -name 'vite.config.ts' -exec sed -i "s|${key}|${value}|g" '{}' +
+done
+exec npm run preview