.
├── /javascript
├── /node_modules // created and managed by Yarn
├── /public
│ ├── /build // created and managed by Webpack
│ ├── /fonts
│ ├── /images
│ ├── favicon.ico
│ └── manifest.json
├── /styles
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .stylelintrc
├── CHANGELOG.md
├── index.html
├── package.json
├── postcss.config.js
├── README.md
├── webpack.config.js
├── webpack.parts.js
└── yarn.lock
/javascript
All pre-compiled JavaScript source lives here. The root of the folder contains the bundles. If you need to add a new bundle, be sure to add it to the webpack.config.js file.
We use Babel to allow us to use the latest version of JavaScript through syntax transformers. The ES2015 and Stage 2 presets are installed by default. This will provide you with all you need to compile ES2015 down to ES5 as well as support for class properties. If you plan to support React/JSX or something a little more experimental, take a look at the transforms available. Babel config is found in .babelrc.
Webpack is used to run Babel and any other transforms, such as minification. The compiled JavaScript and source map file(s) will be saved to /public/build in production.
Prior to Babel, ESLint is run to highlight any stylisitic and syntactical JavaScript issues. Rules used are listed in .eslintrc.
StyleLint is used to highlight stylistic and syntactic CSS issues. Rules are listed in .stylelintrc. A comprehensive list of all the available rules can be found here.
In production the final JavaScript will be minified.
/styles
We use Sass and Autoprefixer to create CSS. The configuration for Autoprefixer can be found in postcss.config.js.
Webpack is used to run Sass and another transforms, such as Autoprefixer and minification. The compiled CSS and source map file(s) will be saved to /public/build in production.
In production the final CSS will be minified and extracted to a separate CSS file.
/public
This folder should contain all the files you would like to be available to the public (fonts, images, etc).
Ensure the site has a favicon.ico.
Run (in this directory):
yarn
This ensures the all the Node packages are installed. Any new packages should be installed with the yarn add [package]. The only exception to this is if the package will only ever be run on a developers machine (e.g. BrowserSync) - for this case, use yarn add [package] --dev. Follow the Yarn guide for more information.
Sass and JavaScript will be processed and watched for changes. Scripts will be linted and Webpack dev server will be started. These assets will be served from memory via the dev server, no files are written to disk.
Run (in this directory):
yarn run watch
Then visit http://localhost:3000
If you don't want to watch your files and just compile you can run:
yarn run build
Sass and JavaScript will be processed and minified. CSS is extracted into separate files. File names contain a cache busting hash. The manifest.json in /public/build can be using by BE to map the file names.
Run (in this directory):
yarn run build --production
- Zone CSS style guide - for Zone CSS best practice and standards - View default linting rules
- Zone JavaScript style guide - for Zone JavaScript best practice and standards - View default linting rules