wip

.dockerignore

@@ -1,8 +1,6 @@
 # Should be identical to .gitignore
 .env
 node_modules
-dist
-frontend-dist
 .idea
 data
 tmp

README.md

@@ -13,10 +13,29 @@ A fancy, easy-to-use and reactive docker stack (`docker-compose.yml`) manager.
 - Interactive web terminal for containers and any docker commands
 - Reactive - Everything is just responsive. Progress and terminal output are in real-time
 - Easy-to-use & fancy UI - If you love Uptime Kuma's UI/UX, you will love this too
-- Build on top of [Compose V2](https://docs.docker.com/compose/migrate/), as known as `compose.yaml` and `docker compose`
 - Convert `docker run ...` command into `docker-compose.yml` file
 
-## Installation
+## 🔧 How to Install
+
+1. Create a directory `./dockge/`
+1. Create a `compose.yaml` inside `./dockge` file with the following content:
+
+```yaml
+version: "3.8"
+services:
+  dockge:
+    image: louislam/dockge:nightly
+    ports:
+      - 5001:5001
+    volumes:
+      - ./data:/app/data
+      - /var/run/docker.sock:/var/run/docker.sock
+```
+
+2. `cd ./dockge/`
+3. `docker-compose up -d`
+
+Dockge is now running on http://localhost:5001
 
 ## Motivations
 

backend/stack.ts

@@ -310,7 +310,7 @@ export class Stack {
 
     async joinCombinedTerminal(socket: DockgeSocket) {
         const terminalName = getCombinedTerminalName(this.name);
-        const terminal = Terminal.getOrCreateTerminal(this.server, terminalName, "docker", [ "compose", "logs", "-f" ], this.path);
+        const terminal = Terminal.getOrCreateTerminal(this.server, terminalName, "docker", [ "compose", "logs", "-f", "--tail", "100" ], this.path);
         terminal.rows = COMBINED_TERMINAL_ROWS;
         terminal.cols = COMBINED_TERMINAL_COLS;
         terminal.join(socket);

backend/util-common.ts

@@ -1,6 +1,7 @@
 /*
  * Common utilities for backend and frontend
  */
+import { Document } from "yaml";
 
 // Init dayjs
 import dayjs from "dayjs";
@@ -11,20 +12,21 @@ dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(relativeTime);
 
-import { parseDocument, Document } from "yaml";
-
 let randomBytes : (numBytes: number) => Uint8Array;
+initRandomBytes();
 
-if (typeof window !== "undefined" && window.crypto) {
-    randomBytes = function randomBytes(numBytes: number) {
-        const bytes = new Uint8Array(numBytes);
-        for (let i = 0; i < numBytes; i += 65536) {
-            window.crypto.getRandomValues(bytes.subarray(i, i + Math.min(numBytes - i, 65536)));
-        }
-        return bytes;
-    };
-} else {
-    randomBytes = (await import("node:crypto")).randomBytes;
+async function initRandomBytes() {
+    if (typeof window !== "undefined" && window.crypto) {
+        randomBytes = function randomBytes(numBytes: number) {
+            const bytes = new Uint8Array(numBytes);
+            for (let i = 0; i < numBytes; i += 65536) {
+                window.crypto.getRandomValues(bytes.subarray(i, i + Math.min(numBytes - i, 65536)));
+            }
+            return bytes;
+        };
+    } else {
+        randomBytes = (await import("node:crypto")).randomBytes;
+    }
 }
 
 // Stack Status

compose.yaml

@@ -0,0 +1,10 @@
+# docker run -d --name dockge -p 5001:5001 -v dockge:/app/data -v /var/run/docker.sock:/var/run/docker.sock --restart=always louislam/dockge:nightly
+version: "3.8"
+services:
+  dockge:
+    image: louislam/dockge:nightly
+    ports:
+      - 5001:5001
+    volumes:
+      - ./data:/app/data
+      - /var/run/docker.sock:/var/run/docker.sock

docker/Dockerfile

@@ -1,11 +1,12 @@
 ############################################
 # ⭐ Main Image
 ############################################
-FROM louislam/dockge:base
+FROM louislam/dockge:base AS release
 WORKDIR /app
 COPY --chown=node:node  . .
 RUN pnpm install --prod --frozen-lockfile && \
-    mkdir ./data \
+    mkdir ./data
+
 VOLUME /app/data
 EXPOSE 5001
 ENTRYPOINT ["/usr/bin/dumb-init", "--"]

frontend/components.d.ts

@@ -8,31 +8,20 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     About: typeof import('./src/components/settings/About.vue')['default']
-    APIKeys: typeof import('./src/components/settings/APIKeys.vue')['default']
     Appearance: typeof import('./src/components/settings/Appearance.vue')['default']
     ArrayInput: typeof import('./src/components/ArrayInput.vue')['default']
-    ArrayInputWithOptions: typeof import('./src/components/ArrayInputWithOptions.vue')['default']
-    Backup: typeof import('./src/components/settings/Backup.vue')['default']
-    BButton: typeof import('bootstrap-vue-next')['BButton']
     BModal: typeof import('bootstrap-vue-next')['BModal']
     Confirm: typeof import('./src/components/Confirm.vue')['default']
     Container: typeof import('./src/components/Container.vue')['default']
-    ContainerDialog: typeof import('./src/components/ContainerDialog.vue')['default']
-    Docker: typeof import('./src/components/settings/Docker.vue')['default']
     General: typeof import('./src/components/settings/General.vue')['default']
     HiddenInput: typeof import('./src/components/HiddenInput.vue')['default']
     Login: typeof import('./src/components/Login.vue')['default']
-    MonitorHistory: typeof import('./src/components/settings/MonitorHistory.vue')['default']
     NetworkInput: typeof import('./src/components/NetworkInput.vue')['default']
-    Notifications: typeof import('./src/components/settings/Notifications.vue')['default']
-    Proxies: typeof import('./src/components/settings/Proxies.vue')['default']
-    ReverseProxy: typeof import('./src/components/settings/ReverseProxy.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Security: typeof import('./src/components/settings/Security.vue')['default']
     StackList: typeof import('./src/components/StackList.vue')['default']
     StackListItem: typeof import('./src/components/StackListItem.vue')['default']
-    Tags: typeof import('./src/components/settings/Tags.vue')['default']
     Terminal: typeof import('./src/components/Terminal.vue')['default']
     TwoFADialog: typeof import('./src/components/TwoFADialog.vue')['default']
     Uptime: typeof import('./src/components/Uptime.vue')['default']

frontend/src/main.ts

@@ -1,5 +1,5 @@
 // Dayjs init inside this, so it has to be the first import
-await import("../../backend/util-common");
+import "../../backend/util-common";
 
 import { createApp, defineComponent, h } from "vue";
 import App from "./App.vue";

package.json

@@ -9,7 +9,7 @@
         "dev:backend": "cross-env NODE_ENV=development tsx watch ./backend/index.ts",
         "dev:frontend": "cross-env NODE_ENV=development vite --host --config ./frontend/vite.config.ts",
         "build:frontend": "vite build --config ./frontend/vite.config.ts",
-        "build:docker-base": "docker build -t louislam/dockge:base -f ./docker/Base.Dockerfile .",
+        "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": "pnpm run build:frontend && docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/dockge:latest -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",
         "start-docker": "docker run --rm -p 5001:5001 --name dockge louislam/dockge:latest",