- Install dependencies
npm install
- Create config. In that case run:
cp src/config.js.dist src/config.js
-
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
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 webpack.prod.js
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.
Actual cypress tests reside in the metasfresh-webui-frontend repo.
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 the container for displaying a single document view (document main view, detailed 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 a set of sections, columns, elements groups, elements lines and widgets (these are defined by the 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
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
.