Files
weave-scope/client
Marcus Cobden c03e6a0e50 Rework UI build to improve caching and fix packaging issue
Stop baking the toolchain and dependencies into the build image.
Instead, run the install step each time, but use volume mounts or
CircleCI caching to keep the happy path fast.

Previously, some parts of the client (UI) directory were baked into the build
image, and some parts were mounted or copied into the build environment.
As a result, files baked into the build image require a two-step
update for changes to take effect in CI.

Now, for dockerised builds, we pre-install very little into the build
image and mount the whole directory into the build environment.
However, we do overlay a volume on the node_modules folder to allow the
standard build toolchain to be separate from the host build toolchain.

Non-dockerised builds (e.g. CI) are now more similar to the dockerised
versions.
2018-09-26 10:41:30 +01:00
..
2018-08-27 18:50:10 +02:00
2015-05-20 10:45:35 +00:00
2017-10-17 19:08:43 +02:00
2015-05-19 10:02:02 +00:00
2017-01-24 13:36:39 -08:00
2018-05-17 11:04:08 +02:00
2018-05-17 11:04:08 +02:00
2017-10-17 19:04:41 +02:00
2018-09-24 15:39:59 +02:00

Scope UI

Getting Started (using local node)

  • You need at least Node.js 6.9.0 and a running weavescope container
  • Get Yarn: npm install -g yarn
  • Setup: yarn install
  • Develop: BACKEND_HOST=<dockerhost-ip> yarn start and then open http://localhost:4042/

This will start a webpack-dev-server that serves the UI and proxies API requests to the container.

Getting Started (using node in a container)

  • You need a running weavescope container
  • Develop: make WEBPACK_SERVER_HOST=<dockerhost-ip> client-start and then open http://<dockerhost-ip>:4042/

This will start a webpack-dev-server that serves the UI from the UI build container and proxies API requests to the weavescope container.

Test Production Bundles Locally

  • Build: yarn run build, output will be in build/
  • Serve files from build/: BACKEND_HOST=<dockerhost-ip> yarn run start-production and then open http://localhost:4042/

Coding

This directory has a .eslintrc, make sure your editor supports linter hints. To run a linter, you also run yarn run lint.

Logging

To enable logging in the console, activate it via localStorage in the dev tools console:

localStorage["debug"] = "scope:*"

The Scope UI uses debug for logging, e.g.,:

const debug = require('debug')('scope:app-store');
debug('Store log message');

Gotchas

Got a blank screen when loading http://localhost:4042?

Make sure you are accessing the right machine: If you're running yarn start on a virtual machine with IP 10.0.0.8, you need to point your browser to http://10.0.0.8:4042. Also, you may need to manually configure the virtual machine to expose ports 4041 (webpack-dev-server) and 4042 (express proxy).