Add docker example

Add an example showing how to create a docker image that contains
a Theia-based application with the vscode-trace-extension.

Signed-off-by: Francesco Robino <[email protected]>

Author: frallax

examples/docker/Dockerfile

@@ -0,0 +1,43 @@
+FROM node:18.19.1-bookworm-slim as build
+
+RUN apt-get update && apt-get install -y \
+    git \
+    python3 \
+    make \
+    pkg-config \
+    libsecret-1-dev \
+    g++ \
+    libx11-dev \
+    libxkbfile-dev
+
+# Build the browser trace-extension application
+COPY example-package.json /app/tte/package.json
+COPY webpack.config.js /app/tte/webpack.config.js
+WORKDIR /app/tte/
+RUN yarn && \
+    yarn run download:plugins && \
+    npx theia build --app-target=\"browser\" --mode production && \
+    yarn autoclean --init && \
+    echo *.ts >> .yarnclean && \
+    echo *.ts.map >> .yarnclean && \
+    echo *.spec.* >> .yarnclean && \
+    echo "!@theia/test" >> .yarnclean && \
+    yarn --production && \
+    yarn cache clean && \
+    du -hs /app/tte
+
+FROM node:18.19.1-bookworm-slim
+
+COPY --from=build /app/tte /app/tte
+
+RUN apt-get update && apt-get install -y \
+    libx11-6 \
+    libxkbfile1 \
+    libsecret-1-0 \
+    && rm -rf /var/lib/apt/lists/*
+ENV NODE_ENV production
+
+WORKDIR /app/tte
+COPY docker-entrypoint.sh /usr/local/bin
+EXPOSE 4000
+ENTRYPOINT ["docker-entrypoint.sh"]

examples/docker/README.md

@@ -0,0 +1,40 @@
+# Example docker image for vscode-trace-extension
+
+This folder contains an example showing how to create a docker image
+for vscode-trace-extension front-end.
+
+Notes:
+
+- the image will contain exclusively the trace-extension front-end.
+  If you want to run a complete application, you will need a service
+  running the trace-server (not included here);
+
+- the image will be built using a specific [vsix package] of the
+  trace-extension, and not the latest code in this repo;
+
+- the *example-package.json* file is not named *package.json* because
+  at the time this change was proposed building the trace-extension
+  application from the source of this repo looked recursively to all
+  package.json in the project, and we wanted to avoid pollution of the
+  main project lockfile when building;
+
+## How to build and run
+
+Build the image and name it *tte*.
+
+```bash
+docker build -t tte .
+```
+
+Once the image has been built, start a container named *tte-1* from
+the *tte* image:
+
+```bash
+docker run --name tte-1 --network host tte
+```
+
+Connect to `localhost:4000` your browser.
+You should be able to see the trace-extension UI.
+If it is not visible, click on `View -> Open View... -> Trace Viewer`
+
+[vsix package]: https://open-vsx.org/extension/eclipse-cdt/vscode-trace-extension

examples/docker/docker-entrypoint.sh

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+# @theia/cli not installed, so start the app directly
+node ./src-gen/backend/main.js --hostname 0.0.0.0 --port 4000 --plugins=local-dir:plugins

examples/docker/example-package.json

@@ -0,0 +1,52 @@
+{
+  "private": true,
+  "name": "docker-vscode-trace-example",
+  "version": "0.1.0",
+  "theia": {
+    "target": "browser",
+    "frontend": {
+      "config": {
+        "applicationName": "Theia application with vscode-trace-extension",
+        "preferences": {
+          "editor.autoSave": "on",
+          "trace-viewer.port": 8080
+        }
+      }
+    }
+  },
+  "dependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/material": "^5.10.14",
+    "@theia/core": "1.45.1",
+    "@theia/navigator": "1.45.1",
+    "@theia/preferences": "1.45.1",
+    "@theia/plugin-ext-vscode": "1.45.1"
+  },
+  "devDependencies": {
+    "@theia/cli": "1.45.1"
+  },
+  "scripts": {
+    "download:plugins": "theia download:plugins --rate-limit=15 --parallel=false --ignore-errors"
+  },
+  "engines": {
+    "yarn": ">=1.7.0 <2",
+    "node": ">=16 <19"
+  },
+  "theiaPluginsDir": "plugins",
+  "theiaPlugins": {
+      "vscode-trace-extension": "https://open-vsx.org/api/eclipse-cdt/vscode-trace-extension/0.2.6/file/eclipse-cdt.vscode-trace-extension-0.2.6.vsix"
+  },
+  "resolutions": {
+    "msgpackr": "^1.10.1"
+  },
+  "theiaPluginsExcludeIds": [
+    "ms-vscode.js-debug-companion",
+    "vscode.extension-editing",
+    "vscode.git",
+    "vscode.git-ui",
+    "vscode.github",
+    "vscode.github-authentication",
+    "vscode.microsoft-authentication"
+  ]
+}

examples/docker/webpack.config.js

@@ -0,0 +1,25 @@
+/**
+ * This file can be edited to customize webpack configuration.
+ * To reset delete this file and rerun theia build again.
+ */
+// @ts-check
+const config = require('./gen-webpack.config.js');
+const webpack = require("webpack");
+
+
+/**
+ * Expose bundled modules on window.theia.moduleName namespace, e.g.
+ * window['theia']['@theia/core/lib/common/uri'].
+ * Such syntax can be used by external code, for instance, for testing.
+config.module.rules.push({
+    test: /\.js$/,
+    loader: require.resolve('@theia/application-manager/lib/expose-loader')
+}); */
+
+config[0].plugins.push(new webpack.DefinePlugin({
+  'process.env': {
+    NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
+  }
+}));
+
+module.exports = config;