{"id":42755,"date":"2019-09-16T12:06:33","date_gmt":"2019-09-16T12:06:33","guid":{"rendered":"https:\/\/owncloud.com\/?p=42755"},"modified":"2023-01-16T15:30:01","modified_gmt":"2023-01-16T15:30:01","slug":"try-out-the-new-owncloud-phoenix-frontend-the-beta-is-here","status":"publish","type":"post","link":"https:\/\/owncloud.com\/de\/blogs\/try-out-the-new-owncloud-phoenix-frontend-the-beta-is-here\/","title":{"rendered":"Try Out the New ownCloud Phoenix Frontend \u2013 the Beta Is Here!"},"content":{"rendered":"
\n

Try Out the New ownCloud Phoenix Frontend \u2013 the Beta Is Here!<\/h1>\n
\n

The new frontend is ready for testing! Phoenix opens a new era to the ownCloud ecosystem. Its architecture facilitates good design and UX decisions \u2013 but take a look and decide for yourself.<\/p>\n<\/div>\n<\/div>\n

\n
\n
Since\u00a0Phoenix was announced<\/a>\u00a0over a year ago, a lot of work went into the new frontend. Phoenix is still very beta, but the foundation is done. There will be multiple talks at the ownCloud Conference 2019 about Phoenix, going deeper into what is special about it.This blogpost will show how to get it running, so you can try it out. Best set up a testing ownCloud instance, and install Phoenix as an app. Users can then decide which frontend to use at the login screen and at the app switcher.<\/p>\n

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.<\/p>\n

When it\u2019s ready \u2013 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:<\/p>\n

A New Architecture<\/h2>\n

The biggest difference between Phoenix and the old frontend is probably the\u00a0clear separation between frontend and backend. The old frontend is basically a part of the ownCloud core \u2013 Phoenix is completely separate, only communicates with the backend over clearly defined APIs, and consists purely out of html, css, and js.<\/p>\n

This makes not only for a more secure architecture, but has other advantages, too: you can run Phoenix completely separate, e.g.\u00a0run it in its own Docker container.\u00a0Scaling is far easier this way.<\/p>\n

Another thing which is coming with Phoenix is the\u00a0bigger focus on user experience\u00a0(UX). There are plans for UX feedback sessions, and the\u00a0ownCloud Design System<\/a>\u00a0(ODS), which defines the UIKit components used in Phoenix, and contains basic UX guidelines.<\/p>\n<\/article>\n<\/div>\n

\"Some
Developers can find pre-defined components in the ownCloud Design Systems, e.g. these buttons.<\/em><\/figcaption><\/figure>\n

Everyone who writes an app for Phoenix can use the\u00a0ODS<\/a>\u00a0components, and is directly confronted with the UX guidelines, too. This leads to a\u00a0streamlined behavior across different ownCloud Server apps, and makes contributing very easy.<\/p>\n

The vueJS framework is not only great for contributing \u2013 it is also popular for its\u00a0great 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.<\/p>\n

And the final advantage of Phoenix is its maintainability \u2013 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.<\/p>\n

How to Setup the Phoenix Beta in a Testing Environment<\/h2>\n

To setup Phoenix,\u00a0you need a running ownCloud server, with at least version 10.2.1.\u00a0The easiest way is to\u00a0set it up with Docker<\/a>\u00a0on your laptop, or on\u00a0labs.play-with-docker.com<\/a>. This way, the installation doesn\u2019t affect your system, and you can easily try it out.<\/p>\n

So run an ownCloud with docker-compose, as described\u00a0in our guide<\/a>. Then you can access the command line in the ownCloud container; do so with\u00a0docker exec -ti server_owncloud_1 bash<\/code>. If this doesn\u2019t work, because your ownCloud container isn\u2019t called\u00a0server_owncloud_1<\/code>, you can find out its actual name with\u00a0docker ps<\/code>.<\/p>\n

Then you can\u00a0install Phoenix via the command line:<\/p>\n

mkdir -p \/var\/www\/owncloud\/apps\/phoenix<\/code>
\ncd \/var\/www\/owncloud\/apps\/phoenix
\nwget https:\/\/github.com\/owncloud\/phoenix\/releases\/download\/0.2.1\/phoenix.tar.gz
\ntar -xvf phoenix.tar.gz
\nocc market:install oauth2
\nocc app:enable phoenix<\/code><\/p>\n

Now the Phoenix app will show up in the app chooser\u00a0in the web interface when logged in. If you switch to it, you will see a big Authorize button for authorizing with OAuth2.<\/p>\n

\"ownCloud
Access the Phoenix app through the app chooser.<\/em><\/figcaption><\/figure>\n

Configuring OAuth2<\/h3>\n

Clicking on authorize won\u2019t work yet, unless you make some changes to the Phoenix config. If you closed the shell we opened above, you can edit it with\u00a0docker exec -ti server_owncloud_1 vim apps\/phoenix\/config.json<\/code>.<\/p>\n

We need to add the server name, in my case\u00a0\"server\" : \"http:\/\/localhost\",<\/code>, and we need to add the OAuth2 clientID, url, and authurl, so the Phoenix app can get authorized. You can\u00a0generate a clientID in the settings:<\/p>\n

\n
\"Add
You can generate a client ID in the admin settings. Just add a callback URL like http:\/\/localhost\/apps\/phoenix\/oidc-callback.html.<\/em><\/figcaption><\/figure>\n<\/div>\n

The callback URL needs to be something like\u00a0http:\/\/localhost\/apps\/phoenix\/oidc-callback.html<\/code>, just\u00a0substitute your domain\u00a0if you don\u2019t run the server on your local machine. Then you can copy-paste the client ID \u2013 we don\u2019t need the client secret.<\/p>\n

After you added all these things to the config, your config.json should look similar to this:<\/p>\n

{\r\n  \"server\" : \"http:\/\/localhost\",\r\n  \"theme\": \"owncloud\",\r\n  \"version\": \"0.1.0\",\r\n  \"auth\": {\r\n    \"clientId\": \"1HO23PZlQv7kCG4qR--------------------------------\",\r\n    \"url\": \"http:\/\/localhost\/index.php\/apps\/oauth2\/api\/v1\/token\",\r\n    \"authUrl\": \"http:\/\/localhost\/index.php\/apps\/oauth2\/authorize\"\r\n  },\r\n  \"apps\" : [\r\n    \"files\"\r\n  ]\r\n}<\/code><\/pre>\n
You might need to adjust these values for your domain or for play-with-docker.<\/p>\n
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\u00e0! Now you can try out the current state of the project.<\/p>\n
\"A
The current state of Phoenix \u2013 there are already many components to create pages and apps.<\/em><\/figcaption><\/figure>\n
Enable Trash Bin and Private\/Public Links<\/h3>\n
The trash bin and public\/private link features in Phoenix need some APIs which are in \u201cbeta\u201d phase. For testing those features you need ownCloud Server version 10.3, which will come out soon. You can use the\u00a0alpha2<\/a>\u00a0to try it out.<\/p>\n
To make those features work, we need two additional config settings in the\u00a0config.php<\/code>. Edit them with\u00a0docker exec -ti server_owncloud_1 vim config\/config.php<\/code>.<\/p>\n
We need to allow the experimental APIs:\u00a0dav.enable.tech_preview => true,<\/code>\u00a0and we need to add the Phoenix URL to the config.php, in my case:\u00a0'phoenix.baseUrl' => 'http:\/\/localhost\/apps\/phoenix',<\/code><\/p>\n
With this setup, you can try out everything which is already in Phoenix!<\/p>\n
Next Development Steps<\/h2>\n
As mentioned above, Phoenix is work in progress \u2013 even though there were some big steps\u00a0before the conference<\/a>, so we can build on this progress during oCCon19. The ownCloud conference is also a great place for feedback \u2013 all the developers will be there.<\/p>\n
The next steps will include a lot of\u00a0focus on UX\u00a0and tackling the\u00a0admin interface, which is not yet available at all. Soon Phoenix will be a working replacement for the old web interface!<\/p>\n
Try it Out!<\/h2>\n
So now, as you know how to set it up, it\u2019s the perfect time to get started! There are rolling releases from now on, so you can expect a new version every friday.<\/p>\n
You can get the latest release here:<\/p>\n
Get the latest Phoenix release!<\/a><\/p>\n
What do you think about Phoenix? Leave a comment below or share this post on social media!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
The new frontend is ready for testing! Phoenix opens a new era to the ownCloud ecosystem. Its architecture facilitates good design and UX decisions \u2013 but take a look and decide for yourself.<\/p>\n","protected":false},"author":7,"featured_media":42756,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","inline_featured_image":false,"footnotes":""},"categories":[43,603],"tags":[],"class_list":["post-42755","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-apps"],"acf":[],"_links":{"self":[{"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/posts\/42755","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/comments?post=42755"}],"version-history":[{"count":1,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/posts\/42755\/revisions"}],"predecessor-version":[{"id":68031,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/posts\/42755\/revisions\/68031"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/media\/42756"}],"wp:attachment":[{"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/media?parent=42755"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/categories?post=42755"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/tags?post=42755"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}