The JVx ReactUI Client is a web application for JVx applications. It is used to dynamically render work-screens, created with the JVx framework. All layouts of JVx are supported. The client has two different menu-layouts and a login mechanism. It is possible to either run the ReactUI as standalone web application or as library to create your own react-projects or to even embed it into an existing project.
- Node version: 12.1.0 or later
- Java version: 6 or later (for the JVx application)
- A JVx application, running on a Java application (Jetty, Tomcat, ...) server, using JVx mobile UI
- If you use ReactUI as lib you will need React 16.8.0 (for Hooks)
There are two options to use bundling with webpack.
- Production Bundle
run
npm run bundle
to create a production bundle. URL configuration is then required in your app where reactUI is used as lib. Does not accept config.json! - Development Bundle
run
npm run devbundle
to create a development bundle. URL configuration is possible but config.json is also allowed.
-
Clone the git repository, open it in your development environment of choice and run
npm install
to download the dependencies. -
Run the command
npm start
to start reactUI. A new tab will open in your browser. -
If the web application can not connect to the server there are different approaches to fix this issue, Depending on whether you want to connect to the server by a config.json file or URL
-
config.json File
Add a file called config.json in your public folder of your project. This file will be used to send the required data to the server during the startup-request.
Example:
{ "appName": "[application name here]", "baseUrl": "[baseUrl here]", "username": "[username here]", "password": "[password here]", "deviceMode": "[deviceMode]", "langCode": "[language (en, de)]", "logoBig": "[path to logo in public directory]", "logoSmall": "[path to logo in public directory]", "logoLogin": "[path to logo in public directory]" "theme": "[theme here]", "colorScheme": "[color-scheme here]" }
-
URL
The parameters which are set in the config.json file, can also be set in the url, simply put the parameter after the first "/" of your url.
Example:
You can see that parameters are the same names as in the config.json and are combined by a "&". The url gets prioritized over the config.json file, if you happen to have both of those options!
It is also important to put a "#" after the last of your parameters, because we use the Hashrouter of
react-router-dom
!!
-
If everything works out as planned, you will be redirected to the login:
After you logged in or if you have a valid username, password combination you will be redirected to home:
More information about customizing screens, components and more can be found here
The style of the ReactUI is extremely customizable, check out the style example for more info. Theme Variables Color-Scheme Variables
We are also offering a Designer which simplifies the creation of themes and color-schemes and directly uploads them.