Skip to content
/ frontend-boilerplate Public template

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

Notifications You must be signed in to change notification settings

dmnsgn/frontend-boilerplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

frontend-boilerplate

dependencies repo size version Conventional Commits styled with prettier linted with eslint license

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

paypal coinbase twitter

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

Webpack plugins

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

Licence

MIT