Awesome Open Source
Awesome Open Source

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

Alternatives To Frontend Boilerplate
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,061,746
Typescript (247,615
String (42,392
Webpack (23,634
Eslint (8,299
Babel (7,998
Prettier (4,364
Glsl (3,079
Npm Scripts (710
Webpack5 (225
Webpack5 Boilerplate (3