Skip to content
This repository has been archived by the owner. It is now read-only.
Switch branches/tags
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Metasfresh Front-end Application

Join the chat at Krihelimeter

For webui-frontend developers


  • Install dependencies

npm install

  • Create config. In that case run:

cp src/config.js.dist src/config.js

Dev environment

  • install npm and node.js

  • make sure you have all dependencies by:

npm install

  • Then remember of creating config:

cp /config.js.dist /config.js

  • Then you should run node server by:

npm start


In case of static version building execute (you are going need Webpack installed globally):

webpack --config

And after that we need config.js in dist folder

cp /config.js.dist /dist/


Remember to ensure before contribution that your IDE supports .editorconfig file, and if needed fix your file before commit changes.

Also remember to respect our code-schema rules. All of them are listed in eslint and stylelint config files. To use them, just run:

npm run-script lint

npm run-script stylelint

(first one is also autofixing when possible)

Notice: CI/CD legacy

Submodule meta-frontend-ansible.git and .gitlab-ci.yml file are legacy of CI/CD.


Project has a generic structure. Name of components and their containers should be strictly defined and keep for better understanding.

MasterWindow - (e.g. /window/143/1000000) It is container for displaying single document view.

DocList - (e.g. /window/143/) It's a view with a list of documents kept in table.

DocumentList - It is a component that combining table for documents, filters, selection attributes, etc...

Window - It is a component that is generating set of sections, columns, element's groups, element's lines and widgets (these are defined by backend layout)

Widget - (MasterWidget, RawWidget) It is a component for getting user input.

Header - It is a top navbar with logo.

Subheader - It is a part of Header and is toggled by button with a home icon.

Sidelist - Toggled by button with hamburger menu icon in Header. It is collapsing panel situated on right side of 'browser window'.

MenuOverlay - These are components that float over Header and contain navigation links, triggered from breadcrumb.

SelectionAttributes - It is a panel that might contain Widgets and it is a side by side table in DocumentList.


  • MasterWindow
    • Container
    • Window
  • DocList
    • Container
    • DocumentList

  • Container
    • Header
    • Modal
    • RawModal
  • Window
    • Widget
    • Tabs
  • DocumentList
    • Table
    • Filters
    • SelectionAttributes

  • Header
    • Subheader
    • Sidelist
    • Breadcrumb
      • MenuOverlay
  • Modal
    • Window
    • Process
  • RawModal
    • DocumentList

For webui-api developers

If you are developing against the metasfresh-webui-api, you might want to run the webui-frontend without locally installing node and npm. If you have a docker host, you can do so by checking out this repository and then following the instructions in the docker file docker/Dockerfile-env.

Thanks to issue #1013 and Seweryn Zeman.