Announcing ArozOS 2.0 - 5 years journey into my own Web Desktop OS
Tags: webdav, go, linux, ux
Published: 2023-05-12 03:58:45

This is a story about a poor student who wants to build his own storage solution with cheap computers. It all starts with just a few php scripts serving my mp3 files from my server, and now it become one of the most complex and (maybe the) best designed web desktop system out there in the open source world.

2 years ago, I have written another post sharing the v1.0 release and the back story of the system. If you are interested in the evolution of this system starting from 2018, you can check out the following post.
{% embed https://dev.to/tobychui/i-write-my-own-web-desktop-os-for-3-years-and-this-is-what-it-looks-like-now-2903 %}

And this is how it looks like now.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j151d2vl3lrswuosrrlv.png)


{% embed https://github.com/tobychui/arozos %}

## Why v2.0?
The ArozOS v1 is a nice, stable system that enable me to access my files anywhere with internet and a browser from any kind of devices. It perfectly fits my needs when I am a university student studying in a local university. However, as I have started my Master research in another country, now I need to worry about redundancy and remote management issues.

That is why I have rewritten ArozOS to support mounting and sandbox network file shares into virtual drives. As this is not a technical post, I will simply summarize the update as: I rewrote the base of the whole system so that I can have multiple servers around the world and access them through one single gateway nodes. Just like your PC with mounted network drives!

## How ArozOS looks like after 5 years
After 5 years of development, it finally matches the definition of modern OS design in all sense. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8t7eujw1zbq3bdmmhey.png)

We rewritten the UI for the File Manager, which I will describe in details in later sections.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5t106i9lbxtwbfcz5n3n.png)

As usually, the system comes with build in players for all kind of media files. From music, video and photo to professional formats like psd and raw (support via 3rd party plugins)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8s2rxt9vcxlgzrxp2m1e.png)

We continue to work on a simple web development tools that allows users with little to no web development experience to create and host their website on ArozOS with a few clicks. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/59jc2p244ycsw7jrxxoe.png)

For professional use cases, we also provided a new tools that provide Serverless API script powered by ECMA5 (JavaScript like stuffs). So you can host some basic API services with your ArozOS running on your home network. More details below.

## File Manager
The largest update of ArozOS v2 is the File Manager. The File Manage now contain much better RWD interface for mobile and desktop devices with different screen sizes.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4z0295kqb4mrltjr16u.png)

As requested by a lot of users, the File Manager have a new "Detail" viewing mode. This mode allow a simple overview of all file properties within the current folder.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uptov9ujjksnp0u2d9vd.png)

A properties sidebar is added to provide detail views over the selected item. This is very helpful when you do not want the "Details" / "Grid" view in a folder containing tons of files while wanting to have a quick way to check the properties of the selected file.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dc3071pnl1zwebhn5fxl.png)

I also toke a lot of time optimizing the minor places to make user experience much better than the old versions. Including a dynamic adjusted folder path viewer (instead of the old version where it is hard coded to show only 3 folder name at a time)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yz4hws0u476ufcm7kqmm.png)

And it even support inline editing function!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8nthaqug88gjmxc8i0r3.png)

We optimized the rename workflow for desktop users. Instead of a popup window asking for the new file name, now we got inline filename editing as well.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggomoz33rhtduaqxlxlp.png)

Operation popups are moved to the side. So as to optimize for mobile interfaces as well as making the css less painful to maintain due to the old vertical align center design.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vnwuj5iqev9wmr3h7z5m.png)

## Storage Pools
In ArozOS v2, we get a brand new design in the Storage Pool setting interface as well as the backend architecture. In v1.0, you can only mount local disk into ArozOS as "virtual drive", which is basically a mount point on ArozOS, to v2.0's file system abstraction driver design, where you can mount anything that resemble a file system. From local disk, ram disk, network file sharing protocols like SMB, WebDAV, SFTP and FTP, all of them can be mounted as a "disk" in the new ArozOS system.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yghvcfw1uotuewmoyoct.png)

You can easily add new disk into ArozOS via the (+) button. By mounting another ArozOS server into your gateway server, you can access all ArozOS storage pools within a single server, making it much easier to manage.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6obgmeta09r83isk4wpn.png)

We also redesigned the File System Handler properties editor to make it more simplistic and automated. Now many settings are default hidden and only show if you pick something related to it. Making it much more user friendly. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2159wic651489tksctjz.png)

## File Servers
What happens if you want to share files from ArozOS to your devices? In v2.0, you can do it in a lot of ways. For starters, you can use the Share API to share a file from File Manager.

### Share API
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjsmsesrs1fm0i9967rr.png)

In the new Share API, we added new Share modes so you can share to a particular user group or people you want.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/10iz0hk0oclvllkj0jt8.png)

The share interface got a bit update as well.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6j1zbguiqf6csw8ifn6z.png)

Under each of the preview interface, if it is a web compatible file, you will see an automatically generated embed link, where you can use it in your website like wordpress.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jinurrl6cj0pupjee104.png)

In order to make the share looks pretty on social network platforms, I added open graph support to the share API, so when you share the link to others, like discord for example, the preview will show up as a background rendered summary image file.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38g0j11vo12k967un6ov.png)

### Network File Servers
If you want to access the file on other computers without browser, you can use the build in file server functions. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q85xz2ckrdh8e0fdmd0p.png)

The build in file server support WebDAV, SFTP and FTP, where if you have a corresponding client like [WinSCP](https://winscp.net/eng/download.php) or [MacOS build in "Connect to server" function](https://support.apple.com/en-ae/guide/mac-help/mchlp1546/mac), you can access your file remotely from any devices.

### Legacy Browsers Support
Legacy support is always important for ArozOS because even it is 2023, there are still people using Windows 7 or even Windows XP. That is why having backward compatibility is important. In v2.0, I have added a "Directory Server" function in which you can use basic auth to login to your ArozOS and download files from them. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v9pvv8faphqxi1vslu8y.png)

This interface provide the most basic css and html where it takes little to no resources to load. I guess it might even works on NDS's browser. Note that basic auth is generally considered not safe. After you are done with it, you should turn it off.

## Web Development and Serverless
The last update is about web development and serverless. Many of the ArozOS client are design professionals who seeks for a webpage  for showcasing their work. That is why in ArozOS, we included some basic web development tools to get people started with their self hosted webpage.
Personal webpage can be enabled in System Settings 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ob28wkj9qqvgnj0td9rr.png)

A few of my friends who are using ArozOS have a bit of programming skills. With request from them and my interest to try out Serverless, we added the Serverless app, where you can insert a ECMA5 code and let it run when a GET or POST request is received.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4l7cdb7wobm6reklahf4.png)

He also insert another script into scheduler so the currency exchange rage will be updated every night just to make his Telegram currency conversion bot works. In my opinion this is just another cool hacky way to use ArozOS to make things works!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/idr2cbc0t1pdc06ogwdh.png)

# More?
In this update, we added a lot of minor changes to make the UX better from the v1 releases. From Network Statistic Graphs

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jlu6q2g0x3dk18cg8go6.png)

to background tasks viewers
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qsg0qr2ix6ly9919ixq1.png)

and brand new document viewer
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xad1px15xr2gp9hzz96z.png)

If you want to experience this wonderful system yourself, the system can be easily set up using a Raspberry Pi, old PC or laptop with a few line of bash command. 

Hope you like this project! We are continuing updating the modules of this system to better fit our use cases. If you are interested to try it out or even contribute to this project, feel frees to find the source code and give us a star 🌟 in the attached [Github link](https://github.com/tobychui/arozos) below.

{% embed https://github.com/tobychui/arozos %}