Merge pull request #50 from owncloud/enable-dynamic-app-loading

Enable dynamic app loading

Author: Salipa-Gurung

README.md

@@ -1,7 +1,7 @@
 # ownCloud Web DICOM Viewer
 
 [![Build Status](https://drone.owncloud.com/api/badges/owncloud/web-app-dicom-viewer/status.svg)](https://drone.owncloud.com/owncloud/web-app-dicom-viewer)
-[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=owncloud_web-app-dicom-viewer&metric=security_rating)](https://sonarcloud.io/summary/new_code?id=owncloud_web-app-dicom-viewer) 
+[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=owncloud_web-app-dicom-viewer&metric=security_rating)](https://sonarcloud.io/summary/new_code?id=owncloud_web-app-dicom-viewer)
 [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=owncloud_web-app-dicom-viewer&metric=coverage)](https://sonarcloud.io/summary/new_code?id=owncloud_web-app-dicom-viewer)
 
 The ownCloud Web DICOM Viewer app is an extension of [ownCloud Web](https://github.com/owncloud/web) to preview DICOM files (medical images and their corresponding metadata) in the browser. The preview of the medical images is based on MIT licensed [cornerstone3D](https://github.com/cornerstonejs/cornerstone3D).
@@ -16,7 +16,29 @@ The current implementation allows to preview .dcm files and display their corres
 - **Supported architectures:**\
   `amd64`
 
-## Config
+## Installation
+
+### 1. Install dependencies
+
+```
+pnpm install
+```
+
+### 2. Build extension
+
+Build the extension using watch for development.
+
+```
+pnpm build:w
+```
+
+### 3. Load apps
+
+We can load the app into the oCIS server in two different ways, depending on the version of oCIS:
+
+#### 1. For oCIS 5.0.0 (Seperate extension server)
+
+Configure the extension in `web.config.json`
 
 ```json
 {
@@ -36,9 +58,18 @@ The current implementation allows to preview .dcm files and display their corres
     }
   ]
 }
- 
+
 ```
 
+#### 2. For oCIS >= 5.1
+
+Copy `docker-compose.override.example.yml` to `docker-compose.override.yml`.
+
+### 4. Run oCIS server
+
+```
+docker compose up
+```
 
 ## Docker Tags and respective Dockerfile links
 

dev/docker/csp.yml

@@ -0,0 +1,35 @@
+directives:
+  child-src:
+    - '''self'''
+    - 'data:'
+    - 'blob:'
+  connect-src:
+    - '''self'''
+    - 'data:'
+    - 'blob:'
+  default-src:
+    - '''none'''
+  font-src:
+    - '''self'''
+  frame-ancestors:
+    - '''none'''
+  frame-src:
+    - '''self'''
+  img-src:
+    - '''self'''
+    - 'data:'
+    - 'blob:'
+  manifest-src:
+    - '''self'''
+  media-src:
+    - '''self'''
+  object-src:
+    - '''self'''
+    - 'blob:'
+  script-src:
+    - '''self'''
+    - '''unsafe-inline'''
+    - '''unsafe-eval'''  #TODO: try to remove it 
+  style-src:
+    - '''self'''
+    - '''unsafe-inline'''

docker-compose.override.example.yml

@@ -0,0 +1,14 @@
+services:
+  ocis:
+    image: owncloud/ocis:latest
+    environment:
+      WEB_UI_CONFIG_FILE: null
+      WEB_ASSET_APPS_PATH: /web/apps
+      PROXY_CSP_CONFIG_FILE_LOCATION: /etc/ocis/csp.yml
+    volumes:
+      - ./dist:/web/apps/dicom-viewer:ro
+      - ./dev/docker/csp.yml:/etc/ocis/csp.yml
+
+  extension:
+    profiles:
+      - skip

public/manifest.json

@@ -0,0 +1,5 @@
+{
+  "id": "com.github.owncloud.web.dicom.viewer",
+  "entrypoint": "js/web-app-dicom-viewer.js",
+  "config": {}
+}

src/index.ts

@@ -2,11 +2,11 @@ import translations from '../l10n/translations.json'
 import { AppWrapperRoute, defineWebApplication } from '@ownclouders/web-pkg'
 import App from './App.vue'
 import { useGettext } from 'vue3-gettext'
+import { id as appId } from '../public/manifest.json'
 
 export default defineWebApplication({
   setup() {
     const { $gettext } = useGettext()
-    const appId = 'com.github.owncloud.web.dicom.viewer'
 
     const appInfo = {
       name: $gettext('DICOM Viewer'),