Getting Started

Source Code

The source code is hosted in the ocis repo in the web folder.

Installation

Make sure to have Docker, Docker-Compose, Node.js and pnpm installed. If you plan to work with translations, you also need to install the Transifex Client. Note when installing the Transifex Client, change to your ~/.local/bin directory first because it installs at the current location.

After cloning the source code, install the dependencies via pnpm install and bundle the frontend code by running pnpm build:w.

Docker

Then, you can start the server by running docker-compose up ocis and access it via https://host.docker.internal:9200. If you’re not using Docker Desktop, you might have to modify your /etc/hosts and add 127.0.0.1 host.docker.internal to make the host.docker.internal links work.

The bundled frontend code automatically gets mounted into the Docker containers, recompiles on changes and you can log in using the demo user (admin/admin) and take a look around!

For more details on how to set up Web for development, please see tooling.

Configuration

Depending on the backend you are using, there are sample config files provided in the config folder inside the web folder of the ocis repository. See below for available backends. Also, find some of the configuration details below.

  • customTranslations You can specify one or multiple files to overwrite existing translations. For example set this option to [{url: "https://localhost:9200/customTranslations.json"}].

Options

  • options.accountEditLink
    This accepts an object with the following optional fields to have a link on the account page:

    • options.accountEditLink.href
      Set a different target URL for the edit link. Make sure to prepend it with http(s)://.

  • options.disableFeedbackLink
    Set this option to true to disable the feedback link in the topbar. Keeping it enabled (value false or absence of the option) allows ownCloud to get feedback from your user base through a dedicated survey website.

  • options.feedbackLink
    This accepts an object with the following optional fields to customize the feedback link in the topbar:

    • options.feedbackLink.href
      Set a different target URL for the feedback link. Make sure to prepend it with http(s)://. Defaults to https://owncloud.com/web-design-feedback.

    • options.feedbackLink.ariaLabel
      Since the link only has an icon, you can set an e.g. screen reader accessible label. Defaults to ownCloud feedback survey.

    • options.feedbackLink.description
      Provide any description you want to see as tooltip and as accessible description. Defaults to Provide your feedback: We’d like to improve the web design and would be happy to hear your feedback. Thank you! Your ownCloud team.

  • options.sharingRecipientsPerPage
    Sets the amount of users shown as recipients in the dropdown when sharing resources. Default amount is 200.

  • options.runningOnEos
    Set this option to true if running on an EOS storage backend to enable its specific features. Defaults to false, and we recommend reaching out to the ownCloud web team if you’re not CERN and thinking about enabling this feature flag.

  • options.cernFeatures
    Enabling this will activate CERN-specific features. Defaults to false.

  • options.editor.autosaveEnabled
    Specifies if the autosave for the editor apps is enabled.

  • options.editor.autosaveInterval
    Specifies the time interval for the autosave of editor apps in seconds.

  • options.editor.openAsPreview
    Specifies if non-personal files i.e. files in shares, spaces or public links are being opened in read only mode so the user needs to manually switch to edit mode. Can be set to true, false or an array of web app/editor names.

  • options.contextHelpersReadMore
    Specifies whether the "Read more" link should be displayed or not.

  • options.tokenStorageLocal
    Specifies whether the access token will be stored in the local storage when set to true or in the session storage when set to false. If stored in the local storage, login state will be persisted across multiple browser tabs, means no additional logins are required. Defaults to true.

  • options.loginUrl
    Specifies the target URL to the login page. This is helpful when an external IdP is used. This option is disabled by default. Example URL like: https://www.myidp.com/login.

  • options.logoutUrl
    Adds a link to the user’s profile page to point him to an external page, where he can manage his session and devices. This is helpful when an external IdP is used. This option is disabled by default.

  • options.userListRequiresFilter
    Defines whether one or more filters must be set in order to list users in the Web admin settings. Set this option to 'true' if running in an environment with a lot of users and listing all users could slow down performance. Defaults to false.

  • options.concurrentRequests
    This accepts an object with the following optional fields to customize the maximum number of concurrent requests in code paths where we limit concurrent requests

    • resourceBatchActions
      Concurrent number of file/folder/space batch actions like e.g. accepting shares. Defaults to 4.

    • sse
      Concurrent number of SSE event handlers. Defaults to 4.

    • shares
      Accepts an object regarding the following sharing related options:

      • create`
        Concurrent number of share invites. Defaults to 4.

      • list
        Concurrent number of individually loaded shares. Defaults to 2.

Scripts and Styles

Web supports adding additional CSS and JavaScript files to further customize the user experience and adapt it to your specific needs. Please consider opening a feature request if you feel like your customization could be a benefit to the upstream project, and keep an eye open for future major releases of web since this API may change.

  • styles
    Expects an array of objects that specify a href attribute, pointing to the path/URL of your stylesheet, such as:
    [{ "href": "css/custom.css" }].

  • scripts
    Expects an array of objects that specify a src attribute, pointing to the path/URL of your script, and an optional async attribute (defaults to false), such as:
    [{ "src": "js/custom.js", "async": true }].

Sentry

Web supports Sentry to provide monitoring and error tracking. To enable sending data to a Sentry instance, you can use the following configuration keys:

  • sentry.dsn
    Should contain the DSN for your sentry project.

  • sentry.environment
    Lets you specify the environment to use in Sentry. Defaults to production.

Any other key under sentry will be forwarded to the Sentry initialization. You can find out more settings in the Sentry docs.

If you are using an old version of Sentry (9 and before), you might want to add the setting sentry.autoSessionTracking: false to avoid errors related to breaking changes introduced in the integration libraries.

Setting Up Backend and Running

Since web version larger than 7.0.2, web only supports oCIS, whereas older versions (< 7.1.0) also supported the classic ownCloud Server. This has been deprecated and is no longer available.

Running