Create Browser Application and Dockerfile #75

.github/workflows/publish-blueprint-img.yml

@@ -0,0 +1,34 @@
+name: Publish Blueprint Docker Image
+
+on:
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: The image's tag
+        required: true
+        default: next
+
+jobs:
+  build:
+    name: Build and push blueprint image to Docker Hub
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          file: browser.Dockerfile
+          push: true
+          tags: |
+            eclipsetheia/blueprint:${{ github.event.inputs.tag }}
+            eclipsetheia/blueprint:latest

README.md

@@ -50,7 +50,8 @@ Documentation on how to package Theia as a Desktop Product may be found [here](h
 
 - Root level configures mono-repo build with lerna
 - `applications` groups the different app targets
-  - `electron` contains app to package, packaging configuration, and E2E tests for the electron target.
+  - `browser` contains a browser based version of Eclipse Theia Blueprint that may be packaged as a Docker image
+  - `electron` contains the electron app to package, packaging configuration, and E2E tests for the electron target.
 - `theia-extensions` groups the various custom theia extensions for Blueprint
   - `theia-blueprint-product` contains a Theia extension contributing the product branding (about dialogue and welcome page).
   - `theia-blueprint-updater` contains a Theia extension contributing the update mechanism and corresponding UI elements (based on the electron updater).
@@ -61,23 +62,23 @@ Documentation on how to package Theia as a Desktop Product may be found [here](h
 yarn
 ```
 
-### Package the Application
+### Package the Electron Application
 
 ```sh
 yarn electron package
 ```
 
 The packaged application is located in `applications/electron/dist`.
 
-### Create a Preview Application (without packaging it)
+### Create a Preview Electron Application (without packaging it)
 
 ```sh
 yarn electron package:preview
 ```
 
 The packaged application is located in `applications/electron/dist`.
 
-### Running E2E Tests
+### Running E2E Tests on Electron
 
 The E2E tests basic UI tests of the actual application.
 This is done based on the preview of the packaged application.
@@ -87,6 +88,16 @@ yarn electron package:preview
 yarn electron test
 ```
 
+### Running Browser app
+
+The browser app may be started with
+
+```sh
+yarn browser start
+```
+
+and connect to <http://localhost:3000/>
+
 ### Troubleshooting
 
 - [_"Don't expect that you can build app for all platforms on one platform."_](https://www.electron.build/multi-platform-build)
@@ -95,3 +106,19 @@ 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 based on the browser app 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
+```
+
+and connect to <http://localhost:3000/>

applications/browser/package.json

@@ -0,0 +1,123 @@
+{
+  "private": true,
+  "name": "theia-blueprint-browser",
+  "description": "Eclipse Theia blueprint browser product",
+  "productName": "Theia Blueprint",
+  "version": "1.35.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.35.0",
+    "@theia/callhierarchy": "1.35.0",
+    "@theia/console": "1.35.0",
+    "@theia/core": "1.35.0",
+    "@theia/debug": "1.35.0",
+    "@theia/editor": "1.35.0",
+    "@theia/editor-preview": "1.35.0",
+    "@theia/external-terminal": "1.35.0",
+    "@theia/file-search": "1.35.0",
+    "@theia/filesystem": "1.35.0",
+    "@theia/getting-started": "1.35.0",
+    "@theia/git": "1.35.0",
+    "@theia/keymaps": "1.35.0",
+    "@theia/markers": "1.35.0",
+    "@theia/messages": "1.35.0",
+    "@theia/memory-inspector": "1.35.0",
+    "@theia/metrics": "1.35.0",
+    "@theia/mini-browser": "1.35.0",
+    "@theia/monaco": "1.35.0",
+    "@theia/navigator": "1.35.0",
+    "@theia/outline-view": "1.35.0",
+    "@theia/output": "1.35.0",
+    "@theia/plugin-dev": "1.35.0",
+    "@theia/plugin-ext": "1.35.0",
+    "@theia/plugin-ext-vscode": "1.35.0",
+    "@theia/preferences": "1.35.0",
+    "@theia/process": "1.35.0",
+    "@theia/property-view": "1.35.0",
+    "@theia/scm": "1.35.0",
+    "@theia/scm-extra": "1.35.0",
+    "@theia/search-in-workspace": "1.35.0",
+    "@theia/task": "1.35.0",
+    "@theia/terminal": "1.35.0",
+    "@theia/timeline": "1.35.0",
+    "@theia/toolbar": "1.35.0",
+    "@theia/typehierarchy": "1.35.0",
+    "@theia/userstorage": "1.35.0",
+    "@theia/variable-resolver": "1.35.0",
+    "@theia/vsx-registry": "1.35.0",
+    "@theia/workspace": "1.35.0",
+    "fs-extra": "^9.0.1",
+    "theia-blueprint-updater": "1.35.0",
+    "theia-blueprint-product": "1.35.0"
+  },
+  "devDependencies": {
+    "@theia/cli": "1.35.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 --rate-limit=1"
+  },
+  "theiaPluginsDir": "plugins",
+  "theiaPlugins": {
+    "vscode.markdown-language-features": "https://open-vsx.org/api/vscode/markdown-language-features/1.39.2/file/vscode.markdown-language-features-1.39.2.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",
+    "vscode.typescript": "https://open-vsx.org/api/vscode/typescript/1.62.3/file/vscode.typescript-1.62.3.vsix",
+    "vscode.typescript-language-features": "https://open-vsx.org/api/vscode/typescript-language-features/1.62.3/file/vscode.typescript-language-features-1.62.3.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"
+  },
+  "theiaPluginsExcludeIds": [
+    "ms-vscode.js-debug-companion",
+    "vscode.extension-editing",
+    "vscode.git",
+    "vscode.git-ui",
+    "vscode.github",
+    "vscode.github-authentication",
+    "vscode.microsoft-authentication"
+  ]
+}

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>

applications/browser/tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "extends": "../../configs/base.tsconfig",
+    "include": [],
+    "compilerOptions": {
+      "composite": true
+    },
+    "references": [
+      {
+        "path": "../../theia-extensions/theia-blueprint-product"
+      }
+    ]
+}

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;

applications/electron/package.json

@@ -115,17 +115,18 @@
     "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",
     "package:preview": "yarn clean:dist && electron-builder -c.mac.identity=null --dir",
     "update:checksum": "ts-node scripts/update-checksum.ts",
     "update:next": "ts-node ../../scripts/update-theia-to-next.ts",
-    "download:plugins": "theia download:plugins",
+    "download:plugins": "theia download:plugins --rate-limit=1",
     "test": "mocha --timeout 60000 \"./test/*.spec.js\""
   },
   "theiaPluginsDir": "plugins",