Create Browser Application and Dockerfile #75

* create a dedicated browser application * adapt product so that frontend code is useable from browser app as well * move electron:rebuild to laters stage to avoid conflicts between both applications * Create Dockerfile with Github Workflow and adapt Readme Signed-off-by: Johannes Faltermeier <jfaltermeier@eclipsesource.com>
eclipse-theia · Feb 2, 2023 · cfc0dcb · cfc0dcb
1 parent 11d6439
commit cfc0dcb
Show file tree

Hide file tree

Showing 9 changed files with 300 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -95,3 +95,17 @@ yarn electron test
 
 The features in Eclipse Theia Blueprint are based on Theia and the included extensions/plugins. For bugs in Theia please consider opening an issue in the [Theia project on Github](https://github.com/eclipse-theia/theia/issues/new/choose).
 Eclipse Theia Blueprint only packages existing functionality into a product and installers for the product. If you believe there is a mistake in packaging, something needs to be added to the packaging or the installers do not work properly, please [open an issue on Github](https://github.com/eclipse-theia/theia-blueprint/issues/new/choose) to let us know.
+
+### Docker Build
+
+You can create a Docker Image for Blueprint with the following build command:
+
+```sh
+docker build -t theia-blueprint -f browser.Dockerfile .
+```
+
+You may then run this with
+
+```sh
+docker run -p=3000:3000 --rm theia-blueprint
+```
diff --git a/applications/browser/package.json b/applications/browser/package.json
@@ -0,0 +1,124 @@
+{
+  "private": true,
+  "name": "theia-blueprint-browser",
+  "description": "Eclipse Theia blueprint browser product",
+  "productName": "Theia Blueprint",
+  "version": "1.34.0",
+  "license": "EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0",
+  "author": "Eclipse Theia <theia-dev@eclipse.org>",
+  "homepage": "https://github.com/eclipse-theia/theia-blueprint#readme",
+  "bugs": {
+    "url": "https://github.com/eclipse-theia/theia/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/eclipse-theia/theia-blueprint.git"
+  },
+  "engines": {
+    "yarn": ">=1.7.0 <2",
+    "node": ">=12.14.1"
+  },
+  "theia": {
+    "frontend": {
+      "config": {
+        "applicationName": "Theia Blueprint",
+        "preferences": {
+          "toolbar.showToolbar": true,
+          "files.enableTrash": false
+        }
+      }
+    },
+    "backend": {
+      "config": {
+        "startupTimeout": -1,
+        "resolveSystemPlugins": false
+      }
+    },
+    "generator": {
+      "config": {
+        "preloadTemplate": "./resources/preload.html"
+      }
+    }
+  },
+  "dependencies": {
+    "@theia/bulk-edit": "1.34.0",
+    "@theia/callhierarchy": "1.34.0",
+    "@theia/console": "1.34.0",
+    "@theia/core": "1.34.0",
+    "@theia/debug": "1.34.0",
+    "@theia/editor": "1.34.0",
+    "@theia/editor-preview": "1.34.0",
+    "@theia/external-terminal": "1.34.0",
+    "@theia/file-search": "1.34.0",
+    "@theia/filesystem": "1.34.0",
+    "@theia/getting-started": "1.34.0",
+    "@theia/git": "1.34.0",
+    "@theia/keymaps": "1.34.0",
+    "@theia/markers": "1.34.0",
+    "@theia/messages": "1.34.0",
+    "@theia/memory-inspector": "1.34.0",
+    "@theia/metrics": "1.34.0",
+    "@theia/mini-browser": "1.34.0",
+    "@theia/monaco": "1.34.0",
+    "@theia/navigator": "1.34.0",
+    "@theia/outline-view": "1.34.0",
+    "@theia/output": "1.34.0",
+    "@theia/plugin-dev": "1.34.0",
+    "@theia/plugin-ext": "1.34.0",
+    "@theia/plugin-ext-vscode": "1.34.0",
+    "@theia/preferences": "1.34.0",
+    "@theia/process": "1.34.0",
+    "@theia/property-view": "1.34.0",
+    "@theia/scm": "1.34.0",
+    "@theia/scm-extra": "1.34.0",
+    "@theia/search-in-workspace": "1.34.0",
+    "@theia/task": "1.34.0",
+    "@theia/terminal": "1.34.0",
+    "@theia/timeline": "1.34.0",
+    "@theia/toolbar": "1.34.0",
+    "@theia/typehierarchy": "1.34.0",
+    "@theia/userstorage": "1.34.0",
+    "@theia/variable-resolver": "1.34.0",
+    "@theia/vsx-registry": "1.34.0",
+    "@theia/workspace": "1.34.0",
+    "fs-extra": "^9.0.1",
+    "theia-blueprint-updater": "1.34.0",
+    "theia-blueprint-product": "1.34.0"
+  },
+  "devDependencies": {
+    "@theia/cli": "1.34.0"
+  },
+  "scripts": {
+    "prepare": "yarn build && yarn download:plugins",
+    "clean": "theia clean && rimraf node_modules",
+    "build": "yarn -s compile && yarn -s bundle",
+    "bundle": "theia build",
+    "compile": "tsc -b",
+    "rebuild": "theia rebuild:browser --cacheRoot ../..",
+    "start": "yarn -s rebuild && theia start --plugins=local-dir:./plugins",
+    "watch": "concurrently --kill-others -n tsc,bundle -c red,yellow \"tsc -b -w --preserveWatchOutput\" \"yarn -s watch:bundle\"",
+    "download:plugins": "theia download:plugins"
+  },
+  "theiaPluginsDir": "plugins",
+  "theiaPlugins": {
+    "vscode.git": "https://open-vsx.org/api/vscode/git/1.52.1/file/vscode.git-1.52.1.vsix",
+    "vscode-builtin-extensions-pack": "https://open-vsx.org/api/eclipse-theia/builtin-extension-pack/1.50.1/file/eclipse-theia.builtin-extension-pack-1.50.1.vsix",
+    "redhat.java": "https://open-vsx.org/api/redhat/java/0.73.0/file/redhat.java-0.73.0.vsix",
+    "vscjava.vscode-java-debug": "https://open-vsx.org/api/vscjava/vscode-java-debug/0.30.0/file/vscjava.vscode-java-debug-0.30.0.vsix",
+    "vscjava.vscode-java-test": "https://open-vsx.org/api/vscjava/vscode-java-test/0.26.1/file/vscjava.vscode-java-test-0.26.1.vsix",
+    "vscjava.vscode-maven": "https://open-vsx.org/api/vscjava/vscode-maven/0.21.2/file/vscjava.vscode-maven-0.21.2.vsix",
+    "vscjava.vscode-java-dependency": "https://open-vsx.org/api/vscjava/vscode-java-dependency/0.16.0/file/vscjava.vscode-java-dependency-0.16.0.vsix",
+    "redhat.vscode-xml": "https://open-vsx.org/api/redhat/vscode-xml/0.20.0/file/redhat.vscode-xml-0.20.0.vsix"
+  },
+  "theiaPluginsExcludeIds": [
+    "ms-vscode.js-debug-companion",
+    "vscode.extension-editing",
+    "vscode.microsoft-authentication",
+    "vscode.html-language-features",
+    "vscode.git",
+    "vscode.git-ui",
+    "vscode.github",
+    "vscode.github-authentication",
+    "vscode.microsoft-authentication"
+  ]
+}
diff --git a/applications/browser/resources/preload.html b/applications/browser/resources/preload.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <style>
+        html,
+        body {
+            background-color: black;
+        }
+
+        .theia-preload {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            /* Above styles copied from https://github.com/eclipse-theia/theia/blob/5aeef6c0c683b4e91713ab736957e6655b486adc/packages/core/src/browser/style/index.css#L147-L151 */
+            /* Otherwise, there is a flickering when Theia's CSS loads. */
+
+            background-image: none;
+        }
+
+        .theia-preload::after {
+            /* remove default loading animation */
+            content: none;
+        }
+
+        .spinner-container {
+            display: flex;
+            flex-direction: center;
+            align-self: center;
+            justify-content: center;
+            height: 100vh;
+            width: 100vw;
+        }
+
+        .custom-spinner {
+            align-self: center;
+        }
+
+        .custom-spinner svg {
+            width: 16vw;
+            height: 16vh;
+            animation-delay: 0;
+            animation-duration: 2s;
+            animation-iteration-count: infinite;
+            animation-name: blueprint-spinner;
+            animation-timing-function: ease;
+        }
+
+        @keyframes blueprint-spinner {
+            0% {
+                filter: invert(49%) sepia(71%) saturate(5980%) hue-rotate(199deg) brightness(103%) contrast(101%);
+                transform: scale(1.0);
+            }
+
+            50% {
+                filter: invert(57%) sepia(52%) saturate(1900%) hue-rotate(160deg) brightness(100%) contrast(102%);
+                transform: scale(0.8);
+            }
+
+            100% {
+                filter: invert(49%) sepia(71%) saturate(5980%) hue-rotate(199deg) brightness(103%) contrast(101%);
+                transform: scale(1.0);
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class='spinner-container'>
+        <div class='custom-spinner'>
+            <svg id="spinner" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" preserveAspectRatio="xMinYMin meet"
+                viewBox="0, 0, 1150, 540.6">
+                <g id="Layer_1" fill="#FFFFFF">
+                    <path
+                        d="M880.199,2.8 C1028.1,2.8 1147.9,122.6 1147.9,270.5 C1147.9,418.3 1028.1,538.2 880.2,538.2 L290.1,538.2 C269,538.2 251.9,521.1 251.9,500 C251.9,478.9 269,461.8 290.1,461.8 L427.6,461.8 C448.6,461.8 465.7,444.7 465.7,423.6 C465.7,402.5 448.6,385.4 427.6,385.4 L396.999,385.4 C375.9,385.4 358.8,368.3 358.8,347.2 C358.8,326.1 375.9,309 397,309 L488.703,309 C509.918,308.941 526.373,291.65 526.9,270.8 C526.9,249.7 509.8,232.6 488.7,232.6 L167.8,232.6 C146.7,232.6 129.6,215.5 129.6,194.4 C129.6,173.3 146.7,156.2 167.8,156.2 L404.604,156.2 C425.818,156.141 442.273,138.85 442.8,118 C442.8,96.9 425.7,79.8 404.6,79.8 L351.2,79.8 C330.1,79.8 313,62.7 313,41.6 C313,20.5 330.1,2.4 351.2,2.4 L880.199,2.8 z M837.4,92 L837.4,92 C755.2,92 688.7,158.6 688.7,240.7 L688.7,300.2 C688.7,382.4 755.2,448.9 837.4,448.9 C919.5,448.9 986.1,382.4 986.1,300.2 L986.1,240.7 C986.1,158.6 919.5,92 837.4,92 L837.4,92 z M888.2,232.6 C908,232.6 924.1,248.7 924.1,268.5 L924.1,273.1 C924.1,292.9 908,309 888.2,309 L776.6,309 C756.8,309 740.7,292.9 740.7,273.1 L740.7,268.5 C740.7,248.7 756.8,232.6 776.6,232.6 L888.2,232.6 z" />
+                    <path
+                        d="M170.1,461.8 C190,461.8 206,477.8 206,497.7 L206,502.3 C206,522.1 190,538.2 170.1,538.2 L38,538.2 C18.2,538.2 2.1,522.1 2.1,502.3 L2.1,497.7 C2.1,477.8 18.2,461.8 38,461.8 L170.1,461.8 z" />
+                    <path
+                        d="M231.3,3.4 C251.1,3.4 267.1,19.5 267.1,39.3 L267.1,44 C267.1,63.8 251.1,79.8 231.3,79.8 L83.8,79.8 C64,79.8 47.9,63.8 47.9,44 L47.9,39.3 C47.9,19.5 64,3.4 83.8,3.4 L231.3,3.4 z" />
+                    <path
+                        d="M277.1,309 C296.9,309 313,325.1 313,344.9 L313,349.5 C313,369.3 296.9,385.4 277.1,385.4 L196.1,385.4 C176.3,385.4 160.2,369.3 160.2,349.5 L160.2,344.9 C160.2,325.1 176.3,309 196.1,309 L277.1,309 z" />
+                </g>
+            </svg>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/applications/browser/tsconfig.json b/applications/browser/tsconfig.json
@@ -0,0 +1,12 @@
+{
+    "extends": "../../configs/base.tsconfig",
+    "include": [],
+    "compilerOptions": {
+      "composite": true
+    },
+    "references": [
+      {
+        "path": "../../theia-extensions/theia-blueprint-product"
+      }
+    ]
+}
diff --git a/applications/browser/webpack.config.js b/applications/browser/webpack.config.js
@@ -0,0 +1,17 @@
+/**
+ * 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');
+
+/**
+ * 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')
+}); */
+
+module.exports = config;
diff --git a/applications/electron/package.json b/applications/electron/package.json
@@ -116,10 +116,11 @@
     "prepare": "yarn build && yarn download:plugins",
     "clean": "theia clean && rimraf node_modules",
     "clean:dist": "rimraf dist",
-    "build": "theia rebuild:electron && yarn bundle",
+    "build": "yarn -s bundle",
     "bundle": "theia build",
+    "rebuild": "theia rebuild:electron --cacheRoot ../..",
     "watch": "concurrently -n compile,bundle \"theiaext watch --preserveWatchOutput\" \"theia build --watch --mode development\"",
-    "start": "electron scripts/theia-electron-main.js",
+    "start": "yarn -s rebuild && electron scripts/theia-electron-main.js",
     "start:debug": "yarn start --log-level=debug",
     "package": "yarn clean:dist && electron-builder -c.mac.identity=null --publish never",
     "deploy": "yarn clean:dist && electron-builder -c.mac.identity=null --publish always",

diff --git a/browser.Dockerfile b/browser.Dockerfile
@@ -0,0 +1,37 @@
+FROM node:16-bullseye as build-stage
+RUN apt-get update && apt-get install -y libxkbfile-dev libsecret-1-dev
+WORKDIR /home/theia
+COPY . .
+RUN yarn --pure-lockfile && \
+    yarn --production && \
+    yarn autoclean --init && \
+    echo *.ts >> .yarnclean && \
+    echo *.ts.map >> .yarnclean && \
+    echo *.spec.* >> .yarnclean && \
+    yarn autoclean --force && \
+    yarn cache clean
+
+FROM node:16-bullseye-slim as production-stage
+RUN adduser --system --group theia
+RUN chmod g+rw /home && \
+    mkdir -p /home/project && \
+    chown -R theia:theia /home/theia && \
+    chown -R theia:theia /home/project;
+RUN apt-get update && apt-get install -y wget apt-transport-https && \
+    wget -O - https://packages.adoptium.net/artifactory/api/gpg/key/public | tee /usr/share/keyrings/adoptium.asc && \
+    echo "deb [signed-by=/usr/share/keyrings/adoptium.asc] https://packages.adoptium.net/artifactory/deb $(awk -F= '/^VERSION_CODENAME/{print$2}' /etc/os-release) main" | tee /etc/apt/sources.list.d/adoptium.list && \
+    apt-get update && apt-get install -y git openssh-client openssh-server bash libsecret-1-0 temurin-17-jdk maven && \
+    apt-get purge -y wget && \
+    apt-get clean
+ENV HOME /home/theia
+WORKDIR /home/theia
+COPY --from=build-stage --chown=theia:theia /home/theia /home/theia
+EXPOSE 3000
+ENV SHELL=/bin/bash \
+    THEIA_DEFAULT_PLUGINS=local-dir:/home/theia/applications/browser/plugins
+ENV USE_LOCAL_GIT true
+USER theia
+
+WORKDIR /home/theia/applications/browser
+ENTRYPOINT [ "node", "/home/theia/applications/browser/src-gen/backend/main.js" ]
+CMD [ "/home/project", "--hostname=0.0.0.0" ]
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "watch": "lerna run --parallel watch",
     "test": "lerna run test",
     "electron": "yarn --cwd applications/electron",
+    "browser": "yarn --cwd applications/browser",
     "update:next": "ts-node scripts/update-theia-to-next.ts && lerna run update:next"
   },
   "workspaces": [

diff --git a/theia-extensions/theia-blueprint-product/package.json b/theia-extensions/theia-blueprint-product/package.json
@@ -17,7 +17,7 @@
   },
   "theiaExtensions": [
     {
-      "frontendElectron": "lib/browser/theia-blueprint-frontend-module",
+      "frontend": "lib/browser/theia-blueprint-frontend-module",
       "electronMain": "lib/electron-main/theia-blueprint-main-module",
       "backend": "lib/node/theia-blueprint-backend-module"
     }