Supervision Development Process
Build
Makefile make supervision-compile-assets
Running this command will compile a production build of the Supervision node application and output the files to opg-sirius/front-end/supervision/dist this will then be served inside the supervision container if you run the local development environment(make dev-up).
Build & Watch
Makefile: make supervision-watch
Assuming that you already have a local environment running (make dev-up), running these commands will stop your local supervision container, run webpack with a watcher that will recompile any source files that change and mount opg-sirius/front-end/supervision/dist inside the supervision container. Any changes to the JavaScript source will be immediately available within the container.
Jest Tests
Makefile: make supervision-jest
Running this command will execute the Jest unit tests for the Supervision application.
Jest Tests - Run & Watch
Makefile: make supervision-jest-watch
Running this command will execute the Jest unit tests for the Supervision application with a file watcher that will re-run all the tests should you make any changes to the test or source code.
Alternatively, if you only want to watch the files you are changing (as opposed to running all the tests every time you make a change), run yarn test:watch in the front-end/supervision.
Local Debugging
In the supervision directory: cd front-end/supervision
Run The Command: yarn run jest-local-watch
In Studio Code, do to the Debug panel, ensure that Debug Supervision Jest is selected and press play.
Frontend Tools & Workflow tips
Please use this markdown to share tools, plugins, configuration, good working practise or helpful hints.
VS Code
VS Code is a free, open source and fast editor, written in and works great with TypeScript and on top of that it is free. No surprise it was rated at the most popular development environment in the Stack Overflow 2018 Developer Survey. It has built in IntelliSense (TypeScript, JSON, HTML, CSS, Less and Sass), Git commands and massive choice of extensions. Visual Studio Code
Extensions
AngularDoc GitLens Debugger for Chrome Angular v6 Snippets