metasfresh Webui Frontend
Switch branches/tags
v5.23 v5.20 v5.19 v5.18 v5.17 v5.16 v5.15 v5.14 v5.13 v5.12 v5.11 v5.10 v5.9 v5.8 v5.7 v5.6 v5.5 v5.4 v5.3 v5.2 v5.1 v5.0 v4.58.57 v4.57.56 v4.56.55 v4.55.54 v4.55.54a v4.54.53 v4.53.52 v4.52.51 release-20180323-before-CP-1679-frontend mergerd_master_20170324-ts jenkins-release_management-update_release-candidate_from_master-14 jenkins-ops-update_release_from_master-101 jenkins-ops-update_release_from_master-99 jenkins-ops-update_release_from_master-98 jenkins-ops-update_release_from_master-97 jenkins-ops-update_release_from_master-96 jenkins-ops-update_release_from_master-95 jenkins-ops-update_release_from_master-94 jenkins-ops-update_release_from_master-93 jenkins-ops-update_release_from_master-92 jenkins-ops-update_release_from_master-91 jenkins-ops-update_release_from_master-90 jenkins-ops-update_release_from_master-89 jenkins-ops-update_release_from_master-88 jenkins-ops-update_release_from_master-87 jenkins-ops-update_release_from_master-86 jenkins-ops-update_release_from_master-85 jenkins-ops-update_release_from_master-84 jenkins-ops-update_release_from_master-82 jenkins-ops-update_release_from_master-81 jenkins-ops-update_release_from_master-80 jenkins-ops-update_release_from_master-79 jenkins-ops-update_release_from_master-78 jenkins-ops-update_release_from_master-77 jenkins-ops-update_release_from_master-76 jenkins-ops-update_release_from_master-75 jenkins-ops-update_release_from_master-74 jenkins-ops-update_release_from_master-73 jenkins-ops-update_release_from_master-72 jenkins-ops-update_release_from_master-70 jenkins-ops-update_release_from_master-69 jenkins-ops-update_release_from_master-68 jenkins-ops-update_release_from_master-67 jenkins-ops-update_release_from_master-66 jenkins-ops-update_release_from_master-53 jenkins-ops-update_release_from_master-52 jenkins-ops-update_release_from_master-51 jenkins-ops-update_release_from_master-50 jenkins-ops-update_release_from_master-49 jenkins-ops-update_release_from_master-48 jenkins-ops-update_release_from_master-47 jenkins-ops-update_release_from_master-46 jenkins-ops-update_release_from_master-45 jenkins-ops-update_release_from_master-43 jenkins-ops-update_release_from_master-42 jenkins-ops-update_release_from_master-41 jenkins-ops-update_release_from_master-40 jenkins-ops-update_release_from_master-39 jenkins-ops-update_release_from_master-37 jenkins-ops-update_release_from_master-36 jenkins-ops-update_release_from_master-35 jenkins-ops-update_release_from_master-34 jenkins-ops-update_release_from_master-31 jenkins-ops-update_release_from_master-30 jenkins-ops-update_release_from_master-29 jenkins-ops-update_release_from_master-27 jenkins-ops-update_release_from_master-26 jenkins-ops-update_release_from_master-25 jenkins-ops-update_release_from_master-18 jenkins-ops-update_master_from_release-49 RC-2017-17-20170428 201270614-1 20180925-1 20180921-2 20180921-1 20180807-1 20180802-1 20180731-1
Nothing to show
Clone or download
Latest commit 0945360 Oct 19, 2018
Failed to load latest commit information.
.storybook Add example story Oct 24, 2017
cypress #2002-frontend - Cypress: allow selecting and editing subtabs Oct 11, 2018
docker/nginx remove files that are not used or document unused things Jul 26, 2018
plugins - fix paths in Readme Jun 4, 2018
src Merge pull request #2019 from metasfresh/dev-2009 Oct 19, 2018
test_setup Adjustments because of lint errors Jul 17, 2018
.babelrc - fix tests and config for prod builds May 14, 2018
.dockerignore failed attempt with node docker image; see Dockerfile.node-dev-failed Jul 13, 2017
.editorconfig .editorconfig + contribution info Feb 15, 2017
.eslintignore - separate .eslintrc for cypress Jul 26, 2018
.eslintrc - separate .eslintrc for cypress Jul 26, 2018
.gitignore Merge branch 'master' into dev-sales-order-tests Jul 19, 2018
.htaccess Docs for server configuration, added root .htaccess Aug 26, 2016
.stylelintrc New style rule Feb 27, 2017 Update Aug 1, 2017 Harmonizing the Issue Template with metasfresh Oct 2, 2017
Jenkinsfile add the docker image name to the build description (for C&P) Sep 4, 2018 restore the license file Aug 1, 2017 remove files that are not used or document unused things Jul 26, 2018
config.js.dist - fix extended webpack config #1686 Jun 7, 2018
cypress.json add clickOnCheckBox command; also.. Sep 30, 2018
favicon.png New icons, test endpoint for mocked API, data fetching Aug 12, 2016
index.html - attach plugins.js via webpack if needed #1955 Sep 21, 2018
licenses.json Product attributes Nov 25, 2016
package.json Merge pull request #2011 from metasfresh/dev-2005 Oct 19, 2018
plugins.js.dist - revert config changes May 14, 2018
server.js yarn lint --fix Feb 28, 2018
webpack.config.js - attach plugins.js via webpack if needed #1955 Sep 21, 2018 - alias for the plugins import in prod mode Jun 4, 2018
yarn.lock Update yarn.lock Oct 19, 2018

Metasfresh Front-end Application

Codacy Badge 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

Production environment

When running in production mode you will need to build the static version of the app and serve it from an http-compatible server. Here's a quick guide how you can run production mode locally.


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/


The easiest way to test production build is by serving it via a simple http-server. You can install it globally with npm :

npm install http-server -g

and then run it pointing to your dist folder:

http-server ./dist

Now open your browser and go to localhost:8080 to see the application running.


Application comes with a set of tests, both unit as well as functional.

Cypress e2e tests


Note that you might need to first install cypress; this documentation tells you how:

npm install cypress --save-dev

Also note that in additiona you might also need to do a full npm install afterwards.

Also, you'll need to configure the login credentials/API endpoints. One file is responsible for this:

  • cypress/config.js - stores API endpoints and login credentials

There is a file cypress/config.js_template which you can copy to cypress/config.js and edit according to your needs.


To run the tests, navigate to this repository's root folder type this in the terminal:

npm run cypress:open

If the webui you test against is not running on http://localhost:3000 you can start cypress like this (example):

CYPRESS_baseUrl= npm run cypress:open

When it runs, you can select particular test suites, or the whole suite to run.


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)


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/nginx/Dockerfile.