- 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.
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=http://192.168.99.100:30080 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
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.