build: add ability to build extension for ocis apps-loading

.gitignore

@@ -6,3 +6,4 @@ dist
 .idea
 
 /.pnpm-store/
+docker-compose.override.yml

README.md

@@ -3,33 +3,42 @@
 A markdown presentation viewer for [ownCloud web](https://github.com/owncloud/web/) (the webUI of [oCIS](https://github.com/owncloud/ocis/)) using the [reveal.js](https://revealjs.com/) library.
 
 It allows users to:
+
 - create slide presentations directly from markdown files
 - share the slides using public links
 
 ## Demonstration
+
 - [Demonstation page](https://ocis.in-nepal.de/files/link/public/bdSEsErbfGKoOIt?fileId=bdSEsErbfGKoOIt&files-public-link-view-mode=resource-table)
 - Click on `Open in Text Editor` to view the markdown content.
 - Click on `Open in Presentation Viewer` to view the rendered presentation.
 
 ## Prerequisites
+
+- [oCIS](https://github.com/owncloud/ocis) (>= 5.0.0)
 - [Node.js](https://nodejs.org/en/) (v18.17.1)
 - [pnpm](https://pnpm.io/) (v8.15.1)
 - [Docker](https://www.docker.com/)(optional)
 - [Docker Compose](https://docs.docker.com/compose/)(optional)
 
 ## Installation
+
 ### 1. Install Dependencies
+
 ```bash
 pnpm install
 ```
 
 ### 2. Build the extension
+
 ```bash
 pnpm build
 ```
+
 The extension will be built in the `dist` directory.
 
 ### 3. Serve the extension
+
 1. serve the content of the `dist` folder using any HTTP web-server
 2. configure web
    1. If you already have a dedicated `web.config.json` file, add an `external_apps` section (or edit the existing one). It has to have an item with `"id": "presentation-viewer"` and a `path` pointing to `web-app-presentation-viewer.js` e.g.:
@@ -51,22 +60,51 @@ The extension will be built in the `dist` directory.
 
 ## Development
 
-### 1. Install Dependencies
+Install dependencies:
+
 ```bash
 pnpm install
 ```
 
-### 2. Build the extension
+Build the extension. For development, build with watch.
 
-For development, build with watch
 ```bash
 pnpm build:w
 ```
-The extension will be served at [http://localhost:8082/web-app-presentation-viewer.js](http://localhost:8082/web-app-presentation-viewer.js)
 
-### 3. Start oCIS and the extension
+Depending on the oCIS version, we have two ways to load the apps into the oCIS server.
+
+### 1. Separate Extension Server (oCIS 5.0.0)
+
+With oCIS 5.0.0, it is only possible to load the external apps using the config file and app server.
+
+Run the following command to serve the oCIS and the extension servers:
+
 ```bash
 docker compose up
 ```
 
-The webUI of oCIS can be accessed at [https://host.docker.internal:9200](https://host.docker.internal:9200)
+Extension URL: [host.docker.internal:3000](https://host.docker.internal:3000)
+
+oCIS URL: [host.docker.internal:9200](https://host.docker.internal:9200)
+
+### 2. oCIS Apps Loading (oCIS >= 5.1)
+
+Starting from oCIS 5.1.0 (not released yet), external apps can be loaded into the oCIS without config file and separate app server. We just use `WEB_ASSET_APPS_PATH`, an oCIS environment variable, while running oCIS server to set the directory where all the external apps are located.
+
+Follow these steps:
+
+1. Build the extension with the following command:
+
+   ```bash
+   APPS_LOADING=true pnpm build:w
+   ```
+
+2. Copy `docker-compose.override.example.yml` to `docker-compose.override.yml`
+3. Run the oCIS server:
+
+   ```bash
+   docker compose up
+   ```
+
+   oCIS URL: [host.docker.internal:9200](https://host.docker.internal:9200)

config/web.config.json.sample

@@ -48,7 +48,7 @@
     },
     {
       "id": "presentation-viewer",
-      "path": "https://<url-where-the-dist-folder-is-served>/web-app-presentation-viewer.js"
+      "path": "https://<url-where-the-dist-folder-is-served>/com.github.jankaritech.web.mdpresentation/extension.js"
     }
   ]
 }

dev/docker/nginx.conf

@@ -0,0 +1,11 @@
+server {
+  listen 80;
+  server_name localhost;
+
+  location / {
+    add_header 'Access-Control-Allow-Origin' '*';
+  }
+  root /usr/share/nginx/html;
+  index index.html index.htm;
+  try_files $uri $uri/ /index.html;
+}

dev/docker/web.config.json

@@ -48,7 +48,7 @@
     },
     {
       "id": "presentation-viewer",
-      "path": "http://localhost:8082/web-app-presentation-viewer.js"
+      "path": "https://host.docker.internal:3000/com.github.jankaritech.web.mdpresentation/extension.js"
     }
   ]
 }

docker-compose.override.example.yml

@@ -0,0 +1,12 @@
+services:
+  ocis:
+    image: owncloud/ocis:latest
+    environment:
+      WEB_UI_CONFIG_FILE: null
+      WEB_ASSET_APPS_PATH: /web/apps
+    volumes:
+      - ./dist:/web/apps:ro
+
+  extension:
+    profiles:
+      - skip

docker-compose.yml

@@ -1,22 +1,69 @@
 services:
   ocis:
-    image: ${OCIS_IMAGE:-owncloud/ocis:latest}
-    container_name: web_ocis
+    image: ${OCIS_IMAGE:-owncloud/ocis:5.0.0}
     entrypoint: /bin/sh
     command: ['-c', 'ocis init || true && ocis server']
-    ports:
-      - 9200:9200
     environment:
       # OCIS
       OCIS_URL: https://host.docker.internal:9200
-      OCIS_INSECURE: '${OCIS_INSECURE:-true}'
-      OCIS_LOG_LEVEL: '${OCIS_LOG_LEVEL:-error}'
-
+      OCIS_INSECURE: true
+      OCIS_LOG_LEVEL: error
       # WEB
       WEB_UI_CONFIG_FILE: /web/config.json
-
       # IDM
-      IDM_CREATE_DEMO_USERS: '${DEMO_USERS:-true}'
-      IDM_ADMIN_PASSWORD: '${ADMIN_PASSWORD:-admin}'
+      IDM_CREATE_DEMO_USERS: ${DEMO_USERS:-true}
+      IDM_ADMIN_PASSWORD: admin
+      # PROXY
+      PROXY_ENABLE_BASIC_AUTH: true
+      PROXY_TLS: false
     volumes:
       - ./dev/docker/web.config.json:/web/config.json:ro
+    extra_hosts:
+      - host.docker.internal:host-gateway
+    labels:
+      traefik.enable: true
+      traefik.http.routers.ocis.tls: true
+      traefik.http.routers.ocis.rule: PathPrefix(`/`)
+      traefik.http.routers.ocis.entrypoints: ocis
+      traefik.http.services.ocis.loadbalancer.server.port: 9200
+    depends_on:
+      - traefik
+
+  extension:
+    image: nginx:1.25.3
+    volumes:
+      - ./dev/docker/nginx.conf:/etc/nginx/conf.d/default.conf:ro
+      - ./dist:/usr/share/nginx/html:ro
+    labels:
+      traefik.enable: true
+      traefik.http.routers.extension.tls: true
+      traefik.http.routers.extension.rule: PathPrefix(`/`)
+      traefik.http.routers.extension.entrypoints: extension
+      traefik.http.services.extension.loadbalancer.server.port: 80
+    depends_on:
+      - traefik
+
+  traefik:
+    image: traefik:2.11.0
+    restart: unless-stopped
+    command:
+      [
+        '--log.level=ERROR',
+        '--api.insecure=true',
+        '--api.dashboard=true',
+        '--pilot.dashboard=false',
+        '--providers.docker=true',
+        '--entrypoints.ocis.address=:9200',
+        '--entrypoints.extension.address=:3000',
+        '--providers.docker.exposedbydefault=false',
+        '--entrypoints.websecure.http.tls.options=default'
+      ]
+    labels:
+      traefik.enable: true
+      traefik.http.routers.traefik.rule: HostRegexp(`{any:.+}`)
+    ports:
+      - 8080:8080 # traefik dashboard
+      - 9200:9200 # ocis
+      - 3000:3000 # extension
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock:ro

package.json

@@ -19,6 +19,7 @@
     "@babel/eslint-parser": "^7.23.10",
     "@ownclouders/extension-sdk": "0.0.5-alpha.2",
     "@ownclouders/prettier-config": "0.0.1",
+    "@types/node": "^20.11.30",
     "@typescript-eslint/eslint-plugin": "^7.1.1",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",

public/manifest.json

@@ -0,0 +1,5 @@
+{
+  "id": "com.github.jankaritech.web.mdpresentation",
+  "entrypoint": "extension.js",
+  "config": {}
+}

src/index.ts

@@ -1,10 +1,9 @@
 import { AppWrapperRoute, defineWebApplication } from '@ownclouders/web-pkg'
 import App from './App.vue'
+import { id as appId } from '../public/manifest.json'
 
 export default defineWebApplication({
   setup() {
-    const appId = 'presentation-viewer'
-
     const appInfo = {
       name: 'Presentation Viewer',
       id: appId,

vite.config.ts

@@ -1,14 +1,17 @@
 import { defineConfig } from '@ownclouders/extension-sdk'
+import { id } from './public/manifest.json'
+
+// TODO: make APPS_LOADING default after oCIS 5.1 is released
+const base =
+  process.env.APPS_LOADING === 'true' ? '/assets/apps' : 'https://host.docker.internal:3000'
 
 export default defineConfig({
-  name: 'web-app-presentation-viewer',
-  server: {
-    port: 8082
-  },
+  base: `${base}/${id}/`,
   build: {
     rollupOptions: {
       output: {
-        entryFileNames: `[name].js`
+        dir: `dist/${id}`,
+        entryFileNames: 'extension.js'
       }
     }
   }