frontend-boilerplate

An ES20XX starter with common frontend tasks using Webpack 5 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 ">=15.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 different folders needed by webpack and npm scripts	Map
BROWSERS	the browsers targeted for babel-preset-env and browserslist (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.imageWidth	width of the share image (default ${PACKAGE.config.url}/share.jpg)	String
config.imageHeight	height of the share image (default ${PACKAGE.config.url}/share.jpg)	String
config.type	Open Graph type	String
config.card	Twitter card	String
config.copyright	license acronym used for banner	String
config.handle	twitter handle for metas	String
config.analyticsUA	google analytics UA	String
config.pages	list of pages with id and optional name, description, EJS template for HtmlWebpackPlugin	Array
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 config/loaders/styles.js
• Sass
• Less
• Stylus
• fonts as Resources assets
• images as Resources assets, with automatic avif and webp fallbacks with convert-assets-webpack-plugin and <picture> wrapping using posthtml, optimised with image-webpack-loader
• videos as Resources assets
• svg as Resources assets and optimised with svgo-loader or as sprite with svg-sprite-loader
• html-loader
• ejs-loader
• glslify
• markdown-it-loader with markdown-it-attrs and markdown-it-toc-done-right

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
• HtmlWebpackProcessingPlugin: HTML pre-processing and post-processing for html-webpack-plugin.
• MiniCssExtractPlugin: lightweight CSS extraction plugin
• CssMinimizerWebpackPlugin: uses cssnano to optimize and minify your CSS.
• PurgecssWebpackPlugin: remove unused css.
• CrittersWebpackPlugin: inlines critical CSS and lazy-loads the rest.
• 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
• GenerateSW: The GenerateSW plugin will create a service worker file for you and add it to the webpack asset pipeline.
• BannerPlugin: add a banner to the top of each generated chunk.
• ObsoleteWebpackPlugin: A Webpack plugin generates a browser-side standalone script that detects browser compatibility based on Browserslist and prompts website users to upgrade it.
• WebpackBundleAnalyzer: Visualize size of webpack output files with an interactive zoomable treemap.

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