aboutsummaryrefslogtreecommitdiffstats
path: root/dashboard/README.md
diff options
context:
space:
mode:
authorKurkó Mihály <kurkomisi@users.noreply.github.com>2017-11-15 01:34:00 +0800
committerPéter Szilágyi <peterke@gmail.com>2017-11-15 01:34:00 +0800
commitba62215d9ef8655743ce7b1380056755943e3d72 (patch)
treeca74e2d737759f44930469f5c285443efe5f99cc /dashboard/README.md
parent984c25ac406e86255b289a3d7fec4cd91a17707f (diff)
downloaddexon-ba62215d9ef8655743ce7b1380056755943e3d72.tar
dexon-ba62215d9ef8655743ce7b1380056755943e3d72.tar.gz
dexon-ba62215d9ef8655743ce7b1380056755943e3d72.tar.bz2
dexon-ba62215d9ef8655743ce7b1380056755943e3d72.tar.lz
dexon-ba62215d9ef8655743ce7b1380056755943e3d72.tar.xz
dexon-ba62215d9ef8655743ce7b1380056755943e3d72.tar.zst
dexon-ba62215d9ef8655743ce7b1380056755943e3d72.zip
cmd, dashboard: dashboard using React, Material-UI, Recharts (#15393)
* cmd, dashboard: dashboard using React, Material-UI, Recharts * cmd, dashboard, metrics: initial proof of concept dashboard * dashboard: delete blobs * dashboard: gofmt -s -w . * dashboard: minor text and code polishes
Diffstat (limited to 'dashboard/README.md')
-rw-r--r--dashboard/README.md46
1 files changed, 46 insertions, 0 deletions
diff --git a/dashboard/README.md b/dashboard/README.md
new file mode 100644
index 000000000..84810f717
--- /dev/null
+++ b/dashboard/README.md
@@ -0,0 +1,46 @@
+## Go Ethereum Dashboard
+
+The dashboard is a data visualizer integrated into geth, intended to collect and visualize useful information of an Ethereum node. It consists of two parts:
+
+* The client visualizes the collected data.
+* The server collects the data, and updates the clients.
+
+The client's UI uses [React][React] with JSX syntax, which is validated by the [ESLint][ESLint] linter mostly according to the [Airbnb React/JSX Style Guide][Airbnb]. The style is defined in the `.eslintrc` configuration file. The resources are bundled into a single `bundle.js` file using [Webpack][Webpack], which relies on the `webpack.config.js`. The bundled file is referenced from `dashboard.html` and takes part in the `assets.go` too. The necessary dependencies for the module bundler are gathered by [Node.js][Node.js].
+
+### Development and bundling
+
+As the dashboard depends on certain NPM packages (which are not included in the go-ethereum repo), these need to be installed first:
+
+```
+$ (cd dashboard/assets && npm install)
+```
+
+Normally the dashboard assets are bundled into Geth via `go-bindata` to avoid external dependencies. Rebuilding Geth after each UI modification however is not feasible from a developer perspective. Instead, we can run `webpack` in watch mode to automatically rebundle the UI, and ask `geth` to use external assets to not rely on compiled resources:
+
+```
+$ (cd dashboard/assets && ./node_modules/.bin/webpack --watch)
+$ geth --dashboard --dashboard.assets=dashboard/assets/public --vmodule=dashboard=5
+```
+
+To bundle up the final UI into Geth, run `webpack` and `go generate`:
+
+```
+$ (cd dashboard/assets && ./node_modules/.bin/webpack)
+$ go generate ./dashboard
+```
+
+### Have fun
+
+[Webpack][Webpack] offers handy tools for visualizing the bundle's dependency tree and space usage.
+
+* Generate the bundle's profile running `webpack --profile --json > stats.json`
+* For the _dependency tree_ go to [Webpack Analyze][WA], and import `stats.json`
+* For the _space usage_ go to [Webpack Visualizer][WV], and import `stats.json`
+
+[React]: https://reactjs.org/
+[ESLint]: https://eslint.org/
+[Airbnb]: https://github.com/airbnb/javascript/tree/master/react
+[Webpack]: https://webpack.github.io/
+[WA]: http://webpack.github.io/analyse/
+[WV]: http://chrisbateman.github.io/webpack-visualizer/
+[Node.js]: https://nodejs.org/en/