Skip to content
Next generation frontend for ownCloud
Gherkin JavaScript Vue CSS Makefile HTML
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update config.yml Jan 28, 2020
appinfo Moved changelog and increased version Feb 14, 2020
apps Merge pull request #3042 from owncloud/fix-searchbar-warning Feb 15, 2020
build lint scripts in build dir as well Feb 13, 2019
changelog Fix console warning about search query in public page Feb 14, 2020
img Add manifest.json Aug 14, 2018
l10n [tx] updated from transifex Feb 15, 2020
src Merge pull request #3039 from owncloud/broken-aria-labels Feb 14, 2020
tests Merge pull request #3028 from Talank/split-SharingPublic Feb 13, 2020
themes Move sharing indicators into own component and add extension point Jan 30, 2020
.dockerignore Build requires the git folder to determine the commit hash Jul 23, 2019 splitted suite webUISharingPublic Feb 13, 2020
.editorconfig Use 2 spaces instead of tab for feature files Sep 17, 2019
.eslintrc.json Enforce order in components Feb 3, 2020
.gitignore integration Sep 27, 2019
.htaccess added X-Frame-Options and Content-Security-Policy Oct 22, 2019 Automated changelog update [skip ci] Feb 15, 2020
Dockerfile Remove build stage from Dockerfile - builds are done in drone Nov 19, 2019
LICENSE Create LICENSE Feb 23, 2018
Makefile Don't skip errors in l10n up/download Feb 12, 2020
Makefile.release ownCloud 10 apps require a different tar layout - we build two differ… Jan 10, 2020 Remote server replaced by second server-instance Jan 23, 2020
babel.config.js IE11: Add IE11 support Jun 3, 2019
config.json.dist Separate app switcher from app navigation sidebar Dec 17, 2019
config.json.sample Fix malformed config.json.sample (removed double quote) Feb 12, 2020
index.html Use vue-meta to set the page title to the name on the theme and to se… Aug 5, 2019
manifest.json Fix indent based on OC coding guidelines Aug 14, 2018
nightwatch.conf.js Catch console errors in CI Dec 31, 2019
oidc-callback.html Redirect uri need to point to absolute paths and need to include inde… May 14, 2019
oidc-silent-redirect.html Redirect uri need to point to absolute paths and need to include inde… May 14, 2019
package.json Various fixes files app in responsive mode Feb 14, 2020
webpack.common.js Use vue-meta to set the page title to the name on the theme and to se… Aug 5, 2019 Webpack watcher must ignore dot files/folders Oct 1, 2019 Use OAuth/OpenIDConnect redirect uri without fragment May 9, 2019
yarn.lock Merge pull request #2999 from owncloud/fix-responsive-filename-width Feb 14, 2020


Pushing a new design and frontend concept to ownCloud


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


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=
  • 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
  • build, configure and run phoenix
  • setup selenium and browser in either of the following ways:
    1. yarn run selenium: This runs selenium-docker similar to command below.

      Needs setting SELENIUM_HOST as localhost and SERVER_HOST in the format http://<ip_addr>:8300. To find ip of the docker host, use

        docker inspect -f "{{ .NetworkSettings.Gateway }}" selenium
    2. use docker to start the browser and selenium e.g.:

      docker run -d -p 4444:4444 -p 5900:5900 -v /dev/shm:/dev/shm -v <repo_path>/tests/acceptance/filesForUpload:/uploads --name selenium selenium/standalone-chrome-debug
    3. install the Chrome browser and let yarn start & run selenium (remember to set LOCAL_UPLOAD_DIR though)

    4. Use standalone selenium server (remember to set SELENIUM_HOST, SELENIUM_PORT and LOCAL_UPLOAD_DIR).

  • run yarn run acceptance-tests <feature-files-to-test>
  • to run federation tests:
    1. Install and setup a second ownCloud server-instance that is accessible by a different URL. That second server-instance must have its own database and data directory.

    2. clone and install testing app into the second ownCloud server-instance from .

    3. when running the acceptance tests use REMOTE_BACKEND_HOST environment variable to define its address. for e.g. REMOTE_BACKEND_HOST=http://<ip_address_of_second_ownCloud_server-instance> 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 selenium automatically
if running the selenium docker container as mentioned above set to localhost
SELENIUM_PORT port of selenium server 4444
SCREEN_RESOLUTION width and height in px to set the browser resolution to e.g. 375x812 empty = fullscreen
REMOTE_UPLOAD_DIR path to filesForUpload directory, used when uploading files through api ./tests/acceptance/filesForUpload
LOCAL_UPLOAD_DIR filesForUpload directory available for selenium for direct uploads
If using selenium-docker and example above, set it as /uploads.
If running local selenium, set value same as REMOTE_UPLOAD_DIR (please, remember to use absolute path)
REMOTE_BACKEND_HOST ownCloud remote server URL http://localhost:8080

Running acceptance tests with Docker Desktop for Mac

In order to run acceptance tests with selenium running in Docker Desktop for Mac while having ownCloud Server and Phoenix running as services on the host machine, localhost will not work as URL. Use the Docker host ip or its alias host.docker.internal instead. This requires to adjust all relevant config files to use host.docker.internal instead of localhost (config.json in Phoenix and config/config.php in oC10) and to change the phoenix OIDC-callback url. Set the SERVER_HOST and BACKEND_HOST environment variables accordingly. In order to use the same url for development on the host machine, define it as an alias to in /etc/hosts. After all these changes Phoenix will be accessible at http://host.docker.internal:8300 for both development and acceptance tests.

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
You can’t perform that action at this time.