sergeyteleshevandmr-anton-t
ea36247797
* dbeaver/pro#8433 initial version of material ui refactor * fixes arrow colors * fixes arrow colors 2 * fixes colors * pr fixes * removes layers due to it loses styles specificity race * fixes autocomplete styles * adds variables for typography * moves switch logic to module styles * removes elevation styles * removes unused code * migrates ripple effect to tw class * Revert "migrates ripple effect to tw class" This reverts commit78229ac007. * uses classname theme-typography for button * adds elevation styles * adds elevation styles 2 * moves theme ripple * reverts scss for sql editor * reverts scss for sql editor 2 * adds tailwindcss utilities + example * Revert "adds tailwindcss utilities + example" This reverts commit20ca1b787c. * creates tailwindcss plugin with shadow tokens + spread it across the app * moves typography to the tailwindcss styles * refactors sql editor styles * moves styles from tailwindcss folder to styles * moves ripple to tailwindcss plugin * removes unused files * removes unused file index * removes redundant tailwindcss import * adds animation layer for tailwindcss * refactors animations * build fix * removes redundant imports of tailwindcss for styles * removes layer components to keep some styles for switch * removes animation from ripple effect * makes ripple effect more contrast * fixes fonts across the app to json view has correct font-mono from the tailwindcss box * deletes module ts * Revert "removes layer components to keep some styles for switch" This reverts commitee8b0e199e. * fixes race for switch bold style * changes ripple from 7% to 9% * Reduce hover opacity in ripple effect (#4260) * Reduce hover opacity in ripple effect * Update ripple.css --------- Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.com>
Steps to Run
Welcome! Follow these steps to install and run the frontend dev server.
Prerequisites:
-
Ensure you have the correct Node.js version
We recommend using the latest LTS (Long-Term Support) version. Check the official Node.js website: https://nodejs.org/ The minimum supported version is v22.15.0
-
Ensure you have Yarn installed
If not, see the instructions on the official website: https://yarnpkg.com/getting-started/install
-
Enable Corepack
To ensure that Corepack is enabled, run the following command:
corepack enableMore about corepack you can find here: https://yarnpkg.com/corepack
Installation Steps:
-
Build the Backend Server
Navigate to the
deploydirectory and execute the build script. This script will handle cloning necessary repositories and building the backend. It also installs all frontend dependencies and builds it as well.For macOS/Linux:
cd deploy ./build.shFor Windows:
cd deploy ./build.bat -
Navigate to the Directory with Build Artifacts
Change your current directory to the
cloudbeaverfolder within thedeploydirectory.cd cloudbeaver -
Run the Backend Server
Start the backend server by running the execution script.
For macOS/Linux:
./run-cloudbeaver-server.shFor Windows:
./run-cloudbeaver-server.bat -
Navigate to the Webapp Directory
Open a new terminal window or tab, and change your directory to the web application's product folder.
cd webapp/packages/product-default -
Run the Web Application
Start the web application development server, specifying the backend server's URL. The default URL is
http://localhost:8978/.For macOS/Linux:
server=http://localhost:8978/ yarn devFor Windows Command Prompt:
set server=http://localhost:8978/ && yarn devFor Windows PowerShell:
$env:server="http://localhost:8978/"; yarn dev
You should see a message with URL of your running dev server like below
➜ Local: http://localhost:8080/
Developing in VSCode
VSCode offers dedicated tasks to streamline development with our project, making it the recommended environment for working on the CloudBeaver Frontend.
To access these tasks, press F1 (or Cmd/Ctrl + Shift + P) in VSCode, select "Tasks: Run Task" from the command palette, and then choose the desired task from the list.
To start the local development server, follow these steps:
- Execute the Build CE task. This task builds both the backend and frontend.
- Run the Run Backend CE task to start the backend server.
- Run the Run DevServer CE task.
These steps will launch the frontend in development mode and proxy API requests to your locally running backend, accessible at http://localhost:8080/.