Skip to content
Front End stack to get your next project off the ground.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
client
static
.build.config.js
.editorconfig
.eslintrc.json
.gitignore
.stylelintrc.json
.travis.yml
LICENSE
README.md
package.json
sw-precache-config.js
yarn.lock

README.md

Front End Stack

Build Status Software License

A boilerplate used by the Front End team at Pixel Fusion, a Product Design studio based in Auckland, New Zealand.

Further documentation around the architecture, techniques and best practices used in this boilerplate can be found in the Front End Stack Wiki.

Requirements

  • Node.js > 7.3.0 (brew install node)
  • NPM > 4.0.0 (installed as part of Node.js)
  • Yarn > 0.18.0 (brew install yarn)

Branch Architecture

The repository is divided into three branch categories: Feature, Hotfix, Iteration, Test. Both Feature and Hotfix branches should be directly linked to an open issue: FESt/issues

Branch Categories

  • Feature: Should be used for developing any feature e.g feature/button-style
  • Hotfix: Used for bug fixing in either iteration or feature branches e.g hotfix/button-alignment or iteration/redux-ducks/hotfix/router
  • Iteration: Used for different build iterations but keep the same CSS Architecture e.g iteration/redux-ducks
  • Test: Create testing branches in either root or iterations for shared experiments. test/chunking-experiment

Note: For Iteration branches create a sass/test.scss file to house any custom styling. This is to avoid conflicts when merging the CSS Architecture (sass/*) from Develop.

Active Iterations:


Installing

Run yarn install to install the project.

Running

Run yarn start to watch and compile the Javascript and SCSS files. The project uses:

  • Babel, to provide ES6 support.
  • PostCSS, to allow us to use:
    • Autoprefixer, to take care of those pesky prefixes...which are being phased out!
  • Jest, to handle Unit testing of the Javascript.

View the Style Guide at https://localhost:3000/style-guide.html

Building

Run yarn build to create a production ready public folder with all necessary assets.

Linting

To run both linters, use the following command:

yarn run lint

To just run the Javascript linter:

yarn run lint-js

To just run the SASS/CSS linter:

yarn run lint-scss

Testing

To run the Jest unit tests, use the following command:

yarn test

Browser Support

Supported and tested in the following browsers:

  • Internet Explorer (10-11)
  • Chrome
  • Firefox
  • Safari 9
  • Edge 14

Polyfills

The following polyfills have been included by default, ensure you remove any unused ones to cut down on file size and unnecessary JavaScript execution. Polyfills are only loaded for older browsers (Internet Explorer and Safari < 10).

  • babel-polyfill - Adds modern ES6 language support to older browsers (including Promises).
  • SVG4Everybody - Adds the ability to implement <use></use> SVG element in older browsers (IE10), for use with external SVG loading.
  • whatwg-fetch - Adds fetch() support to older browsers.

Gotchas

  • Always set width and height on elements which implement external <use> elements, otherwise Internet Explorer does not display them.

Inspiration

Our base HTML is inspired by:

Debugging (TODO)

  • front-end-scripts build --linked
  • front-end-scripts start --linked
You can’t perform that action at this time.