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.
Scope UI
Getting Started (using local node)
- You need at least Node.js 6.9.0 and a running
weavescopecontainer - Get Yarn:
npm install -g yarn - Setup:
yarn install - Develop:
BACKEND_HOST=<dockerhost-ip> yarn startand then openhttp://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
weavescopecontainer - Develop:
make WEBPACK_SERVER_HOST=<dockerhost-ip> client-startand then openhttp://<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 inbuild/ - Serve files from
build/:BACKEND_HOST=<dockerhost-ip> yarn run start-productionand then openhttp://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).