ownCloud-Phoenix

Pushing a new design and frontend concept to ownCloud

See this online Demo (user: demo, password: demo)

Prerequisites

Decide on which host and port Phoenix will be running, for example https://phoenix-host:8300/phoenix-path/. In this document, we will refer to the following:

<phoenix-url> as the full URL, for example https://phoenix-host:8300/phoenix-path/
<phoenix-domain> as the protocol, domain and port, for example: https://phoenix-host:8300

Setting up

Setting up the ownCloud Server

Make sure you have an ownCloud Server already installed.

Adjusting config.php

Add the following entries to config/config.php:

tell ownCloud where Phoenix is located:

'phoenix.baseUrl' => '<phoenix-url>',

add a CORS domain entry for Phoenix in config.php:

'cors.allowed-domains' => ['<phoenix-domain>'],

optional: when developing against unstable APIs (technical preview), these need to be enabled in the server core:

dav.enable.tech_preview => true,

Setting up OAuth2

To connect to the ownCloud server, it is necessary to set it up with OAuth2.

Install and enable the oauth2 app:

% occ market:install oauth2
% occ app:enable oauth2

Login as administrator in the ownCloud Server web interface and go to the "User Authentication" section in the admin settings and add an entry for Phoenix as follows:

pick an arbitrary name for the client
set the redirection URI to <phoenix-url>/oidc-callback.html
make sure to take note of the client identifier value as it will be needed in the Phoenix configuration later on

Setting up Phoenix

In the local Phoenix checkout, copy the config.json.sample file to config.json and adjust it accordingly:

Set the "server" key to the URL of the ownCloud server including path. If the URL contains a path, please also add a trailing slash there.
Set the "clientId" key to the client identifier as copied from the "User Authentication" section before.
Adjust "url" and "authUrl" using the ownCloud server URL as prefix for both
Optionally adjust "apps" for the list of apps to be loaded. These match the app names inside the "apps" folder.

Building Phoenix

Run yarn install to build core
Run yarn install-all to install dependencies of all apps and core
Run yarn dist to build all apps configured in config.json

Running Phoenix

optionally provide custom domain name: export SERVER_HOST=0.0.0.0:8300
run a webpack dev server yarn watch (yarn watch-all if you want to watch apps as well)

Running acceptance tests

clone and install testing app into owncloud from http://github.com/owncloud/testing
set skeletondirectory of ownCloud to <oc-root>/apps/testing/data/webUISkeleton e.g. occ config:system:set skeletondirectory --value=/var/www/owncloud/apps/testing/data/webUISkeleton
build, configure and run phoenix
setup selenium & browser
- install the Chrome browser and let yarn start & run selenium OR
- use docker to start the browser and selenium e.g.: docker run -d -p 4445:4444 -p 5900:5900 -v /dev/shm:/dev/shm --name selenium selenium/standalone-chrome-debug
run yarn run acceptance-tests <feature-files-to-test>
available settings to be set by environment variables:

setting	meaning	default
`SERVER_HOST`	phoenix URL	http://localhost:8300
`BACKEND_HOST`	owncloud server URL	http://localhost:8080
`BACKEND_USERNAME`	owncloud administrator username	admin
`BACKEND_PASSWORD`	owncloud administrator password	admin
`SELENIUM_HOST`	selenium server host, if not set yarn will start selenum automatically if running the selenium docker container as mentioned above set to `localhost`
`SELENIUM_PORT`	port of selenium server	4445
`SCREEN_RESOLUTION`	width and height in px to set the browser resulution to e.g. 375x812	empty = fullscreen

Updating dependencies

Run yarn upgrade-all to update core and app dependencies

Cleaning up the workspace

Run yarn clean-all to remove node_modules and dist folder

Phoenix as an ownCloud app

Building the Phoenix ownCloud app

run yarn install && yarn dist && yarn build
run make -f Makefile.release dist

Deploying the Phoenix app to ownCloud

Grab build/dist/phoenix.tar.gz
Move to the apps folder on your ownCloud installation
tar -xzf phoenix.tar.gz
Run ./occ apps:enable phoenix
Refresh your webui and see Phoenix in the app menu

dpakach / phoenix