jamstackza / frontend-boilerplate

An ES201X starter with common frontend tasks using Webpack 4 as module bundler and npm scripts as task runner.

frontend-boilerplate

An ES201X starter with common frontend tasks using Webpack 4 as module bundler and npm scripts as task runner.

If you serve your files over HTTPS with HTTP/2, use compression (gzip, brotli...) for text-based resources, and respect accessibility rules, your lighthouse score will be 100%.

Setup

Requirements

Node ">=6.0.0" (use brew or install it from here)

brew install node

Clone the repository

OSX & Linux:

git clone --depth 1 https://github.com/dmnsgn/frontend-boilerplate.git && cd frontend-boilerplate && rm -rf .git && git init

Windows:

git clone --depth 1 https://github.com/dmnsgn/frontend-boilerplate.git && cd frontend-boilerplate && rd /s /q .git && git init

Dependencies

npm install

Configuration

Open config/config.js:

Key	Description	Type
PATHS	map of paths to the differents folders needed by webpack and npm scripts	Map
BROWSERS	the browsers targeted for babel-preset-env and autoprefixer (see full list here)	Array

Open package.json:

Key	Description	Type
config.title	title used for metas and favicons	String
config.url	absolute url used for metas, robotstxt, sitemap and banner	String
config.lang	language for index.html and favicons	String
config.description	title used for metas, favicons and banner	String
config.copyright	license acronym used for banner	String
config.handle	twitter handle for metas	String
config.analyticsUA	google analytics UA	String
author.name	author name used for favicons	String
author.url	author url used for favicons	String

Develop

npm run dev
// or npm start

Production

npm run prod
// or npm run build

Features

Webpack loaders

• Babel with preset-env and TypeScript
• PostCSS: see postcss.config.js
• Sass
• Less
• Stylus
• fonts via file-loader
• images via file-loader and optimised with image-webpack-loader
• svg via file-loader and optimised with svgo-loader
• html-loader
• ejs-loader
• glslify

Webpack plugins

• DefinePlugin: create global constants which can be configured at compile time
• HotModuleReplacementPlugin: enable Hot Module Replacement
• HtmlWebpackPlugin with Lodash templates: simplify creation of HTML files
• MiniCssExtractPlugin: lightweight CSS extraction plugin
• SpritesmithPlugin: convert a set of images into a spritesheet and SASS/LESS/Stylus mixins
• CompressionPlugin: Prepare compressed versions of assets to serve them with Content-Encoding (default to gzip). Requires server configuration so it is commented here
• OfflinePlugin: provide an offline experience using ServiceWorker, and AppCache as a fallback.
• BannerPlugin: add a banner to the top of each generated chunk.
• WebpackStatsPlugin: ingest the webpack stats object, process / transform the object and write out to a file for further consumption.

npm scripts

• npm run clean: remove all the files from the dist directory
• npm run favicons: generate favicons files and /src/templates/_favicons.ejs
• npm run robotstxt: generate robots.txt file
• npm run sitemap: generate sitemap.xml file

Prettier formatter

• Prettier
• ESLint Prettier Plugin
• ESLint Prettier Config

Licence

MIT