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

See development for a more in-depth look at the development process.

Overview Diagram

Simplified diagram of components and their relation.


All of the source is written in ES6+.

Client-side scripts are transpiled with Babel and bundled with Webpack.

If you're not familiar with ES6 modules, you should read about the import and export statements.

The server-side scripts runs on node v8.x+, but uses require instead of import/export.


The OS.js repository is the main codebase that builds and bundles all of the components together.

This is the standard layout for an OS.js distribution source:

You can change this as you see fit, because all of the actual OS.js codebase is provided separately with npm packages.

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


The client runs in any modern browser. The bundles are compiled down to ES5 whenever possible.

Most of the features in the client are provided by service providers.

See the official resources for modules.

You can read more about the standard provided services in the Core Tutorial.


The server runs on Node.js (v8.x or later) on Express.

Most of the features in the client are provided by service providers.

See the official resources for modules.


Webpack configurations are defined in webpack.config.js in the root directory of all client-side modules and packages.

Usually a index.js and index.scss file are set up as entry-points in this configuration, which will create bundled output in the dist/ folder.

The output is usually named main.js and main.css (and any resources imported {dir/}{hash}.{extension}).


Modules come in several forms: service provider, cli task, authentication adapter, settings adapter, filesystem adapter.

See the official resources for modules.


Packages are divided into several types: application, theme and icons. All of these types are set-up and built in the same way, so to keep this article brief it will focus on applications.

A simple diagram of how package files are built and consumed:

Package Diagram

See the official resources for packages.

results matching ""

    No results matching ""