From 10339fa277ec9aaf3097432b5a4623d9014ab413 Mon Sep 17 00:00:00 2001
From: Harmen Wessels <97173058+harmen-xb@users.noreply.github.com>
Date: Thu, 16 Nov 2023 00:15:32 +0100
Subject: [PATCH] Updated devcontainer with Dockerfile and updated README.

---
 .devcontainer/Dockerfile        | 11 +++++++++
 .devcontainer/devcontainer.json | 44 +++++++++++++++++++++++++++------
 README.md                       |  8 ++++--
 3 files changed, 54 insertions(+), 9 deletions(-)
 create mode 100644 .devcontainer/Dockerfile

diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile
new file mode 100644
index 0000000..d21c617
--- /dev/null
+++ b/.devcontainer/Dockerfile
@@ -0,0 +1,11 @@
+# We use the Node-16 on Debian Bullseye.
+ARG VARIANT="16-bullseye"
+FROM mcr.microsoft.com/devcontainers/typescript-node:0-${VARIANT}
+#FROM mcr.microsoft.com/playwright:v1.37.1-jammy
+
+# Install OS packages needed for building Theia.
+RUN apt-get update \
+    && export DEBIAN_FRONTEND=noninteractive \
+    && apt-get -y install --no-install-recommends \
+    libsecret-1-dev \
+    libxkbfile-dev
\ No newline at end of file
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index 8dbfa27..28fecc3 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -1,18 +1,48 @@
 // Dev-Container for CrossModel.
-// For format details, see https://aka.ms/devcontainer.json.
 {
   "name": "Node.js & TypeScript",
-  // https://github.com/devcontainers/templates/tree/main/src/typescript-node
-  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-16-bullseye",
+  "build": {
+    "dockerfile": "Dockerfile"
+  },
   "features": {
     "ghcr.io/devcontainers/features/python:1": {
       "version": "3.11.4"
     }
   },
-
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "langium.langium-vscode",
+        "esbenp.prettier-vscode",
+        "eamodio.gitlens",
+        "davidanson.vscode-markdownlint",
+        "ms-playwright.playwright",
+        "dbaeumer.vscode-eslint"
+      ]
+    }
+  },
   // Allow port 3000 to be forwarded.
   "forwardPorts": [3000],
-
-  // Install the needed OS libs for building.
-  "postCreateCommand": "sudo apt-get update && sudo apt-get -y install libsecret-1-dev libxkbfile-dev"
+  "portsAttributes": {
+    "3000": {
+      "label": "Theia Backend",
+      "onAutoForward": "openBrowserOnce"
+    }
+  },
+  // Install the playwright dependencies.
+  "postCreateCommand": "yarn playwright install --with-deps",
+  // PlayWright with headed Chromium doesn't seem to work yet wih  the current config.
+  // There are some articales about it being possible:
+  //  - https://playwright.dev/docs/docker
+  //  - https://stackoverflow.com/questions/73092750/how-to-show-gui-apps-from-docker-desktop-container-on-windows-11
+  //  - https://github.com/microsoft/wslg/issues/782
+  // The config below is the current preparation based on the articles above.
+  "containerEnv": { "DISPLAY": ":0" },
+  "mounts": [
+    {
+      "source": "/run/desktop/mnt/host/wslg/.X11-unix",
+      "target": "/tmp/.X11-unix",
+      "type": "bind"
+    }
+  ]
 }
diff --git a/README.md b/README.md
index 6f89813..34ac674 100644
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@ _or:_ launch `Launch CrossModel Electron` configuration from VS code.
 
 ## Example Workspace
 
-Under `examples/workspace` we provide an example workspace with some demo packages containing entities, relationships and system diagrams.
+Under `examples/verdaccio-example/workspace` we provide an example workspace with some demo packages containing entities, relationships and system diagrams.
 Each package represents a dedicated system or library and may depend on other packages.
 
 Using a known package structure - npm in our case - we can re-use large parts of the package management to download dependencies that are not locally available from an external package registry.
@@ -35,7 +35,7 @@ You can start verdaccio using
 
 The local npm registry will be available under `http://localhost:4873/` where we already provide four packages by default.
 
-After opening the workspace, you can install the necessary dependencies in the example workspace by opening a terminal in `examples/workspace` and execute
+After opening the workspace, you can install the necessary dependencies in the example workspace by opening a terminal in `examples/verdaccio-example/workspace` and execute
 
     npm install
 
@@ -65,6 +65,10 @@ Any code changes will be automatically detected and the application will be re-c
 If you only made changes to the frontend or plugins, simply reloading the running application with `F5` is enough.
 If you also made changes to the backend, you can close and restart the appliaction without manual re-compilation.
 
+### Developing in Dev Container
+
+You can work on CrossModel from within a Dev Container. The best way to do so is create a new Dev Container and cloning the repository in there. For instructions please consult [this](https://code.visualstudio.com/docs/devcontainers/containers#_quick-start-open-a-git-repository-or-github-pr-in-an-isolated-container-volume) page.
+
 ## Packaging
 
 To package the application use