github.com/Elemental-core/elementalcore@v0.0.0-20191206075037-63891242267a/dashboard/README.md (about) 1 ## Go Ethereum Dashboard 2 3 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: 4 5 * The client visualizes the collected data. 6 * The server collects the data, and updates the clients. 7 8 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]. 9 10 ### Development and bundling 11 12 As the dashboard depends on certain NPM packages (which are not included in the elementalcore repo), these need to be installed first: 13 14 ``` 15 $ (cd dashboard/assets && npm install) 16 ``` 17 18 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: 19 20 ``` 21 $ (cd dashboard/assets && ./node_modules/.bin/webpack --watch) 22 $ geth --dashboard --dashboard.assets=dashboard/assets/public --vmodule=dashboard=5 23 ``` 24 25 To bundle up the final UI into Geth, run `webpack` and `go generate`: 26 27 ``` 28 $ (cd dashboard/assets && ./node_modules/.bin/webpack) 29 $ go generate ./dashboard 30 ``` 31 32 ### Have fun 33 34 [Webpack][Webpack] offers handy tools for visualizing the bundle's dependency tree and space usage. 35 36 * Generate the bundle's profile running `webpack --profile --json > stats.json` 37 * For the _dependency tree_ go to [Webpack Analyze][WA], and import `stats.json` 38 * For the _space usage_ go to [Webpack Visualizer][WV], and import `stats.json` 39 40 [React]: https://reactjs.org/ 41 [ESLint]: https://eslint.org/ 42 [Airbnb]: https://github.com/airbnb/javascript/tree/master/react 43 [Webpack]: https://webpack.github.io/ 44 [WA]: http://webpack.github.io/analyse/ 45 [WV]: http://chrisbateman.github.io/webpack-visualizer/ 46 [Node.js]: https://nodejs.org/en/