From 79d9d2df181c22992ce00c6748262e0097c41590 Mon Sep 17 00:00:00 2001 From: glasstiger Date: Wed, 8 Jan 2025 19:32:12 +0000 Subject: [PATCH 1/3] chore(ui): webpack dev server proxy to take context path from env variable --- packages/web-console/src/store/db.ts | 2 +- packages/web-console/webpack.config.js | 21 +++++++++++++++++---- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/packages/web-console/src/store/db.ts b/packages/web-console/src/store/db.ts index 8aeae415f..f28ff37ef 100644 --- a/packages/web-console/src/store/db.ts +++ b/packages/web-console/src/store/db.ts @@ -64,7 +64,7 @@ export class Storage extends Dexie { // add initial buffer on db creation // this is only called once, when DB is not available yet this.on("populate", () => { - // populate intial buffer with value from localStorage, then clear it. + // populate initial buffer with value from localStorage, then clear it. // this is to migrate from localStorage to indexedDB const valueFromDeprecatedStorage = getValue(StoreKey.QUERY_TEXT) if (typeof valueFromDeprecatedStorage !== "undefined") { diff --git a/packages/web-console/webpack.config.js b/packages/web-console/webpack.config.js index 34f3791cb..d6e51e878 100644 --- a/packages/web-console/webpack.config.js +++ b/packages/web-console/webpack.config.js @@ -41,6 +41,7 @@ const config = { port: 9999, backendUrl: "http://127.0.0.1:9000", isProduction: process.env.NODE_ENV === "production", + contextPath: process.env.CONTEXT_PATH || "", } module.exports = { @@ -80,10 +81,22 @@ module.exports = { host: "localhost", hot: true, port: config.port, - proxy: { - context: ["/imp", "/exp", "/exec", "/chk", "/settings", "/warnings"], - target: config.backendUrl, - }, + proxy: [ + { + context: [ + config.contextPath + "/imp", config.contextPath + "/exp", config.contextPath + "/exec", + config.contextPath + "/chk", config.contextPath + "/settings", config.contextPath + "/warnings" + ], + target: config.backendUrl, + }, + { + context: [ config.contextPath ], + target: 'http://localhost:' + config.port, + pathRewrite: path => { + return path.startsWith(config.contextPath) ? path.substr(config.contextPath.length) : path; + }, + }, + ], client: { overlay: false, }, From f1a2ceb739b5e693ca77f6955fd0081f736631db Mon Sep 17 00:00:00 2001 From: glasstiger Date: Thu, 9 Jan 2025 15:43:34 +0000 Subject: [PATCH 2/3] doc update --- README.md | 4 +-- docs/local-development-setup.md | 15 ++++++---- packages/web-console/README.md | 50 ++++++++++++++++++++++++--------- 3 files changed, 47 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 14be1420c..4295df145 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ This repository is a monorepo hosting the implementation of QuestDB user interface and surrounding tooling. -Currently there are these packages: +Currently, there are these packages: * [`web-console`](./packages/web-console/README.md) - the GUI tool shipped with QuestDB * [`react-components`](./packages/react-components/README.md) - small component library for internal reuse between QuestDB products @@ -13,4 +13,4 @@ Currently there are these packages: We always welcome contributions from the community! -Please read our [local development setup](./docs/local-development-setup.md) document to learn how to get started. +Please, read our [local development setup](./docs/local-development-setup.md) document to learn how to get started. diff --git a/docs/local-development-setup.md b/docs/local-development-setup.md index fab6d94db..789597557 100644 --- a/docs/local-development-setup.md +++ b/docs/local-development-setup.md @@ -79,27 +79,30 @@ where: Knowing this it's easy to run any script of any package. -If you want to work on `@questdb/web-console` package, you can start its development server with: +For example, if you want to work on the `@questdb/web-console` package, you can start its +development server with: ``` yarn workspace @questdb/web-console start ``` _You might need to run_ `yarn workspace @questdb/react-components build` _first._ -[localhost:9999](http://localhost:9999) should show web console. +[localhost:9999](http://localhost:9999) should display the web console. ### 4. Hack! The setup is done! All packages are ready to be worked on. -They all have a `readme.md` with more details, for instance, here's a link to [`@questdb/web-console/readme.md`](../packages/web-console/README.md). +They all have a `README.md` with more details.\ +For instance, further details on working with the web console locally can be found +in [`@questdb/web-console/readme.md`](../packages/web-console/README.md). -Vim and VSCode should work out of the box. If they don't or you use some -other IDE, you might need to setup and SDK as explained in [Yarn +Vim and VSCode should work out of the box. If they don't, or you use some +other IDE, you might need to setup an SDK as explained in [Yarn documentation](https://yarnpkg.com/getting-started/editor-sdks). If you need help, here are some useful links: -* [Github issues](https://github.com/questdb/ui/issues), might already have an answer to your question +* [GitHub issues](https://github.com/questdb/ui/issues), might already have an answer to your question * [QuestDB Documentation](https://questdb.io/docs/) includes a lot of useful information * [QuestDB Slack](https://slack.questdb.io/) join our helpful community! diff --git a/packages/web-console/README.md b/packages/web-console/README.md index 44fd18603..33d1f6005 100644 --- a/packages/web-console/README.md +++ b/packages/web-console/README.md @@ -7,38 +7,59 @@ Yarn@3 and Webpack. ## Local development setup -In order to run this package locally, you need to do the following steps: - -1. Clone and bootstrap repository (by following instructions on [`local-development-setup.md`](../../docs/local-development-setup.md)) -2. Start development server -3. Run QuestDB in the background -4. Hack! +In order to run this package locally, follow the steps below. ### 1. Clone and bootstrap repository -Consult instructions on [`local-development-setup.md`](../../docs/local-development-setup.md) document. +Follow the instructions described +in [`local-development-setup.md`](../../docs/local-development-setup.md) document.\ +After the local development environment setup, you are ready to work on the packages of this project, +including the web console. + +### 2. Build the production version of `@questdb/react-components` -### 2. Build the production version of `@questdb/react-components`, which this repository uses: +The web console uses the `@questdb/react-components` package, so build this dependency first. ``` yarn workspace @questdb/react-components build ``` ### 3. Start development server +Now we can start the web console. ``` yarn workspace @questdb/web-console start ``` -[localhost:9999](http://localhost:9999) should show web console +By default, [localhost:9999](http://localhost:9999) should display the web console. + +If the server has a context path configured with the `http.context.path` option, we need to make sure that +the dev server is aware of it, and it proxies requests accordingly.\ +We can set the context path with the following environment variable before starting dev server: +``` +CONTEXT_PATH=/instance2 +export CONTEXT_PATH +yarn workspace @questdb/web-console start +``` + +After the above the web console is available on [localhost:9999/instance2/](http://localhost:9999/instance2/) + +If the context path is removed from the server configuration, we also need to clear the environment variable, +and restart the dev server: +``` +unset CONTEXT_PATH +yarn workspace @questdb/web-console start +``` ### 4. Run QuestDB in the background -This package (`web-console`) is a only GUI for QuestDB, it does not include QuestDB itself.\ -GUI will work without it, but because it's a tool to interact with QuestDB, you will need QuestDB as well. +This package (`web-console`) is a GUI for QuestDB, it does not include QuestDB itself.\ +The web console will load from the dev server without the database, but because it is a tool +to interact with QuestDB, you need to run the database as well to be able to work with it +properly. -Check [readme.md](https://github.com/questdb/questdb#install-questdb) of QuestDB to learn how to install it. +Check [README.md](https://github.com/questdb/questdb#install-questdb) of QuestDB to learn how to install it. -If you have [`docker`](https://docs.docker.com/get-docker/), then it's simply: +If you have [`docker`](https://docs.docker.com/get-docker/), then it is simply: ``` docker run -p 9000:9000 -p 9009:9009 -p 8812:8812 questdb/questdb @@ -46,7 +67,8 @@ docker run -p 9000:9000 -p 9009:9009 -p 8812:8812 questdb/questdb ### 5. Hack! -Do your code changes and browser will automatically refresh [localhost:9999](http://localhost:9999). +You can start changing the code, and the web console will automatically refresh +on [localhost:9999](http://localhost:9999). Happy hacking! From 242998d257ba75e9370d8f8178480b0c5056956c Mon Sep 17 00:00:00 2001 From: glasstiger Date: Thu, 9 Jan 2025 15:43:53 +0000 Subject: [PATCH 3/3] doc update --- packages/browser-tests/questdb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/browser-tests/questdb b/packages/browser-tests/questdb index f3db04376..c83d63d57 160000 --- a/packages/browser-tests/questdb +++ b/packages/browser-tests/questdb @@ -1 +1 @@ -Subproject commit f3db04376d4010871eee6e040c4216ed8dd83e51 +Subproject commit c83d63d57bf80e08aa4681cbcc1e462d12d5f570