Architecture and overview

This article gives a brief overview of all of the different components that makes up OS.js.

Codebase

All of the source is written in ES6+. Dependencies are managed with npm.

Client-side scripts are written as ECMAScript Modules (ESM), transpiled with Babel and CSS is written in Sass. Finally bundled with Webpack.

The server-side scripts are written as CommonJS Modules and runs purely on Nodejs.

Testing is done with ESLint, Stylelint and Jest.

Overview

OS.js is a modular Web Desktop framework that consists of two parts: a client and a server.

The client can run independently from the server, but the server provides a lot of features like persistent settings, authentication and backend filesystems.

Server runs on Express and Nodejs (version 12 or later)

Features are implemented via service providers so you can extend, replace or remove most features on your own.

Simplified diagram of components and their relation.

These are the standard used core libraries:

• https://github.com/os-js/osjs-common - Base (used in both client & server)
• https://github.com/os-js/osjs-client - Client Core & Services
• https://github.com/os-js/osjs-server - Server Core & Services
• https://github.com/os-js/osjs-cli - CLI utilities
• https://github.com/os-js/osjs-gui - GUI components
• https://github.com/os-js/osjs-dialogs - GUI Dialogs
• https://github.com/os-js/osjs-panels - GUI Panels
• https://github.com/os-js/osjs-event-emitter - EventEmitter implementation
• https://github.com/os-js/osjs-dev-meta - Development dependencies
• https://github.com/os-js/eslint-config - ESLint configuration
• https://github.com/os-js/stylelint-config - Stylelint configuration

All source-code follows the semantic versioning specification.

Installation (Distribution)

The OS.js repository contains a boilerplate you can use to build and bundle your own installations and distributions.

It comes with the following structure, that you can modify as you see fit:

docker-compose.yml       Docker Compose configuration
entrypoint.sh            Docker execution entrypoint
webpack.config.js        Webpack building configuration
package.json             Dependency definitions
node_modules/            Dependencies (npm package)
dist/                    Build output
vfs/                     Filesystem storage
src/                     Sources
    packages/            Custom packages directory
    client/
        index.js         Client bootstrap script
        index.ejs        Base HTML template
        index.scss       Base CSS template
        config.js        Configuration(s)
        favicon.png      Favicon
    server/
        index.js         Server bootstrap script
        config.js        Configuration(s)
    cli/
        index.js         CLI bootstrap script

Modules

Modules come in several forms and provides ways to extend base functionality.

• Service provider
• CLI task
• Authentication adapter
• Settings adapter
• Filesystem adapter

See the official extensions for a list of available modules.

Packages

Packages also come in several types.

• Application
• Iframe Application (same as above, but different template)
• Theme
• Icons

The standard structure of a package looks like the following:

webpack.config.js        Webpack building configuration
metadata.json            Package information
package.json             Dependency definitions
index.js                 Client source
index.scss               Client styles
server.js                Server source (applications only)
node_modules/            Dependencies (npm package)
dist/                    Build output

See the official extensions for a list of available packages.

Webpack

Webpack is used to build and bundle the installation/distribution, modules and packages.

These are some of the plugins and loaders used throughout codebases (mostly via the dev meta package):

• html-webpack-plugin
• copy-webpack-plugin
• mini-css-extract-plugin
• optimize-css-assets-webpack-plugin
• babel-loader
• file-loader
• sass-loader
• css-loader