Try Out the New ownCloud Phoenix Frontend – the Beta Is Here!
The new frontend is ready for testing! Phoenix opens a new era to the ownCloud ecosystem. Its architecture facilitates good design and UX decisions – but take a look and decide for yourself.
This release is a Tech Preview: until now, only the architecture and the user-facing part work, and still need some design. There are rolling releases every friday now, to showcase the latest progress.
When it’s ready – what are the advantages of Phoenix over the old frontend? What is it good for, apart of being the shiny new thing? Well, a whole lot of things:
A New Architecture
The biggest difference between Phoenix and the old frontend is probably the clear separation between frontend and backend. The old frontend is basically a part of the ownCloud core – Phoenix is completely separate, only communicates with the backend over clearly defined APIs, and consists purely out of html, css, and js.
This makes not only for a more secure architecture, but has other advantages, too: you can run Phoenix completely separate, e.g. run it in its own Docker container. Scaling is far easier this way.
Another thing which is coming with Phoenix is the bigger focus on user experience (UX). There are plans for UX feedback sessions, and the ownCloud Design System (ODS), which defines the UIKit components used in Phoenix, and contains basic UX guidelines.
Everyone who writes an app for Phoenix can use the ODS components, and is directly confronted with the UX guidelines, too. This leads to a streamlined behavior across different ownCloud Server apps, and makes contributing very easy.
The vueJS framework is not only great for contributing – it is also popular for its great performance. The separation between frontend and backend facilitates optimizations, as you can track down bottlenecks easier. All in all, Phoenix is great news for everyone who likes responsive websites.
And the final advantage of Phoenix is its maintainability – the clear architecture and the readability of vueJS make it very easy to maintain Phoenix, as well as Phoenix apps. That way, we can pay more attention to every contribution, increasing overall code quality.
How to Setup the Phoenix Beta in a Testing Environment
To setup Phoenix, you need a running ownCloud server, with at least version 10.2.1. The easiest way is to set it up with Docker on your laptop, or on labs.play-with-docker.com. This way, the installation doesn’t affect your system, and you can easily try it out.
So run an ownCloud with docker-compose, as described in our guide. Then you can access the command line in the ownCloud container; do so with docker exec -ti server_owncloud_1 bash
. If this doesn’t work, because your ownCloud container isn’t called server_owncloud_1
, you can find out its actual name with docker ps
.
Then you can install Phoenix via the command line:
mkdir -p /var/www/owncloud/apps/phoenix
cd /var/www/owncloud/apps/phoenix
wget https://github.com/owncloud/phoenix/releases/download/0.2.1/phoenix.tar.gz
tar -xvf phoenix.tar.gz
occ market:install oauth2
occ app:enable phoenix
Now the Phoenix app will show up in the app chooser in the web interface when logged in. If you switch to it, you will see a big Authorize button for authorizing with OAuth2.
Configuring OAuth2
Clicking on authorize won’t work yet, unless you make some changes to the Phoenix config. If you closed the shell we opened above, you can edit it with docker exec -ti server_owncloud_1 vim apps/phoenix/config.json
.
We need to add the server name, in my case "server" : "http://localhost",
, and we need to add the OAuth2 clientID, url, and authurl, so the Phoenix app can get authorized. You can generate a clientID in the settings:
The callback URL needs to be something like http://localhost/apps/phoenix/oidc-callback.html
, just substitute your domain if you don’t run the server on your local machine. Then you can copy-paste the client ID – we don’t need the client secret.
After you added all these things to the config, your config.json should look similar to this:
{
"server" : "http://localhost",
"theme": "owncloud",
"version": "0.1.0",
"auth": {
"clientId": "1HO23PZlQv7kCG4qR--------------------------------",
"url": "http://localhost/index.php/apps/oauth2/api/v1/token",
"authUrl": "http://localhost/index.php/apps/oauth2/authorize"
},
"apps" : [
"files"
]
}
You might need to adjust these values for your domain or for play-with-docker.
Now if you empty the browser cache and reload, the authorize button should work! Click on the second authorize button, too, and you will be redirected to the Phoenix frontend. Voilà! Now you can try out the current state of the project.
Enable Trash Bin and Private/Public Links
The trash bin and public/private link features in Phoenix need some APIs which are in “beta” phase. For testing those features you need ownCloud Server version 10.3, which will come out soon. You can use the alpha2 to try it out.
To make those features work, we need two additional config settings in the config.php
. Edit them with docker exec -ti server_owncloud_1 vim config/config.php
.
We need to allow the experimental APIs: dav.enable.tech_preview => true,
and we need to add the Phoenix URL to the config.php, in my case: 'phoenix.baseUrl' => 'http://localhost/apps/phoenix',
With this setup, you can try out everything which is already in Phoenix!
Next Development Steps
As mentioned above, Phoenix is work in progress – even though there were some big steps before the conference, so we can build on this progress during oCCon19. The ownCloud conference is also a great place for feedback – all the developers will be there.
The next steps will include a lot of focus on UX and tackling the admin interface, which is not yet available at all. Soon Phoenix will be a working replacement for the old web interface!
Try it Out!
So now, as you know how to set it up, it’s the perfect time to get started! There are rolling releases from now on, so you can expect a new version every friday.
You can get the latest release here:
Get the latest Phoenix release!
What do you think about Phoenix? Leave a comment below or share this post on social media!