This is the GenUI frontend application. It provides a GUI to the GenUI REST API web services. It is based on Vibe (v1.0.2), a neat React.js dashboard built with Bootstrap 4. You can see it in action by deploying the GenUI Docker Images.
- Install dependencies by running
yarnornpm install. - Run
yarn startornpm run startto start the local dev server.
The development server will look for the GenUI backend service running
at http://localhost:8000 and it will use REST API endpoints found under
http://localhost:8000/api/.
The GenUI/Vibe dashboard is based on Create React App. Follow the documentation there for an introduction of the development environment.
The basic dashboard layout is defined in ./src/views/layouts/DashboardLayout.js.
You can modify parts of the Vibe layout with the following code:
| Part | Modification |
|---|---|
| CSS | Sass files can be found in ./src/vibe/scss. Update ./src/vibe/scss/components/vars.scss to change global styles. |
| Responsivity | Configure the switch between mobile and desktop layout with the constant MOBILE_SIZE |
| Logo | Change file ./src/assets/images/vibe-logo.svg or import a different Logo |
| Chat | Enable/Disable it by default by setting the initial state of showChat1 |
| Header | Change function component HeaderNav. |
| Footer | Change the <Footer> part in the render() function of DashboardLayout. |
| Menu | See below. |
- Create your page as component in the folder
./src/views/pages. (You can actually create these components anywhere you wish, this is just a recommendation.) - Add your component to the
pageListarray in./src/views/index.js. - Call it by opening the route you've chosen. You can use the
Routecomponent (see Routes documentation)
of react-router-dom.
All pages are accessible by their routes, but only pages added to
the nav state property of DashboardLayout
show up on the sidebar menu. There are two menus available to fill: top and bottom.
Every top level menu entry can either be a top level button or a folder with a single level of child entries.
| Key | Value |
|---|---|
name |
Display name of the menu entry |
icon |
(Optional) Icon prefixed to the display name. The correct item gets autoloaded by Vibe. (react-feather is used for icons. |
url |
(Optional) Either a relative URL to the target page or an absolute URL to an external page (For linked menu entries. Make sure relative URLs start with a slash, i.e. /home) |
external |
(Optional) Set to true if the url points to an external page. |
target |
(Optional) Set to _blank if you want the link to an external page to open in a new window. |
children |
(Optional) Child entries as array (For folder menu entries) |
divider |
(Optional) Inserts a visual divider if set to true (Use this instead of a menu entry) |
Note: If you wish menus to be expanded by default, you have to change the initial state of open in ./src/vibe/components/SidebarNav/components/NavDropdownItem.js.
Vibe is using the Bootstrap-for-React library reactstrap. Follow the components documentation for using them in a Vibe Dashboard.
Note that Vibe overwrites the default Bootstrap styles in ./src/vibe/scss/components/.
Custom Vibe components are in the ./src/vibe/components/ directory.
Vibe is using react-feather for its icons.
A nice overview over all available icons can be found on https://feathericons.com/.
Note: In order to use a Feather icon in react, convert the name to camel case. (I.e. alert-circle becomes AlertCircle).
The original library of components defined in the Vibe dashboard was extended with
custom reusable components designated to be used in GenUI. You can import
those components from the package located in ./src/genui/. You can find
the package with the original Vibe components in ./src/vibe.
If you want to expand the GUI,
you should take a look at the currently defined pages
of the dashboard in ./src/views/pages. You should define
your pages there and import the required components from ./src/genui/ or ./src/vibe.
All source code available here is distributed under MIT license.