Front End Scripts

Get a Front End project up with no external configuration

Features

• Yarn
• HTTP/2
• HTTPS
• GZipping
• Hot reloading
• Injected JS/CSS assets
• Tree-shaking optimisation
• Cache busted production assets
• Source maps

CSS Support

• PostCSS
• Autoprefixer
• SCSS style syntax
• cssnext
• CSS Nano minification
• rem() function support

JavaScript Support

• Babel
• ES2015
• ES2016
• UglifyJS minification
• Vendor chunking

Code Quality

• ESLint
• styleLint

Configuration

If you need project specific configuration for the build/watch tasks, create a .build.config.js in the root folder of your project. It uses the following syntax:

module.exports = {
    entry: {
    }
};

Contributing

Publishing

To publish a new version to the NPM registry:

• Ensure you have publishing privileges on the NPM registry.
• Run npm login and enter your NPM user and password.
• Navigate to the root of the project and run npm version [patch|minor|major]. For guidance on semver see https://docs.npmjs.com/misc/semver.
• Run npm publish.

Troubleshooting

Environment variables on build

Ensure that the BUILD_ENV environment variable gets set directly before the call to build otherwise the variable will fall out of scope and be undefined in the build script context. eg: BUILD_ENV=production front-end-scripts build

Safari outputs a (WebSocket network error: OSStatus Error -9807: Invalid certificate chain)

You need to ensure you've correctly trusted the self-signed certificate within Safari. See the guide available here for how to do this. If the padlock icon doesn't show in the URL bar, you will need to clear browser history for the localhost domain and refresh the page.