Architecture and overview

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


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.


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.

Overview Diagram

Simplified diagram of components and their relation.

These are the standard used core libraries:

All source-code follows the semantic versioning spesification.

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            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
        index.js         Client bootstrap script
        index.ejs        Base HTML template
        index.scss       Base CSS template
        config.js        Configuration(s)
        favicon.png      Favicon
        index.js         Server bootstrap script
        config.js        Configuration(s)
        index.js         CLI bootstrap script


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

See the official extensions for a list of available modules.


Packages also come in several types.

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 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):

OS.js Web Desktop - © Anders Evenrud <>

results matching ""

    No results matching ""