ft/README.md
2017-06-09 09:09:06 +01:00

99 lines
4.3 KiB
Markdown

# Installation and set up
## prerequisites
1. Nodejs > 6.5
2. Git
## steps
1. npm install aurelia-cli -g
2. npm install
3. ~~copy built assets folder from responsive-web to assets~~
4. au run --watch
5. 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 `--alan` to only rebuild css, assets 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 --use-test-server`, 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 this command to run that suite only e.g. `au test 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 this command to run that suite only e.g. `au test src\components\products\common\elements\ft-footnote.spec.js --ui`~~
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 this command to run that suite only e.g. `au test --bl 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](https://github.com/stylelint/stylelint-config-standard) with custom configuration in `.stylelintrc` file
### `au lint-js`
Uses [ESLint](http://eslint.org/) to lint all `.js` files within `src` and `test` folders.
Configuration is on '.eslintrc' and based on the Aurelia eslint configuration.
### `au lint-markup`
Lints html files using [gulp-lintspaces](https://www.npmjs.com/package/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](https://github.com/postcss/autoprefixer) via [postcss](https://github.com/postcss/postcss)
* minifies the css via [cssnano](http://cssnano.co/)
* 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/