aboutsummaryrefslogtreecommitdiffstats
path: root/dashboard/README.md
diff options
context:
space:
mode:
Diffstat (limited to 'dashboard/README.md')
-rw-r--r--dashboard/README.md19
1 files changed, 16 insertions, 3 deletions
diff --git a/dashboard/README.md b/dashboard/README.md
index 84810f717..da28f5a19 100644
--- a/dashboard/README.md
+++ b/dashboard/README.md
@@ -9,10 +9,11 @@ The client's UI uses [React][React] with JSX syntax, which is validated by the [
### 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:
+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)
+$ (cd dashboard/assets && ./node_modules/.bin/flow-typed 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:
@@ -22,13 +23,20 @@ $ (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`:
+To bundle up the final UI into Geth, run `go generate`:
```
-$ (cd dashboard/assets && ./node_modules/.bin/webpack)
$ go generate ./dashboard
```
+### Static type checking
+
+Since JavaScript doesn't provide type safety, [Flow][Flow] is used to check types. These are only useful during development, so at the end of the process Babel will strip them.
+
+To take advantage of static type checking, your IDE needs to be prepared for it. In case of [Atom][Atom] a configuration guide can be found [here][Atom config]: Install the [Nuclide][Nuclide] package for Flow support, making sure it installs all of its support packages by enabling `Install Recommended Packages on Startup`, and set the path of the `flow-bin` which were installed previously by `npm`.
+
+For more IDE support install the `linter-eslint` package too, which finds the `.eslintrc` file, and provides real-time linting. Atom warns, that these two packages are incompatible, but they seem to work well together. For third-party library errors and auto-completion [flow-typed][flow-typed] is used.
+
### Have fun
[Webpack][Webpack] offers handy tools for visualizing the bundle's dependency tree and space usage.
@@ -44,3 +52,8 @@ $ go generate ./dashboard
[WA]: http://webpack.github.io/analyse/
[WV]: http://chrisbateman.github.io/webpack-visualizer/
[Node.js]: https://nodejs.org/en/
+[Flow]: https://flow.org/
+[Atom]: https://atom.io/
+[Atom config]: https://medium.com/@fastphrase/integrating-flow-into-a-react-project-fbbc2f130eed
+[Nuclide]: https://nuclide.io/docs/quick-start/getting-started/
+[flow-typed]: https://github.com/flowtype/flow-typed