diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile new file mode 100644 index 00000000..d21c6171 --- /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 8dbfa276..28fecc3e 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 6f898139..34ac6744 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