Front-end starter kit

Springload’s reference and starter kit for front-end development.

Important links 📖
Documentation in docs/
Pattern library
Front-end tech stack
Front-end principles
Front-end guidelines questionnaire
Launch QA checklists
Useful tooling

Installation

Clone the project on your computer, and install Node. This project also uses nvm.

From the command-line:

cd ~/Development/sites/
git clone git@github.com:springload/frontend-starter-kit.git
cd frontend-starter-kit

To install our dependencies:

nvm install
# Then, install all project dependencies.
npm install
# Install the git hooks.
.githooks/deploy
# Install global dependencies to integrate tooling with your editor of choice.
npm install --global sass-lint babel-eslint eslint-config-airbnb eslint eslint-plugin-react eslint-plugin-import eslint-plugin-jsx-a11y

Working on the project

Everything mentioned in the installation process should already be done.

# Make sure you use the right node version.
nvm use
# Start the server and the development tools.
npm run start
# Builds frontend assets.
npm run build
# Runs linting.
npm run lint
# Runs tests.
npm run test
# View other available commands with:
npm run

Tests

We use Jest for unit tests.

# Run all the tests.
npm run test
# Run tests in a watcher.
npm run test:watch
# Run test coverage
npm run test:coverage
# Open the coverage report with:
npm run report:coverage
# Open the build report with:
npm run report:build
# Run the CI test suit.
npm run test:ci

Manual tests

• Cross-platform favicons – https://realfavicongenerator.net/favicon_checker
• Structured data (schema.org) – https://search.google.com/structured-data/testing-tool
• Facebook Open Graph metadata – https://developers.facebook.com/tools/debug/sharing/
• Twitter cards metadata — https://cards-dev.twitter.com/validator

Pattern library

Our projects come with a pattern library to facilitate development, documentation, and long-term maintenance.

Here are the available commands:

# Start the pattern library in development mode.
npm run patterns
# Export the pattern library.
npm run patterns:dist

Deployments

# To preview.
npm run deploy:preview
# To production.
# From your local machine, push to the master branch before pushing to the production branch so they are always both up to date.
npm run deploy:production

Setting up tests on continuous integration

The CI tests require the following setup. Some of those might already be done within the CD build.

nvm install
npm install
npm install -g david hyperlink

Use npm run test:ci as part of the test pipeline.

Deploying the starter kit demo site

The starter kit's demo site is hosted on GitHub Pages.

# Make sure to have the styleguide generator installed.
npm install -g markdown-styleguide-generator
./docs/deploy-pages.sh

Documentation

Code styleguide and linting

The project's code is linted with ESLint for JavaScript and Sass Lint for Sass.

For Sublime Text 3 users, install SublimeLinter, SublimeLinter-contrib-eslint, and SublimeLinter-contrib-sass-lint.

Browser support

Copy/paste & adapt Browser & device support template

Polyfills

Basic polyfills are included in the starter kit, and loaded via Webpack.

Analytics

Analytics are set up with Google Analytics.

JavaScript errors are tracked in Google Analytics as "Exceptions". A custom report needs to be created for this data to be visible inside the GA interface.

Favicons

To generate new favicons,

1. Go to https://realfavicongenerator.net/
2. Upload your favicon source file as an SVG or PNG with a resolution of at least 512x512.
3. Configure the favicon generation. Use specific images for each platform if relevant.
4. Grab the result files, use ImageOptim to losslessly optimize their size them.
5. Grab the result HTML tags, add it to the core/templates/core/includes/favicons.html file.
6. Make sure the files are served by the server as expected.

Debugging

JavaScript

There are a lot of development aids within the code. Use them.