web-apps

The frontend for Euro-Office Document Server and Euro-Office Desktop Editors. Builds the program interface and allows the user create, edit, save and export text documents, spreadsheets, and presentations.

Previous versions

Until 2019-10-23 the repository was called web-apps-pro.

Project information

Official website: https://github.com/Euro-Office

Code repository: https://github.com/Euro-Office/web-apps

User feedback and support

If you have any problems with or questions about Euro-Office Document Server, please visit our official forum: github.com/euro-office or you can ask and answer Euro-Office development questions on [Stack Overflow][3].

Styling

Styling is accomplished via LESS, there is the content set by Euro-Office. Before you do anything, please read the section under this about modifications.

There are several hundred LESS files, organised in several folders:

Common (shared)

apps/common/embed/resources/less/
apps/common/forms/resources/less/
apps/common/main/resources/less/
apps/common/main/resources/mods/less/
apps/common/mobile/resources/less/

Common is the most important and many of the others just import common.

They use variables:

apps/common/main/resources/less/variables.less <- majority seem to be shared from there.

The variables seem to be a bit haphazard in approach. There is some structure, but not uniformly adhered to. The variables are used in other files, so the lack of structure is not so much an issue.

Importing is via relative paths.

Document Editor

apps/documenteditor/embed/resources/less/
apps/documenteditor/forms/resources/less/
apps/documenteditor/main/resources/less/
apps/documenteditor/mobile/src/less/

Spreadsheet Editor

apps/spreadsheeteditor/main/resources/less/
apps/spreadsheeteditor/mobile/src/less/

Presentation Editor

apps/presentationeditor/embed/resources/less/
apps/presentationeditor/main/resources/less/
apps/presentationeditor/mobile/src/less/

PDF Editor

apps/pdfeditor/main/resources/less/

Visio Editor

apps/visioeditor/main/resources/less/

Each directory has a range of LESS files broken down by area, eg slider, search, buttons etc - too many to list here, but should be helpful in finding the correct place to make style changes

Building

Full Build

Run docker compose from the euro-office/fork/build directory:

# From euro-office/fork/build, enter the container:
docker compose exec eo bash

# Then inside the container:
export BUILD_NUMBER=0 PRODUCT_VERSION=9.3.2 THEME=euro-office && cd /var/www/onlyoffice/web-apps-develop/build && node scripts/build-pipeline.js

Build Flags

Flag	Description
SKIP_MOBILE=1	Skip framework7-react mobile builds (~50s saved)

Environment Variables

Variable	Description
THEME	Theme name to use (e.g., euro-office, default)
BUILD_NUMBER	Build number for versioning
PRODUCT_VERSION	Must match the SDK version (e.g., 9.3.2) — mismatches cause a blank editor
BUILD_ROOT	Output directory (default: ../deploy)

Style modifications

Building

To build this project execute the following commands

cd build
npm install
PRODUCT_VERSION=9.3.2 BUILD_ROOT=/path/to/output THEME=euro-office node scripts/build-pipeline.js

Building to specified directory

A build directory can be specified via BUILD_ROOT:

BUILD_ROOT=/path/to/build PRODUCT_VERSION=9.3.2 THEME=euro-office node scripts/build-pipeline.js

Two new build-time variables were introduced to the code to remove hard-coded paths and make the build configuration more flexible:

BUILD_ROOT
SRC_ROOT

BUILD_ROOT

Several JSON files define build instructions and previously contained hard-coded relative paths, for example:

build/common.json
build/presentationeditor.json
build/documenteditor.json
...

These paths have been replaced with the $BUILD_ROOT variable. During the build process, $BUILD_ROOT is resolved to the actual build root directory, allowing the same configuration to work regardless of where the project is built or deployed.

SRC_ROOT

Some HTML files include inline script replacements during the build (for example, apps/api/documents/cache-scripts.html). The referenced JavaScript paths were previously in SRC_ROOT relative to the file location in BUILD_ROOT.

