The framework: Next.js.
Next.js supports SPA, SSG and SSR. With this feature, the dashboard ui can be deployed in
- Standalone machine serving only dashboard UI with a backend. (e.g. Dashboard for cloud product)
- Meta service node. (e.g. Static HTML files integrated in meta service without any other dependencies like node.js)
dashboard/
--.next/ (generated by nextjs)
--node_modules/ (development dependencies)
--out/ (generated static files)
--components/ (React Component)
--lib/ (useful functions and classes)
--pages/ (web pages)
--public/ (static resources)
--styles/ (static css files)
--test/ (test cases)
TODO: Find a suitable testing framework
Start a RisingWave cluster, create some tables and materialized views for testing purposes. For example:
./risedev d
sqllogictest -p 4566 -d dev './e2e_test/nexmark/create_tables.slt.part'
sqllogictest -p 4566 -d dev './e2e_test/streaming/nexmark/create_views.slt.part'
Install dependencies and start the development server.
npm i
npm run dev
The dashboard is now served at port 3000.
Go to the Settings page at http://localhost:3000/settings/
and set the API endpoint to
http://localhost:5691/api
in order to connect to the meta node of the running cluster.
The approach above is the best way to develop the dashboard since it supports hot reload and debugging. However, if you still want to test how the dashboard behaves when it's served as static files within the meta node, you can ask RiseDev to build the dashboard from the source code by running the following command.
./risedev configure enable dashboard
The dashboard built with the latest sources will be served by meta node at port 5691.
Running npm i
will generate the proto files under proto/gen
automatically. In case there are modifications to the protos, you can regenerate them using the command npm run gen-proto.
Build static files for standalone deployment without node.js. The built files are generated at ./out
.
Check more details at Static HTML Export.
npm run build
The built files are generated at ./out
.