ft-webplatform/README.md

Installation and set up

prerequisites

1. Nodejs > 6.5
2. Git

steps

1. npm install aurelia-cli -g
2. npm install
3. au run --watch
4. au test

build details

The build creates web-platform.js in the assets/js folder

commands

au run

Runs the build process, then starts a local dev server on port 9000 i.e. http://localhost:9000/

• Add flag --js to only rebuild javascript and markup when developing. This speeds up the rebuild.
• Add flag --dev to only transpile js and process markup without linting when developing. This speeds up the rebuild. Run a full build before committing.
• Add flag --docs to only build the markdown files. This speeds up the documentation.

Run a full build before committing.

au run --watch

Same as au run, but will rebuild when code changes See au run task for --js and --docs and --dev flags

au run --watch --use-test-server

Same as au run --watch, but will use test server data Type au help run for more details

au build

Runs the build process. This includes linting, processing, transpiling and bundling, but not tests See au run task for --js and --docs and --dev flags

au test

Runs ALL test suites (*.spec.js files).

Append a spec filename to --focused-test to run that suite only

au test --focused-test ft-footnote

to run

src\components\products\common\elements\ft-footnote.spec.js

au test --ui

Runs test suites for UI components using Jasmine and Karma. This will open and close a browser window while running tests.

Append a spec filename to --focused-test to run that suite only

au test --ui --focused-test ft-footnote

to run

src\components\products\common\elements\ft-footnote.spec.js

NB: Doesn't run the Business Logic (reducer) test suites.

au test --bl

Runs test suites for Business Logic JS files (reducers, value-converters etc) using Jest.

Append a spec filename to --focused-test to run that suite only

au test --bl --focused-test distribution-rate

to run

src\components\products\distributions\ft-distributions\lib\en-us-retail\distribution-rate.spec.js

NB: These tests run very fast, as they only use NodeJS.

au lint-css

Lints all scss files within src folder using http://stylelint.io/ Configuration is based on stylelint-config-standard with custom configuration in .stylelintrc file

au lint-js

Uses ESLint to lint all .js files within src and test folders. Configuration is on '.eslintrc' and based on the Aurelia eslint configuration. Why we indent with spaces

au lint-markup

Lints html files using gulp-lintspaces All this really lints is whitespace and indentation, but at the moment there aren't any suitable html snippet linters.

au process-assets

At present, this just copies the bootstrap fonts from the node_modules folder to assets. In future it will likely copy more font and image files as part of the build.

au process-css

This applies the following to the scss files in the src folder:

• runs the lint-css task
• compiles the sass into css
• applies autoprefixer via postcss
• minifies the css via cssnano
• generates css sourcemaps
• saves the css files and sourcemaps to the assets folder

au process-markup

This just applies the lint-markup task, before passing the markup off to the bundler

au generate redux-component

This is used to generate a redux component or sub-component. Tests, documentation, sass and (optionally) reducer files are also generated. See lib/redux-component-base.md for more details.

au proxy-server

This is used to test the dev assets against the live or dev site.

Example proxying live site with dev css assets

au proxy-server --proxy-target http://rcovlnx0188:8202 --dev-css-assets-server http://pattern-library.corp.frk.com/

Example proxying dev site with dev css assets

au proxy-server --dev-css-assets-server http://pattern-library.corp.frk.com/

Example proxying live site with dev js assets, and aurelia etf config

au proxy-server --override-aurelia-config configuration/etf/main --dev-js-assets-server http://localhost:9000/