Skip to content

Front end tooling

What's included

  • Sass CSS with auto-prefixing.
  • Babel for ES2015+ support.
  • Browsersync for autoreloading.
  • Webpack for module bundling.
  • With babel-loader to process JavaScript.
  • With css-loader, postcss-loader, and sass-loader to process stylesheets.
  • Consideration for images, currently copying the directory only - to avoid slowdowns and non-essential dependancies. We encourage using SVG for UI vectors and pre-optimised UI photograph assets.
  • Build commands for generating testable or deployable assets only
  • CSS linting with stylelint
  • JS linting with eslint

Developing with it

  • To start the development environment, follow instruction in README.md in the project root
  • Source files for developing your project are in ui and the distribution folder for the compiled assets is tate/static_compiled.

Deploying it

Build scripts

To only build assets for either development or production you can use

  • npm run start To build development assets in watch mode
  • npm run build To build development assets as a one-off
  • npm run build:prod To build assets with production optimisations