In today’s fast-paced digital world, web applications play a crucial role in enhancing user experience and functionality. Infinite Scale comes with a world-class web interface to manage file resources, but it can be extended by utilizing ownCloud Infinite Scale (oCIS) as a construction set for custom web apps.<\/p>\n
For organizations using oCIS, understanding how to leverage web applications can significantly enhance their productivity and user engagement.<\/p>\n
In this series, we will delve into the world of web applications in oCIS, focusing on how extensions are loaded and utilized.<\/p>\n
The ability to provide custom extensions in oCIS opens up myriad possibilities for organizations. Here are some key use cases and benefits:<\/p>\n
The ability to provide custom extensions makes oCIS a powerful and flexible platform that can adapt to the evolving needs of any organization. It empowers operators of the cloud to craft solutions that are not only functional but also aligned with their strategic goals.<\/p>\n
In oCIS, extensions can be loaded at both build time and runtime. Understanding the difference between these two methods is key to effectively managing and utilizing extensions.<\/p>\n
Extensions, also known as apps, are written in JavaScript, but we use TypeScript because of all its benefits. TypeScript enhances the development process with features such as static typing, which helps catch errors early and improves code maintainability and scalability.<\/p>\n
<ocis_repo>\/services\/web\/assets\/apps.<\/code><\/li>\n- Integrated into the system during the build process.<\/li>\n
- These extensions are part of the binary and cannot be modified at runtime.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
\n- Runtime Extensions:<\/strong>\n
\n- Stored in the directory specified by the\u00a0
WEB_ASSET_APPS_PATH<\/code> environment variable.<\/li>\n- By default, this path is\u00a0
$OCIS_BASE_DATA_PATH\/web\/apps<\/code>, but it can be customized.<\/li>\n- Runtime extensions are automatically loaded from this directory, making it easy to add or remove extensions without rebuilding the system.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
The ability to load extensions at runtime is particularly powerful, as it allows for a high degree of customization and flexibility. You can quickly respond to changing needs by adding new functionality or removing outdated extensions.<\/p>\n
Manifest File<\/h4>\n
Each web application must include a\u00a0manifest.json<\/code>\u00a0or\u00a0manifest.yaml<\/code>\u00a0file. This file contains essential information about the application, including its entry point and configuration details.<\/p>\nExample of a manifest.json file:<\/strong>
\n{ \"entrypoint\": \"index.js\",
\n \"config\": {
\n \"maxWidth\": 1280,
\n \"maxHeight\": 1280
\n }
\n}
\n<\/code>
\nThe manifest file ensures that the system correctly recognizes and integrates the extension. It is a crucial component for defining how the web application should be loaded and what configurations it requires.<\/p>\nCustom Configuration and Overwriting Options<\/h4>\n
You can provide custom configurations in the\u00a0$OCIS_BASE_DATA_PATH\/config\/apps.yaml<\/code>\u00a0file. This allows for fine-tuning of each extension’s behavior and settings.
\nThe\u00a0apps.yaml<\/code>\u00a0file can contain custom settings that overwrite the default configurations specified in the extension’s\u00a0manifest.json<\/code>\u00a0file.<\/p>\nExample of apps.yaml file:<\/strong>
\nimage-viewer-obj:
\n config:
\n maxHeight: 640
\n maxSize: 512
\n<\/code>
\nIn this example, the\u00a0maxHeight\u00a0value specified in the\u00a0apps.yaml<\/code>\u00a0file will overwrite the value from the\u00a0manifest.json<\/code>\u00a0file.
\n
\nThis provides you with the flexibility to customize extensions to better meet the specific needs of their environment.<\/p>\nUsing Custom Assets<\/h4>\n
Besides configuration, you might need to customize certain assets within an extension, such as logos or images.
\nThis can be achieved by placing the custom assets in the path defined by\u00a0WEB_ASSET_APPS_PATH<\/code>.
\nFor instance, if the default\u00a0image-viewer-dfx<\/code>\u00a0application includes a logo that an organization wants to replace, they can place the new logo in a directory structured like\u00a0WEB_ASSET_APPS_PATH\/image-viewer-dfx\/logo.png<\/code>.<\/p>\nThe system will load this custom asset, replacing the default one. This method allows for easy and effective customization without altering the core application code.<\/p>\n
Configuration Example<\/h4>\n
To illustrate how custom configurations and assets work together, consider the following scenario:
\nDefault Configuration:<\/strong>
\n \"entrypoint\": \"index.js\",
\n \"config\": {
\n \"maxWidth\": 1280,
\n \"maxHeight\": 1280
\n }
\n}
\n<\/code>
\nCustom Configuration in apps.yaml:<\/strong>
\nimage-viewer-obj:
\n config:
\n maxHeight: 640
\n maxSize: 512
\n<\/code>
\nFinal Merged Configuration:<\/strong>
\n{
\n \"external_apps\": [
\n {
\n \"id\": \"image-viewer-obj\",
\n \"path\": \"index.js\",
\n \"config\": {
\n \"maxWidth\": 1280,
\n \"maxHeight\": 640,
\n \"maxSize\": 512
\n }
\n }
\n ]
\n}
\n<\/code>
\nThis example demonstrates how the system merges default and custom configurations to create the final settings used by the application.<\/p>\nConclusion<\/h4>\n
In this first part of our series, we’ve covered the basics of web applications in oCIS, focusing on the importance of web applications, how extensions are loaded, and how you can customize these extensions through configuration and asset overwriting.<\/p>\n
Understanding these fundamentals is crucial for effectively managing and leveraging web applications in oCIS.<\/p>\n
In the next post, we will dive deeper into the process of writing and running a basic extension.<\/p>\n
Stay tuned for detailed instructions and tips on getting started with your first web extension in oCIS.<\/p>\n
Resources:<\/h5>\n\n- Web Readme<\/a><\/li>\n
- Overview of Available Extensions<\/a><\/li>\n
- Introduction PR<\/a><\/li>\n
- Design Document and Requirements<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
In today\u2019s fast-paced digital world, web applications play a crucial role in enhancing user experience and functionality. Infinite Scale comes with a world-class web interface to manage file resources, but it can be extended by utilizing ownCloud Infinite Scale (oCIS) as a construction set for custom web apps.<\/p>\n","protected":false},"author":38,"featured_media":78934,"comment_status":"closed","ping_status":"closed","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":[603,43,509],"tags":[],"class_list":["post-78926","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-apps","category-blog","category-infinite-scale"],"acf":[],"_links":{"self":[{"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/posts\/78926","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\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/comments?post=78926"}],"version-history":[{"count":11,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/posts\/78926\/revisions"}],"predecessor-version":[{"id":78947,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/posts\/78926\/revisions\/78947"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/media\/78934"}],"wp:attachment":[{"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/media?parent=78926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/categories?post=78926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/tags?post=78926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}