Development with oCIS as backend

[kulmann]

Wanted to share my now working dev setup with oCIS as backend.

1. Start oCIS

The ownCloud Web repo holds a docker-compose setup for ocis which already has a filepicker client configured. Clone the web repo and run docker-compose up -d ocis (don't start the oc10 container, otherwise that blocks the port 8080).

2. Adjust file picker configuration

2a. vue.config.js

Add the following dev server config to vue.config.js:

devServer: {
    host: 'host.docker.internal',
    port: 8080,
    https: true
  }

2b. file-picker-config.json

The bare minimum was this for me:

{
  "server" : "https://host.docker.internal:9200",
  "openIdConnect": {
    "metadataUrl": "https://host.docker.internal:9200/.well-known/openid-configuration",
    "authority": "https://host.docker.internal:9200",
    "client_id": "filepicker"
  }
}

This also already uses the client id filepicker which is configured in the web repo compose stack.

3. CORS: Bug mitigation for localhost development

Unfortunately oCIS doesn't support configuring CORS for the ocdav and graph services at the moment (will add an issue link here when I created it in the ocis repo). So for localhost development the only way I found was to start chrome in insecure mode:

open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome-profile" --disable-web-security

(make sure to use an empty profile with the user-data-dir param. ;-) )

Make sure to visit https://host.docker.internal:9200 once and accept the self signed certificate. Otherwise authentication will fail from within the file picker.

4. Start file picker dev server

Run yarn serve to spin up the dev server of the filepicker. It should become available on https://host.docker.internal:8080.