Architecture and overview
This article gives a brief overview of all of the different components that makes up OS.js.
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.
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 spesification.
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 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):