Frontend technical overview

CloudBeaver frontend is a single page application written in React. We use InversifyJS for dependency injection and MobX as a state management library. GraphQL is used to communicate with the server.

The application is written as a set of plugins organized in Lerna monorepo. The plugins can be developed independently and added to the final build by mentioning it in the configuration file.

The application uses Reshadow library and CSS modules for style incapsulation and supports light and dark themes.

We use react-data-grid to display big and functionally rich tables and CodeMirror to edit SQL queries.

CloudBeaver officially supports the current and previous major releases of the following browsers, provided they are not older than one year:

• Google Chrome
• Mozilla Firefox
• Apple Safari
• Microsoft Edge

For the best performance, use the latest version of these browsers. Browsers older than one year may not provide the optimal experience.

1. Run the local server as described in the Build and deploy section

2. Execute

   cd webapp/
   yarn lerna run dev --stream --scope=@cloudbeaver/product-default -- -- --env server=localhost:8978
   

   to run Webpack dev server. If you encounter issues with the proxy server, try running the script without the --stream flag or from the package itself:

   cd packages/product-default
   yarn run dev -- --env server=http://localhost:8978
   

3. Open localhost:8080 in web browser

Frontend development guidelines

The application consists of several plugins and submodules which are located in the webapp\packages folder.

• core-administration - Administration API
• core-app - Base application folder
• core-authentication - Authentication API
• core-blocks - Low-level common visual components
• core-bootstrap - Common core package
• core-cli - Command line tools for building & dev
• core-connections - Connections API
• core-di - Dependency injection related classes
• core-dialogs - Main and context menues, modal windows
• core-events - Logging
• core-executor - Task scheduling API
• core-extensions - Extensions API
• core-localization - Localization API
• core-notifications - Popup notification components
• core-plugin - Plugin API
• core-product - Product API
• core-root - Permissions, server and session services
• core-routing - Routing API
• core-sdk - GraphQL related services
• core-settings - Settings API
• core-theming - Themisation related services and hooks
• core-utils - Utilites
• core-view - View API
• plugin-administration - Application configuration wizard
• plugin-authentication - Authentication and users administration
• plugin-connection-custom - Provides the handling of custom connections
• plugin-connection-template - Provides the handling of template connections
• plugin-data-export - Data export from data view
• plugin-data-spreadsheet - Wrapper over Ag-Grid
• plugin-data-viewer - Provides Data Table View
• plugin-ddl-viewer - Provides DDL for database objects
• plugin-object-viewer - Provides Object Property View
• plugin-sql-editor - Provides SQL-editor
• plugin-sql-editor-navigation-tab - Provides SQL-editor tab
• product-default - Configure and build all plugins to the final application