docs: first draft of the custom apps in ocis and web blog post, part-1

docs/writings/web-apps/part-1.md

@@ -0,0 +1,196 @@
+### Blog Post Series: Understanding Web Applications in oCIS
+
+#### Part 1: Overview and How to Load Extensions
+
+---
+
+**Introduction to Web Applications in oCIS**
+
+In latest rapid-paced virtual global, web packages play a vital position in improving user experience and capability.
+
+For corporations the use of ownCloud Infinite Scale (oCIS), knowledge a way to leverage internet packages can drastically decorate their productivity and consumer engagement.
+
+In this collection, we can delve into the arena of internet packages in oCIS, specializing in how extensions are loaded and utilized.
+
+---
+
+**Why We Need Web Applications**
+
+Web applications are essential for numerous motives:
+
+1. **Accessibility**: Web programs can be accessed from any tool with an internet connection, imparting flexibility and comfort.
+2. **Customization**: They allow businesses to customise and make bigger the capability in their platform to fulfill unique wishes.
+3. **Integration**: Web applications allow seamless integration with 0.33-birthday party services and tools, enhancing ordinary functionality.
+
+By leveraging web packages, companies can create a greater tailored and green environment for their users, making sure that they have got the equipment they need to succeed.
+
+---
+
+**Use Cases and Benefits of Custom Extensions**
+
+The ability to provide custom extensions in oCIS opens up a myriad of opportunities for agencies. Here are some key use cases and blessings:
+
+1. **Tailored User Experience**: Custom extensions permit corporations to create a completely unique user revel in that aligns with their precise desires.
+   For instance, a employer can develop a custom dashboard that shows applicable metrics and reports, enhancing productiveness and selection-making.
+
+2. **Third-Party Integrations**: Organizations can integrate third-birthday party offerings and equipment directly into their oCIS surroundings.
+   This can include CRM systems, advertising automation gear, or custom records visualization equipment, presenting a seamless workflow for customers.
+
+3. **Enhanced Security and Compliance**: Custom extensions can assist corporations adhere to precise security and compliance requirements through including functions like
+   custom authentication mechanisms, records encryption tools, or compliance reporting modules.
+
+4. **Branding and Identity**: By customizing the look and feel of the internet packages, businesses can make sure their brand identification is constantly represented throughout their virtual platforms.
+   This can encompass custom issues, logos, and colour schemes.
+
+5. **Innovative Features**: Custom extensions permit businesses to test with new functions and functionalities that are not to be had within the default setup.
+   This can consist of AI-powered tools, advanced analytics, or unique collaboration capabilities.
+
+The capacity to offer custom extensions makes oCIS a effective and bendy platform which could adapt to the evolving needs of any business enterprise.
+
+It empowers administrators to craft answers that aren't handiest useful but additionally aligned with their strategic desires.
+
+---
+
+**Loading Extensions in oCIS**
+
+In oCIS, extensions can be loaded at each construct time and runtime. Understanding the distinction among those  methods is fundamental to successfully dealing with and using extensions.
+
+- **Build Time Extensions**: These are integrated into the binary at some point of the build manner. They are part of the middle device and can't be altered with out rebuilding the device.
+  This ensures a stable and regular surroundings in which critical packages are constantly to be had.
+
+- **Run Time Extensions**: These are loaded dynamically at runtime, presenting extra flexibility.
+  They may be positioned in a designated listing and are automatically picked up through the gadget. This permits administrators to effortlessly upload, update, or get rid of extensions as wanted, with out the need for a gadget rebuild.
+
+---
+
+**How to Load Extensions**
+
+1. **Build Time Extensions**:
+   - Located in `<ocis_repo>/services/web/assets/apps`.
+   - Integrated into the machine during the build technique.
+   - These extensions are a part of the binary and can't be changed at runtime.
+
+2. **Run Time Extensions**:
+   - Stored inside the listing targeted with the aid of the `WEB_ASSET_APPS_PATH` environment variable.
+   - By default, this course is `$OCIS_BASE_DATA_PATH/internet/apps`, but it is able to be custom designed.
+   - Run time extensions are routinely loaded from this listing, making it smooth to add or take away extensions without rebuilding the machine.
+
+The potential to load extensions at runtime is especially powerful, as it permits for a excessive degree of customization and flexibility. Administrators can speedy respond to converting desires by using including new capability or putting off outdated extensions.
+
+---
+
+**Manifest File**
+
+Each internet application ought to include a `happen.Json` or `appear.Yaml` report. This document includes essential data approximately the application, consisting of its access point and configuration info.
+
+**Example of a manifest.Json record**:
+```json
+{
+   "entrypoint": "index.js",
+   "config": {
+      "maxWidth": 1280,
+      "maxHeight": 1280
+   }
+}
+```
+
+The manifest file ensures that the gadget efficiently recognizes and integrates the extension. It is a important factor for defining how the internet utility need to be loaded and what configurations it calls for.
+
+---
+
+**Custom Configuration and Overwriting Options**
+
+Administrators can offer custom configurations in the `$OCIS_BASE_DATA_PATH/config/apps.Yaml` report. This allows for satisfactory-tuning of each extension's conduct and settings.
+
+The `apps.Yaml` record can comprise custom settings that overwrite the default configurations specific inside the extension's `manifest.Json` file.
+
+**Example of apps.Yaml report**:
+```yaml
+photograph-viewer-obj:
+  config:
+    maxHeight: 640
+    maxSize: 512
+```
+
+In this situation, the `maxHeight` price designated within the `apps.Yaml` file will overwrite the fee from the `occur.Json` record.
+
+This provides administrators with the power to customize extensions to better meet the particular needs of their surroundings.
+
+---
+
+**Using Custom Assets**
+
+Besides configuration, directors would possibly need to personalize positive assets within an extension, inclusive of emblems or images.
+
+This may be carried out with the aid of putting the custom assets within the route described by means of `WEB_ASSET_APPS_PATH`.
+
+For instance, if the default `image-viewer-dfx` software consists of a brand that an employer wants to update,
+they can area the brand new logo in a listing structured like `WEB_ASSET_APPS_PATH/picture-viewer-dfx/brand.Png`.
+
+The machine will load this tradition asset, replacing the default one. This method permits for smooth and powerful customization without altering the core software code.
+
+---
+
+**Configuration Example**
+
+To illustrate how custom configurations and property paintings together, keep in mind the following scenario:
+
+1. **Default Configuration**:
+   ```json
+   {
+     "entrypoint": "index.js",
+     "config": {
+       "maxWidth": 1280,
+       "maxHeight": 1280
+     }
+   }
+   ```
+
+2. **Custom Configuration in apps.yaml**:
+   ```yaml
+   image-viewer-obj:
+     config:
+       maxHeight: 640
+       maxSize: 512
+   ```
+
+three. **Final Merged Configuration**:
+   ```json
+   {
+      "external_apps": [
+         {
+            "id": "image-viewer-obj",
+            "path": "index.js",
+            "config": {
+               "maxWidth": 1280,
+               "maxHeight": 640,
+               "maxSize": 512
+            }
+         }
+      ]
+   }
+   ```
+
+This instance demonstrates how the device merges default and custom configurations to create the final settings utilized by the software.
+
+---
+
+**Conclusion**
+
+In this primary a part of our collection, we've got covered the basics of internet applications in oCIS, focusing on the significance of net applications,
+how extensions are loaded, and how administrators can customise these extensions thru configuration and asset overwriting.
+
+Understanding these basics is important for successfully managing and leveraging net programs in oCIS.
+
+In the following put up, we can dive deeper into the method of writing and going for walks a fundamental extension.
+
+Stay tuned for unique commands and guidelines on getting started with your first net extension in oCIS.
+
+---
+
+**Resources**:
+
+- [Web Readme](https://github.Com/owncloud/ocis/tree/master/offerings/web)
+- [Overview of Available Extensions](https://github.Com/owncloud/extraordinary-ocis)
+- [Introduction PR](https://github.Com/owncloud/ocis/pull/8523)
+- [Design Document and Requirements](https://github.Com/owncloud/ocis/problems/8392)

docs/writings/web-apps/run/apps/hello/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+.pnpm-store

docs/writings/web-apps/run/apps/hello/.editorconfig

@@ -0,0 +1,14 @@
+root = true
+
+[*]
+insert_final_newline = true
+charset = utf-8
+trim_trailing_whitespace = true
+end_of_line = lf
+
+[*.{js,json,vue,feature}]
+indent_style = space
+indent_size = 2
+
+[*.{md,markdown}]
+trim_trailing_whitespace = false

docs/writings/web-apps/run/apps/hello/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@ownclouders",
+  "settings": {
+    "jest": {
+      "version": "remove jest rules from @ownclouders/eslint-config and remove this"
+    }
+  }
+}

docs/writings/web-apps/run/apps/hello/.prettierrc.json

@@ -0,0 +1 @@
+"@ownclouders/prettier-config"

docs/writings/web-apps/run/apps/hello/Dockerfile

@@ -0,0 +1,10 @@
+FROM node:20-slim AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+WORKDIR /app
+COPY ./package.json .
+COPY ./pnpm-lock.yaml .
+RUN pnpm install --frozen-lockfile
+COPY . .
+CMD [ "pnpm", "build:w" ]

docs/writings/web-apps/run/apps/hello/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "web-app-hello",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "lint": "eslint src --ext vue --ext js --ext ts --color",
+    "build": "pnpm vite build",
+    "build:w": "pnpm vite build --watch --mode development"
+  },
+  "devDependencies": {
+    "@ownclouders/eslint-config": "0.0.1",
+    "@ownclouders/extension-sdk": "0.0.5-alpha.2",
+    "@ownclouders/prettier-config": "0.0.1",
+    "@ownclouders/tsconfig": "0.0.5-alpha.1",
+    "@types/node": "^20.2.3",
+    "eslint": "^8.25.0",
+    "prettier": "^3.3.2",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.3",
+    "vite-plugin-generate-file": "^0.1.1",
+    "vite-plugin-static-copy": "^1.0.6",
+    "vue": "^3.4.31"
+  },
+  "peerDependencies": {
+    "@ownclouders/web-pkg": "0.0.5-alpha.9"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "design-system*"
+      ]
+    }
+  },
+  "dependencies": {
+    "three": "^0.166.1"
+  },
+  "packageManager": "[email protected]"
+}