repository·devel·Indexed 26 days ago
https://github.com/dbeaver/cloudbeaverCloudBeaver is an open-source, web-based database management tool featuring a Java backend and a TypeScript/React frontend. This documentation covers the Community Edition (cloudbeaver-ce), including deployment via Docker, frontend development with the DBeaver UI Kit and Ladle, and the use of the H2 Query Executor and cbvr CLI.
To build the executable JAR for the H2 Query Executor, use the Maven clean install command.
mvn clean installThe Menu component provides a set of composable primitives for building accessible menus, such as context menus and dropdowns, built on top of Ariakit. It uses a compound API that can be accessed via named exports or through the static properties on the Menu object. A Menu.Provider must wrap the menu components to provide the necessary context.
<Menu.Provider>
<Menu.Button>
Open menu
<Menu.ButtonArrow />
</Menu.Button>
<Menu>
<Menu.Item>Action 1</Menu.Item>
</Menu>
</Menu.Provider>Button component is a versatile UI element used for various user interactions. It supports different visual styles via the variant prop, different dimensions via the size prop, and a loading state to indicate asynchronous operations.Follow these steps to set up the development environment for the CloudBeaver frontend.
v22.15.0 (LTS recommended).corepack enable.Build the Backend and Frontend:
Navigate to the deploy directory and run the build script. This script clones necessary repositories, builds the backend, installs frontend dependencies, and builds the frontend.
./build.sh./build.batStart the Backend Server:
Navigate to the cloudbeaver folder within the deploy directory and run the execution script.
./run-cloudbeaver-server.sh./run-cloudbeaver-server.batRun the Web Application:
Open a new terminal, navigate to webapp/packages/product-default, and start the development server. You must specify the server environment variable pointing to the backend URL (default is http://localhost:8978/).
server=http://localhost:8978/ yarn devset server=http://localhost:8978/ && yarn dev$env:server="http://localhost:8978/"; yarn devOnce running, the dev server is typically accessible at http://localhost:8080/.
cd deploy
./build.sh
cd cloudbeaver
./run-cloudbeaver-server.sh
cd webapp/packages/product-default
server=http://localhost:8978/ yarn devYou can find detailed information and guides for CloudBeaver in the following locations:
The DBeaver UI Kit uses Ladle to provide a sandbox environment for developing, testing, and documenting React components in isolation. You can run the documentation server to interact with components visually.
To start the Ladle development environment, run the following command in your terminal:
yarn docsAfter running the command, open the URL provided in the terminal output to view the component library.
VSCode is the recommended environment for CloudBeaver Frontend development. You can use dedicated tasks to automate the build and run processes.
To use these tasks:
F1 (or Cmd/Ctrl + Shift + P) to open the Command Palette.When using these tasks, the frontend runs in development mode and proxies API requests to your local backend, accessible at http://localhost:8080/.
To start the CloudBeaver server, follow these steps:
init-data.conf carefully, as these parameters cannot be changed after the first server start.run-cloudbeaver-server.sh script located in the root directory.CloudBeaver can be deployed using Docker. Use the official Docker repository to pull images and follow the deployment instructions provided in the GitHub Wiki to set up your instance.
https://hub.docker.com/r/dbeaver/cloudbeaverA live demo of the CloudBeaver server is available online. If you need to understand how to access databases within the demo environment, refer to the Database access instructions in the GitHub Wiki.
https://demo.cloudbeaver.ioThe Dialog component is a modal window built on top of Ariakit that follows the WAI-ARIA Dialog Pattern. It provides a structured layout with DialogHeader (sticky top), DialogBody (scrollable), and DialogFooter (sticky bottom).
You can manage dialog visibility in two ways:
open and onClose props.DialogProvider and useDialogStore to manage state via a disclosure pattern.Key components include:
Dialog: Main container.DialogDisclosure: Trigger button (requires DialogProvider).DialogHeader, DialogBody, DialogFooter: Layout containers.DialogHeading, DialogDescription: Accessible label and description elements.DialogDismiss: Button to close the dialog.DialogProvider: Context provider for managing dialog state.import {
Dialog,
DialogHeader,
DialogBody,
DialogFooter,
DialogHeading,
DialogDescription,
DialogDismiss,
DialogProvider,
useDialogStore,
Button,
} from '@dbeaver/ui-kit';
// Using state
const [open, setOpen] = useState(false);
<Dialog open={open} onClose={() => setOpen(false)} data-size="medium">
<DialogHeader>
<DialogHeading>Dialog Title</DialogHeading>
</DialogHeader>
<DialogBody>
<DialogDescription>Dialog content goes here</DialogDescription>
</DialogBody>
<DialogFooter>
<Button variant="secondary" onClick={() => setOpen(false)}>
Cancel
</Button>
<Button variant="primary" onClick={() => setOpen(false)}>
Confirm
</Button>
</DialogFooter>
</Dialog>;
// Using DialogProvider
const dialog = useDialogStore();
<DialogProvider store={dialog}>
<DialogDisclosure>
<Button>Open Dialog</Button>
</DialogDisclosure>
<Dialog data-size="medium">
<DialogHeader>
<DialogHeading>Title</DialogHeading>
</DialogHeader>
<DialogBody>
<DialogDescription>Content</DialogDescription>
</DialogBody>
<DialogFooter>
<DialogDismiss>Close</DialogDismiss>
</DialogFooter>
</Dialog>
</DialogProvider>;