Initial commit. Completed basic functionality but needs a lot of clea…

…nup. Especially the view which need to be published as a module at some point

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

Dockerfile

@@ -0,0 +1,18 @@
+FROM node:22-slim
+
+RUN apt-get update && apt-get install -y curl --no-install-recommends && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+COPY package.json /app/package.json
+COPY package-lock.json /app/package-lock.json
+
+RUN npm install
+
+COPY . /app
+
+CMD ["npm", "run", "dev"]
+
+HEALTHCHECK --interval=5s --timeout=5s --start-period=1s --retries=15 CMD curl -f http://localhost:3000/api/healthz || exit 1
+
+EXPOSE 80

Dockerfile.x11

@@ -0,0 +1,17 @@
+FROM ubuntu:latest
+
+RUN apt-get update && apt-get install -y \
+    xvfb \
+    x11vnc \
+    x11-apps \
+    xterm \
+    fluxbox \
+    && rm -rf /var/lib/apt/lists/*
+
+ENV DISPLAY=:1
+EXPOSE 5900
+
+CMD rm -f /tmp/.X*-lock && \
+    Xvfb ${DISPLAY} -screen 0 1024x768x16 & \
+    fluxbox & \
+    x11vnc -shared -forever -display ${DISPLAY} -rfbport 5900 -nopw -xkb -verbose -noxrecord -noxfixes -noxdamage

Dockerfile.x11-secured

@@ -0,0 +1,21 @@
+FROM ubuntu:latest
+
+RUN apt-get update && apt-get install -y \
+    xvfb \
+    x11vnc \
+    x11-apps \
+    xterm \
+    fluxbox \
+    && rm -rf /var/lib/apt/lists/*
+
+# Create a password file for x11vnc
+RUN mkdir -p /etc/x11vnc \
+    && x11vnc -storepasswd 1234 /etc/x11vnc/passwd
+
+ENV DISPLAY=:1
+EXPOSE 5900
+
+CMD rm -f /tmp/.X*-lock && \
+    Xvfb ${DISPLAY} -screen 0 1024x768x16 & \
+    fluxbox & \
+    x11vnc -shared -forever -display ${DISPLAY} -rfbport 5900 -rfbauth /etc/x11vnc/passwd -xkb -verbose -noxrecord -noxfixes -noxdamage

README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

app.js

@@ -0,0 +1,90 @@
+const net = require("net");
+const express = require("express");
+const next = require("next");
+const { parse } = require("url");
+const { WebSocketServer } = require("ws");
+
+const app = express();
+
+const dev = process.env.NODE_ENV !== "production";
+const nextApp = next({ dev });
+
+nextApp.prepare().then(() => {
+    const ws = new WebSocketServer({ noServer: true });
+
+    app.use((req, res) => {
+        nextApp.getRequestHandler()(req, res, parse(req.url, true));
+    });
+
+    let server;
+    const start = () => {
+        server = app.listen(3000, "0.0.0.0", () => {
+            console.log("Server is running on port 3000");
+        });
+    };
+
+    const stop = () => {
+        server.close();
+    };
+
+    process.on("SIGTERM", stop);
+
+    start();
+
+    server.on("upgrade", (req, socket, head) => {
+        console.log('Upgrade request received', req.url);
+        const { pathname } = parse(req.url || "/", true);
+
+        if (pathname === "/_next/webpack-hmr") {
+            nextApp.getUpgradeHandler()(req, socket, head);
+        }
+
+        if (pathname === "/api/socket") {
+            ws.handleUpgrade(req, socket, head, (socket) => {
+                console.log('Client connected to WebSocket server', req.url);
+
+                const params = new URLSearchParams(req.url.split('?')[1]);
+                const host = params.get('host');
+                const port = params.get('port');
+
+                if (!host || !port) {
+                    console.error('Host or port not provided');
+                    socket.close();
+                    return;
+                }
+
+                const vncSocket = new net.Socket();
+
+                vncSocket.connect(port, host, () => {
+                    console.log(`Connected to VNC server at ${host}:${port}`);
+
+                    socket.on('message', (data) => {
+                        try {
+                            vncSocket.write(data);
+                        } catch (error) {
+                            console.error('Failed to parse message from client', error);
+                        }
+                    });
+
+                    vncSocket.on('data', (data) => {
+                        try {
+                            socket.send(data);
+                        } catch (error) {
+                            console.error('Failed to send message to client', error);
+                        }
+                    });
+
+                    socket.on('close', () => {
+                        console.log('Client disconnected from WebSocket server');
+                        vncSocket.end();
+                    });
+                });
+
+                vncSocket.on('close', () => {
+                    console.log('Disconnected from VNC server');
+                    socket.close();
+                });
+            });
+        }
+    });
+});

docker-compose.yaml

@@ -0,0 +1,52 @@
+services:
+  x11-test:
+    build:
+      context: .
+      dockerfile: Dockerfile.x11
+    environment:
+      - VSCODE_KEYRING_PASS=1234
+    ports:
+      - "5926:5900"
+    volumes:
+      - "/var/run/docker.sock:/var/run/docker.sock"
+    labels:
+      - "x11.viewable=true"
+  x11-test2:
+    build:
+      context: .
+      dockerfile: Dockerfile.x11-secured
+    environment:
+      - VSCODE_KEYRING_PASS=1234
+    volumes:
+      - "/var/run/docker.sock:/var/run/docker.sock"
+    labels:
+      - "x11.viewable=true"
+  x11-test3:
+    build:
+      context: .
+      dockerfile: Dockerfile.x11
+    environment:
+      - VSCODE_KEYRING_PASS=1234
+    volumes:
+      - "/var/run/docker.sock:/var/run/docker.sock"
+    labels:
+      - "x11.viewable=true"
+  x11-test4:
+    build:
+      context: .
+      dockerfile: Dockerfile.x11-secured
+    environment:
+      - VSCODE_KEYRING_PASS=1234
+    volumes:
+      - "/var/run/docker.sock:/var/run/docker.sock"
+    labels:
+      - "x11.viewable=true"
+
+  viewer:
+    build: .
+    volumes:
+      - "/var/run/docker.sock:/var/run/docker.sock"
+    environment:
+      - WEBSOCKET_HOST=localhost:3030
+    ports:
+      - "3030:3000"

jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

next.config.mjs

@@ -0,0 +1,5 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+};
+
+export default nextConfig;