WIP

# Conflicts:
#	pnpm-lock.yaml

README.md

@@ -131,7 +131,7 @@ Be sure to read the [guide](https://github.com/louislam/dockge/blob/master/CONTR
 
 #### "Dockge"?
 
-"Dockge" is a coinage word which is created by myself. I hope it sounds like `Dodge`.
+"Dockge" is a coinage word which is created by myself. I originally hoped it sounds like `Dodge`, but apparently many people called it `Dockage`, it is also acceptable.
 
 The naming idea came from Twitch emotes like `sadge`, `bedge` or `wokege`. They all end in `-ge`.
 
@@ -148,13 +148,13 @@ Yes, you can. However, you need to move your compose file into the stacks direct
 3. In Dockge, click the " Scan Stacks Folder" button in the top-right corner's dropdown menu
 4. Now you should see your stack in the list
 
-#### Is Dockge a Portainer replcement?
+#### Is Dockge a Portainer replacement?
 
 Yes or no. Portainer provides a lot of Docker features. While Dockge is currently only focusing on docker-compose with a better user interface and better user experience.
 
 If you want to manage your container with docker-compose only, the answer may be yes.
 
-If you still need to manage something like docker networks, signle containers, the answer may be no.
+If you still need to manage something like docker networks, single containers, the answer may be no.
 
 #### Can I install both Dockge and Portainer?
 

backend/check-version.ts

@@ -3,19 +3,16 @@ import compareVersions from "compare-versions";
 import packageJSON from "../package.json";
 import { Settings } from "./settings";
 
-export const obj = {
-    version: packageJSON.version,
-    latestVersion: null,
-};
-export default obj;
-
 // How much time in ms to wait between update checks
 const UPDATE_CHECKER_INTERVAL_MS = 1000 * 60 * 60 * 48;
 const CHECK_URL = "https://dockge.kuma.pet/version";
 
-let interval : NodeJS.Timeout;
+class CheckVersion {
+    version = packageJSON.version;
+    latestVersion? : string;
+    interval? : NodeJS.Timeout;
 
-export function startInterval() {
+    async startInterval() {
         const check = async () => {
             if (await Settings.get("checkUpdate") === false) {
                 return;
@@ -36,13 +33,13 @@ export function startInterval() {
 
                 if (checkBeta && data.beta) {
                     if (compareVersions.compare(data.beta, data.slow, ">")) {
-                    obj.latestVersion = data.beta;
+                        this.latestVersion = data.beta;
                         return;
                     }
                 }
 
                 if (data.slow) {
-                obj.latestVersion = data.slow;
+                    this.latestVersion = data.slow;
                 }
 
             } catch (_) {
@@ -51,21 +48,10 @@ export function startInterval() {
 
         };
 
-    check();
-    interval = setInterval(check, UPDATE_CHECKER_INTERVAL_MS);
-}
-
-/**
- * Enable the check update feature
- * @param value Should the check update feature be enabled?
- * @returns
- */
-export async function enableCheckUpdate(value : boolean) {
-    await Settings.set("checkUpdate", value);
-
-    clearInterval(interval);
-
-    if (value) {
-        startInterval();
+        await check();
+        this.interval = setInterval(check, UPDATE_CHECKER_INTERVAL_MS);
     }
 }
+
+const checkVersion = new CheckVersion();
+export default checkVersion;

backend/docker.ts

@@ -1,3 +0,0 @@
-export class Docker {
-
-}

backend/dockge-server.ts

@@ -308,6 +308,7 @@ export class DockgeServer {
                 this.sendStackList(true);
             });
 
+            checkVersion.startInterval();
         });
 
         gracefulShutdown(this.httpServer, {

backend/socket-handlers/docker-socket-handler.ts

@@ -234,7 +234,7 @@ export class DockerSocketHandler extends SocketHandler {
         socket.on("getDockerNetworkList", async (callback) => {
             try {
                 checkLogin(socket);
-                const dockerNetworkList = server.getDockerNetworkList();
+                const dockerNetworkList = await server.getDockerNetworkList();
                 callback({
                     ok: true,
                     dockerNetworkList,

backend/stack.ts

@@ -297,7 +297,12 @@ export class Stack {
         let res = await childProcessAsync.spawn("docker", [ "compose", "ls", "--all", "--format", "json" ], {
             encoding: "utf-8",
         });
-        let composeList = JSON.parse(res.toString());
+
+        if (!res.stdout) {
+            return statusList;
+        }
+
+        let composeList = JSON.parse(res.stdout.toString());
 
         for (let composeStack of composeList) {
             statusList.set(composeStack.Name, this.statusConvert(composeStack.Status));

backend/util-common.ts

@@ -1,13 +1,17 @@
 /*
  * Common utilities for backend and frontend
  */
-import { Document } from "yaml";
+import yaml, { Document, Pair, Scalar } from "yaml";
+import { DotenvParseOutput } from "dotenv";
 
 // Init dayjs
 import dayjs from "dayjs";
 import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 import relativeTime from "dayjs/plugin/relativeTime";
+// @ts-ignore
+import { replaceVariablesSync } from "@inventage/envsubst";
+
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(relativeTime);
@@ -340,3 +344,48 @@ export function parseDockerPort(input : string, defaultHostname : string = "loca
         display: display,
     };
 }
+
+export function envsubst(string : string, variables : LooseObject) : string {
+    return replaceVariablesSync(string, variables)[0];
+}
+
+/**
+ * Traverse all values in the yaml and for each value, if there are template variables, replace it environment variables
+ * Emulates the behavior of how docker-compose handles environment variables in yaml files
+ * @param content Yaml string
+ * @param env Environment variables
+ * @returns string Yaml string with environment variables replaced
+ */
+export function envsubstYAML(content : string, env : DotenvParseOutput) : string {
+    const doc = yaml.parseDocument(content);
+    if (doc.contents) {
+        // @ts-ignore
+        for (const item of doc.contents.items) {
+            traverseYAML(item, env);
+        }
+    }
+    return doc.toString();
+}
+
+/**
+ * Used for envsubstYAML(...)
+ * @param pair
+ * @param env
+ */
+function traverseYAML(pair : Pair, env : DotenvParseOutput) : void {
+    // @ts-ignore
+    if (pair.value && pair.value.items) {
+        // @ts-ignore
+        for (const item of pair.value.items) {
+            if (item instanceof Pair) {
+                traverseYAML(item, env);
+            } else if (item instanceof Scalar) {
+                item.value = envsubst(item.value, env);
+            }
+        }
+    // @ts-ignore
+    } else if (pair.value && typeof(pair.value.value) === "string") {
+        // @ts-ignore
+        pair.value.value = envsubst(pair.value.value, env);
+    }
+}

extra/build-windows.ts

@@ -0,0 +1,92 @@
+import fsAsync from "fs/promises";
+import unzipper from "unzipper";
+import stream from "node:stream";
+import { fileExists } from "../backend/util-server";
+
+const version = process.env.VERSION;
+
+if (!version) {
+    console.error("VERSION env not set");
+    process.exit(1);
+}
+
+const output = `./private/build/dockgen-${version}-win-x64.zip`;
+
+if (await fileExists(output)) {
+    console.error(`${output} already exists`);
+    process.exit(1);
+}
+
+console.log(`Building ${output}`);
+
+const nodeVersion = "18.17.1";
+const buildPath = "./private/build/windows";
+const nodePath = `${buildPath}/node`;
+const nodeTempPath = `${buildPath}/node-v${nodeVersion}-win-x64`;
+const corePath = `${buildPath}/core`;
+
+// Clear
+await fsAsync.rm(`${buildPath}/dockge-${version}`, {
+    recursive: true,
+    force: true
+});
+
+await fsAsync.rm(corePath, {
+    recursive: true,
+    force: true
+});
+
+// mkdir
+await fsAsync.mkdir(buildPath, {
+    recursive: true
+});
+
+// Download Node.js if not exists
+// Download,pipe to unzipper and extract to nodePath
+if (!await fileExists(nodePath)) {
+    console.log(`Downloading Node.js ${nodeVersion}`);
+
+    try {
+        await download(`https://nodejs.org/dist/v${nodeVersion}/node-v${nodeVersion}-win-x64.zip`);
+        // Rename folder
+        await fsAsync.rename(nodeTempPath, nodePath);
+    } catch (e) {
+        if (e instanceof Error) {
+            console.error(e.message);
+        }
+        process.exit(1);
+    }
+} else {
+    console.log(`Node.js ${nodeVersion} already exists, skipping download`);
+}
+
+// Download Dockge from GitHub
+console.log(`Downloading Dockge ${version} from GitHub`);
+
+try {
+    await download(`https://github.com/louislam/dockge/archive/refs/tags/${version}.zip`);
+    // Rename folder
+    await fsAsync.rename(`${buildPath}/dockge-${version}`, corePath);
+} catch (e) {
+    if (e instanceof Error) {
+        console.error(e.message);
+    }
+    process.exit(1);
+}
+
+function download(url : string) {
+    return new Promise((resolve, reject) => {
+        fetch(url).then((res) => {
+            if (res.body) {
+                // @ts-ignore
+                stream.Readable.fromWeb(res.body)
+                    .pipe(unzipper.Extract({
+                        path: buildPath,
+                    }))
+                    .on("close", resolve);
+            } else {
+                reject(new Error(`Unable to download ${url}`));
+            }
+        });
+    });
+}

frontend/src/components/Container.vue

@@ -9,7 +9,7 @@
                 <div v-if="!isEditMode">
                     <span class="badge me-1" :class="bgStyle">{{ status }}</span>
 
-                    <a v-for="port in service.ports" :key="port" :href="parsePort(port).url" target="_blank">
+                    <a v-for="port in envsubstService.ports" :key="port" :href="parsePort(port).url" target="_blank">
                         <span class="badge me-1 bg-secondary">{{ parsePort(port).display }}</span>
                     </a>
                 </div>
@@ -213,16 +213,29 @@ export default defineComponent({
         jsonObject() {
             return this.$parent.$parent.jsonConfig;
         },
+
+        envsubstJSONConfig() {
+            return this.$parent.$parent.envsubstJSONConfig;
+        },
+
+        envsubstService() {
+            if (!this.envsubstJSONConfig.services[this.name]) {
+                return {};
+            }
+            return this.envsubstJSONConfig.services[this.name];
+        },
+
         imageName() {
-            if (this.service.image) {
-                return this.service.image.split(":")[0];
+            if (this.envsubstService.image) {
+                return this.envsubstService.image.split(":")[0];
             } else {
                 return "";
             }
         },
+
         imageTag() {
-            if (this.service.image) {
-                let tag = this.service.image.split(":")[1];
+            if (this.envsubstService.image) {
+                let tag = this.envsubstService.image.split(":")[1];
 
                 if (tag) {
                     return tag;

frontend/src/i18n.ts

@@ -39,7 +39,7 @@ for (let lang in languageList) {
     };
 }
 
-const rtlLangs = [ "fa", "ar-SY", "ur" ];
+const rtlLangs = [ "fa", "ar-SY", "ur", "ar" ];
 
 export const currentLocale = () => localStorage.locale
     || languageList[navigator.language] && navigator.language

frontend/src/lang/en.json

@@ -98,5 +98,6 @@
     "reconnecting...": "Reconnecting…",
     "connecting...": "Connecting to the socket server…",
     "url": "URL | URLs",
-    "extra": "Extra"
+    "extra": "Extra",
+    "newUpdate": "New Update"
 }

frontend/src/layouts/Layout.vue

@@ -16,8 +16,8 @@
                 <span class="fs-4 title">Dockge</span>
             </router-link>
 
-            <a v-if="hasNewVersion" target="_blank" href="https://github.com/louislam/dockge/releases" class="btn btn-info me-3">
-                <font-awesome-icon icon="arrow-alt-circle-up" /> {{ $t("New Update") }}
+            <a v-if="hasNewVersion" target="_blank" href="https://github.com/louislam/dockge/releases" class="btn btn-warning me-3">
+                <font-awesome-icon icon="arrow-alt-circle-up" /> {{ $t("newUpdate") }}
             </a>
 
             <ul class="nav nav-pills">

frontend/src/pages/Compose.vue

@@ -231,7 +231,7 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import {
     COMBINED_TERMINAL_COLS,
     COMBINED_TERMINAL_ROWS,
-    copyYAMLComments,
+    copyYAMLComments, envsubstYAML,
     getCombinedTerminalName,
     getComposeTerminalName,
     PROGRESS_TERMINAL_ROWS,
@@ -239,6 +239,7 @@ import {
 } from "../../../backend/util-common";
 import { BModal } from "bootstrap-vue-next";
 import NetworkInput from "../components/NetworkInput.vue";
+import dotenv from "dotenv";
 
 const template = `version: "3.8"
 services:
@@ -277,6 +278,7 @@ export default {
         return {
             editorFocus: false,
             jsonConfig: {},
+            envsubstJSONConfig: {},
             yamlError: "",
             processing: true,
             showProgressTerminal: false,
@@ -297,12 +299,12 @@ export default {
     computed: {
 
         urls() {
-            if (!this.jsonConfig["x-dockge"] || !this.jsonConfig["x-dockge"].urls || !Array.isArray(this.jsonConfig["x-dockge"].urls)) {
+            if (!this.envsubstJSONConfig["x-dockge"] || !this.envsubstJSONConfig["x-dockge"].urls || !Array.isArray(this.envsubstJSONConfig["x-dockge"].urls)) {
                 return [];
             }
 
             let urls = [];
-            for (const url of this.jsonConfig["x-dockge"].urls) {
+            for (const url of this.envsubstJSONConfig["x-dockge"].urls) {
                 let display;
                 try {
                     let obj = new URL(url);
@@ -372,6 +374,17 @@ export default {
             },
             deep: true,
         },
+
+        "stack.composeENV": {
+            handler() {
+                if (this.editorFocus) {
+                    console.debug("env code changed");
+                    this.yamlCodeChange();
+                }
+            },
+            deep: true,
+        },
+
         jsonConfig: {
             handler() {
                 if (!this.editorFocus) {
@@ -622,7 +635,7 @@ export default {
                         greedy: true
                     },
                     "keyword": {
-                        pattern: /^[^ :=]*(?=[:=])/m,
+                        pattern: /^\w*(?=[:=])/m,
                         greedy: true
                     },
                     "value": {
@@ -645,9 +658,8 @@ export default {
             return highlight(code, languages.docker_env);
         },
 
-        yamlCodeChange() {
-            try {
-                let doc = parseDocument(this.stack.composeYAML);
+        yamlToJSON(yaml) {
+            let doc = parseDocument(yaml);
             if (doc.errors.length > 0) {
                 throw doc.errors[0];
             }
@@ -664,9 +676,23 @@ export default {
                 throw new Error("Services must be an object");
             }
 
+            return {
+                config,
+                doc,
+            };
+        },
+
+        yamlCodeChange() {
+            try {
+                let { config, doc } = this.yamlToJSON(this.stack.composeYAML);
+
                 this.yamlDoc = doc;
                 this.jsonConfig = config;
 
+                let env = dotenv.parse(this.stack.composeENV);
+                let envYAML = envsubstYAML(this.stack.composeYAML, env);
+                this.envsubstJSONConfig = this.yamlToJSON(envYAML).config;
+
                 clearTimeout(yamlErrorTimeout);
                 this.yamlError = "";
             } catch (e) {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "dockge",
-    "version": "1.3.0",
+    "version": "1.3.2",
     "type": "module",
     "engines": {
         "node": ">= 18.0.0 && <= 18.17.1"
@@ -10,13 +10,15 @@
         "lint": "eslint \"**/*.{ts,vue}\"",
         "check-ts": "tsc --noEmit",
         "start": "tsx ./backend/index.ts",
+        "dev": "concurrently -k -r \"wait-on tcp:5000 && pnpm run dev:backend \" \"pnpm run dev:frontend\"",
         "dev:backend": "cross-env NODE_ENV=development tsx watch --inspect ./backend/index.ts",
         "dev:frontend": "cross-env NODE_ENV=development vite --host --config ./frontend/vite.config.ts",
-        "release-final": "tsx ./extra/test-docker.ts && tsx extra/update-version.ts && pnpm run build:frontend && npm run build:docker",
+        "release-final": "tsx ./extra/test-docker.ts && tsx extra/update-version.ts && pnpm run build:frontend && pnpm run build:docker",
         "build:frontend": "vite build --config ./frontend/vite.config.ts",
         "build:docker-base": "docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/dockge:base -f ./docker/Base.Dockerfile . --push",
         "build:docker": "node ./extra/env2arg.js docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/dockge:latest -t louislam/dockge:1 -t louislam/dockge:$VERSION --target release -f ./docker/Dockerfile . --push",
         "build:docker-nightly": "pnpm run build:frontend && docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/dockge:nightly --target nightly -f ./docker/Dockerfile . --push",
+        "build:windows": "tsx ./extra/build-windows.ts",
         "build:healthcheck": "docker buildx build -f docker/BuildHealthCheck.Dockerfile --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/dockge:build-healthcheck . --push",
         "start-docker": "docker run --rm -p 5001:5001 --name dockge louislam/dockge:latest",
         "mark-as-nightly": "tsx ./extra/mark-as-nightly.ts",
@@ -24,7 +26,8 @@
         "reset-password": "tsx ./extra/reset-password.ts"
     },
     "dependencies": {
-        "@homebridge/node-pty-prebuilt-multiarch": "~0.11.11",
+        "@homebridge/node-pty-prebuilt-multiarch": "~0.11.12",
+        "@inventage/envsubst": "^0.16.0",
         "@louislam/sqlite3": "~15.1.6",
         "bcryptjs": "~2.4.3",
         "check-password-strength": "~2.0.7",
@@ -41,34 +44,37 @@
         "jwt-decode": "~3.1.2",
         "knex": "~2.5.1",
         "limiter-es6-compat": "~2.1.2",
-        "mysql2": "~3.6.3",
+        "mysql2": "~3.6.5",
+        "node-windows": "1.0.0-beta.8",
         "promisify-child-process": "~4.1.2",
         "redbean-node": "~0.3.3",
         "socket.io": "~4.7.2",
         "socket.io-client": "~4.7.2",
         "timezones-list": "~3.0.2",
         "ts-command-line-args": "~2.5.1",
-        "tsx": "~3.14.0",
+        "tsx": "~4.6.2",
         "type-fest": "~4.3.3",
         "yaml": "~2.3.4"
     },
     "devDependencies": {
         "@actions/github": "^6.0.0",
-        "@fontsource/jetbrains-mono": "^5.0.17",
+        "@fontsource/jetbrains-mono": "^5.0.18",
         "@fortawesome/fontawesome-svg-core": "6.4.2",
         "@fortawesome/free-regular-svg-icons": "6.4.2",
         "@fortawesome/free-solid-svg-icons": "6.4.2",
         "@fortawesome/vue-fontawesome": "3.0.3",
         "@types/bcryptjs": "^2.4.6",
-        "@types/bootstrap": "~5.2.9",
+        "@types/bootstrap": "~5.2.10",
         "@types/command-exists": "~1.2.3",
         "@types/express": "~4.17.21",
         "@types/jsonwebtoken": "~9.0.5",
+        "@types/unzipper": "^0.10.9",
         "@typescript-eslint/eslint-plugin": "~6.8.0",
         "@typescript-eslint/parser": "~6.8.0",
-        "@vitejs/plugin-vue": "~4.5.0",
+        "@vitejs/plugin-vue": "~4.5.2",
         "bootstrap": "5.3.2",
         "bootstrap-vue-next": "~0.14.10",
+        "concurrently": "^8.2.2",
         "cross-env": "~7.0.3",
         "eslint": "~8.50.0",
         "eslint-plugin-jsdoc": "~46.8.2",
@@ -77,15 +83,17 @@
         "sass": "~1.68.0",
         "typescript": "~5.2.2",
         "unplugin-vue-components": "~0.25.2",
-        "vite": "~5.0.0",
+        "unzipper": "^0.10.14",
+        "vite": "~5.0.7",
         "vite-plugin-compression": "~0.5.1",
-        "vue": "~3.3.8",
+        "vue": "~3.3.11",
         "vue-eslint-parser": "~9.3.2",
         "vue-i18n": "~9.5.0",
         "vue-prism-editor": "2.0.0-alpha.2",
         "vue-qrcode": "~2.2.0",
         "vue-router": "~4.2.5",
         "vue-toastification": "2.0.0-rc.5",
+        "wait-on": "^7.2.0",
         "xterm": "5.4.0-beta.37",
         "xterm-addon-web-links": "~0.9.0"
     }