These paths have been updated to use the @@SRC_ROOT@@ placeholder instead. At build time, this placeholder is replaced with the absolute source directory, ensuring that script references resolve correctly in all environments.

Building using a theme

We want to make upstream updates as painless as possible. From the perspective of making modifications we have added theming capability to the office package.

Theme folder structure

Each theme is a self-contained folder under theme/ at the web-apps root:

theme/euro-office/
  meta/
    config.json           # Brand values (company name, URLs, logo filenames)
  assets/
    img/header/           # Logo SVGs (copied to desktop + mobile resource dirs at build time)
    less/                 # LESS variable overrides and CSS rule overrides

config.json

Single source of truth for brand values used by both desktop and mobile editors. Contains company/publisher strings, logo filenames, help/support URLs, and the attribution line shown in the About dialog. Values flow into the built output two ways, depending on target:

• Desktop (webpack pipeline): build/theme.config.mjs reads config.json into themeMeta and exposes values via themeReplacements() (token substitution of {{PLACEHOLDER}} strings e.g. {{PUBLISHER_NAME}}, {{ATTRIBUTION}}) and themeDefines() (webpack DefinePlugin constants).
• Mobile (webpack): build/theme.config.mjs reads the file directly and exposes values as LESS globalVars (logo paths) and DefinePlugin constants (e.g. __PUBLISHER_NAME__) for the mobile webpack builds.

Resolution priority for every field is: environment variable > config.json > hardcoded default. Unset or empty string values fall back to the default (desktop) or cause the row to be hidden in templates that guard on empty strings (e.g. the About dialog).

{
  "company_name": "Euro Office",
  "publisher_name": "Euro Office",
  "publisher_url": "https://github.com/Euro-Office",
  "publisher_address": "",
  "publisher_phone": "",
  "sales_email": "",
  "support_email": "",
  "support_url": "https://github.com/Euro-Office",
  "help_url": "https://github.com/Euro-Office",
  "app_title": "Euro Office",
  "attribution": "Euro-Office was based on ONLYOFFICE by Ascensio System SIA",
  "mobile_logo_light": "eo_logo_light.svg",
  "mobile_logo_dark": "eo_logo_dark.svg",
  "forms_logo_light": "eo_logo_dark.svg",
  "forms_logo_dark": "eo_logo_light.svg"
}

To add a new field: add the key here, wire it in build/theme.config.mjs (themeReplacements/themeDefines/themeGlobalVars), then reference the resulting {{TOKEN}} or __TOKEN__ from the view code.

Build

THEME=euro-office PRODUCT_VERSION=9.3.2 BUILD_ROOT=/path/to/output node scripts/build-pipeline.js

The pipeline's deploy-theme-images step:

1. Reads config.json via build/theme.config.mjs for brand token substitution
2. Copies images to apps/common/main/resources/img/ (desktop) and apps/common/mobile/resources/img/ (mobile)
3. LESS variable overrides are picked up from assets/less/ at webpack compile time via themeGlobalVars()

Token substitution ({{PUBLISHER_NAME}} etc.) and webpack DefinePlugin constants (__PUBLISHER_NAME__) are injected during the webpack build step.

Creating a new theme

1. Copy theme/euro-office/ to theme/yourtheme/
2. Edit meta/config.json with your brand values
3. Replace logo SVGs in assets/img/header/
4. Adjust LESS variables in assets/less/theme.less
5. Build with THEME=yourtheme PRODUCT_VERSION=9.3.2 BUILD_ROOT=/path/to/output node scripts/build-pipeline.js

LESS guidelines

Use variables in theme.less as much as possible — this avoids duplicate CSS in the final output. Only use overrides/ for rules that cannot be changed via variables. The overrides directory should mirror the structure of the main app for clarity.

License

web-apps is released under an GNU AGPL v3.0 license. See the LICENSE file for more information.