From a6ddb6fc3471c35420e3d1a64e69c9f1439fff3e Mon Sep 17 00:00:00 2001 From: Pascal Wengerter Date: Thu, 16 Sep 2021 10:30:48 +0000 Subject: [PATCH] commit 76036fd83dbd3a787db8321114e88d81d04cf63f Merge: a9ed4c19 a445a3dd Author: Pascal Wengerter Date: Thu Sep 16 11:30:21 2021 +0100 Merge pull request #5752 from owncloud/skeleton-app Introduce Skeleton-Application, Runtime hooks and demystify runtime boot logic --- custom-apps/_index.md | 86 +++++++++++++++++++++++++++++++++++++++++++ theming/_index.md | 1 - 2 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 custom-apps/_index.md diff --git a/custom-apps/_index.md b/custom-apps/_index.md new file mode 100644 index 00000000000..3ca880f3c1a --- /dev/null +++ b/custom-apps/_index.md @@ -0,0 +1,86 @@ +--- +title: "Custom Apps" +date: 2021-08-26T00:00:00+00:00 +weight: 55 +geekdocRepo: https://github.com/owncloud/web +geekdocEditPath: edit/master/docs/custom-apps +geekdocFilePath: _index.md +geekdocCollapseSection: true +--- + +{{< toc >}} + +## Introduction + +In the new `web` frontend, the way custom/external apps are handled has fundamentally changed from the approach of PHP-based ownCloud X stack. +Now, all you have to do is provide a bundled Vue app and reference it in your configuration! Please note that any existing apps you may be used to can not simply be ported from the old to the new frontend. + +This page documents how you can set up an example app within your frontend repo and play around with different kinds of apps and extensions. This way, you can explore how to provide users of your ownCloud with more functionality. + +## Setting up the example "skeleton app" + +{{< hint info >}} +This guide assumes you have either an oCIS or ownCloud 10 backend running and followed the [getting started guide]({{< ref "../getting-started.md" >}}) for setting up a development environment with the `web` frontend, having it running via either `yarn serve` or `yarn build:w`. You should be able to use the web UI on localhost using the respective port you've assigned (defaults are `:8080` for OC10 and `:9200` for oCIS) and see changes to your . +{{< /hint >}} + +From the root of the [web repository](https://github.com/owncloud/web), change into the example skeleton app by running + +```sh +cd packages/web-app-skeleton/ +``` + +Then, you can install the necessary dependencies, bundle the code and start a development server by running + +```sh +yarn install && yarn serve +``` + +In your terminal, you should see a success message and rollup (our bundler of choice) serving the content under `localhost:3000`. However, there's nothing to find under this address. + + +In your `config/config.json`, add the skeleton example app to the `"external_apps"` array like below: + + +```json +{ + "id": "skeleton", + "path": "http://localhost:3000/app.js" +} +``` + +After saving the config file (make sure it's still a valid `JSON` format), your running `web` app should be updated automatically. Open your browsers development tools, reload the page and watch for `(SKELETON)` messages in the browser console. + +## Configuration options + +``` +To be defined/documented +- Name, ID, logo +- Nav items, appswitcher items, quick actions +- ... +``` + +## Ways of providing an app + +``` +To be defined/documented (Bundling, CDN, app store, ...) +``` + +## Types of apps + +``` +To be defined/documented +- Application (renderable), e.g. iFrame +- Extension, e.g. media-viewer +- Quick action, e.g. based on WOPI/Appserver +- ... +``` + +## Accessing existing functionality + +``` +To be defined/documented +- Styles, Theming +- Notifications +- Authentication, SDK +- ... +``` \ No newline at end of file diff --git a/theming/_index.md b/theming/_index.md index d05ed068e7b..f27fb03d786 100644 --- a/theming/_index.md +++ b/theming/_index.md @@ -1,4 +1,3 @@ - --- title: "Theming" date: 2021-04-01T00:00:00+00:00