Merge pull request #604 from heckenmann/chore/devcontainer

Chore/devcontainer

.devcontainer/devcontainer.json

@@ -0,0 +1,66 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: /~https://github.com/devcontainers/templates/tree/main/src/javascript-node
+{
+    "name": "devcontainer for docker-swarm-dashboard",
+    // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+    "image": "mcr.microsoft.com/devcontainers/javascript-node:20-bookworm",
+    // Features to add to the dev container. More info: https://containers.dev/features.
+    "features": {
+        "ghcr.io/devcontainers/features/go:1": {
+            "version": "1.23.1"
+        }
+    },
+    // Use 'forwardPorts' to make a list of ports inside the container available locally.
+    "forwardPorts": [
+        3000,
+        3001
+    ],
+    // Use 'postCreateCommand' to run commands after the container is created.
+    "postCreateCommand": "/bin/bash .devcontainer/init.sh",
+    // Configure tool-specific properties.
+    "customizations": {
+        "vscode": {
+            "extensions": [
+                // Go specific extensions:
+                // - Official Go extension for VSCode, supporting IntelliSense, debugging, and code navigation.
+                "golang.go",
+                // - Useful for formatting Go comments, particularly doc comments.
+                "stkb.rewrap",
+                // - Adds support for Go templates, often used in web or CLI development.
+                "formulahendry.go-template",
+                // JavaScript specific extensions:
+                // - Provides JavaScript and TypeScript debugging capabilities for both Node.js and browser environments.
+                "ms-vscode.js-debug",
+                // - Integrates ESLint for JavaScript code linting and ensuring code quality.
+                "dbaeumer.vscode-eslint",
+                // General purpose extensions:
+                // - Highlights TODO comments across your codebase, helpful for task management.
+                "gruntfuggly.todo-tree",
+                // - Manages Docker containers from within VSCode, beneficial for containerized development.
+                "ms-azuretools.vscode-docker",
+                // - Enables development inside containers using VSCode's Remote Development features.
+                "ms-vscode-remote.remote-containers"
+            ]
+        }
+    },
+    // Set environment variables for the container.
+    "containerEnv": {
+    },
+    // Mount volumes to persist data. More info: https://containers.dev/implementors/json_reference/#volume
+    "mounts": [
+        {
+            // - Caches node_modules to speed up installations across container restarts.
+            "source": "node_modules_cache",
+            "target": "${containerWorkspaceFolder}/app-src/node_modules",
+            "type": "volume"
+        },
+        {
+            // - Persists the root user's cache directory to maintain settings and speed up operations.
+            "source": "root_cache",
+            "target": "/root/.cache",
+            "type": "volume"
+        }
+    ],
+    // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+    "remoteUser": "root"
+}

.devcontainer/init.sh

@@ -0,0 +1,11 @@
+set -x
+
+cd app-src
+yarn global add concurrently react-scripts
+yarn install
+
+
+# Cypress
+apt-get update
+apt-get install -y libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libnss3 libxss1 libasound2 libxtst6 xauth xvfb xdg-utils
+yarn cypress install

.gitignore

@@ -25,4 +25,6 @@ docker.png
 
 .idea
 
-*.log
+*.log
+
+.DS_Store

app-src/package.json

@@ -5,17 +5,19 @@
   "dependencies": {},
   "scripts": {
     "start-api-mock": "node mock/api/api-mock.js 3001",
-    "start-dev-server": "react-scripts start",
-    "start": "concurrently \"yarn run start-api-mock\" \"yarn run start-dev-server\"",
+    "start-dev-server": "BROWSER=none react-scripts start",
+    "open-browser": "open http://localhost:3000#base=\"http%3A%2F%2Flocalhost%3A3001%2F\"",
+    "start": "concurrently \"yarn run start-api-mock\" \"yarn run start-dev-server\" \"sleep 2 && yarn run open-browser\"",
     "format": "prettier --write src/**/*.js",
     "postinstall": "node download-files.js",
     "lint": "eslint src",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
-    "cy:open": "cypress open",
-    "cy:run": "cypress run",
-    "cy:spec": "cypress run --spec"
+    "cy:open": "yarn cypress open",
+    "cy:run": "yarn cypress run",
+    "cy:spec": "yarn cypress run --spec",
+    "dev:cy:run": "xvfb-run yarn cypress run"
   },
   "files": [
     {