GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → dmnsgn → Frontend Boilerplate

dmnsgn / Frontend Boilerplate

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

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Labels

webpackboilerplatetemplatefrontendbabelglslstarterwebpack4

Projects that are alternatives of or similar to Frontend Boilerplate

Tris Webpack Boilerplate
A Webpack boilerplate for static websites that has all the necessary modern tools and optimizations built-in. Score a perfect 10/10 on performance.
Stars: ✭ 1,016 (+353.57%)
Mutual labels:  webpack, webpack4, babel, starter, boilerplate
Webpack Boilerplate
A minimal webpack 5 boilerplate with only Babel, SASS and lodash (optional) on board
Stars: ✭ 404 (+80.36%)
Mutual labels:  webpack, webpack4, babel, boilerplate
Js Library Boilerplate Basic
Javascript Minimal Starter Boilerplate - Webpack 5 🚀, Babel 7, UMD, Unit Testing
Stars: ✭ 354 (+58.04%)
Mutual labels:  webpack, webpack4, babel, boilerplate
Suicrux
🚀 Ultimate universal starter with lazy-loading, SSR and i18n. [not maintained]
Stars: ✭ 958 (+327.68%)
Mutual labels:  webpack, starter, boilerplate, template
React App
Create React App with server-side code support
Stars: ✭ 614 (+174.11%)
Mutual labels:  webpack, babel, boilerplate, template
Vue Electron Template
An Electron & Vue.js template with Hot-reloading enabled and common Vue plugins, dev, debug and build scripts configured.
Stars: ✭ 260 (+16.07%)
Mutual labels:  webpack, webpack4, starter, boilerplate
Minimal React Webpack Babel Setup
The minimal React, Webpack, Babel Setup. You want to get beyond create-react-app?
Stars: ✭ 777 (+246.88%)
Mutual labels:  webpack, webpack4, babel, boilerplate
React Starter Kit
React, Redux, Webpack, Material UI, Boostrap 4, Code Splitting, HMR
Stars: ✭ 229 (+2.23%)
Mutual labels:  webpack, webpack4, babel, boilerplate
Vue Element Starter
Vue starter with Element-UI [READY, unmaintained now]
Stars: ✭ 216 (-3.57%)
Mutual labels:  webpack, starter, boilerplate, template
Styled React Boilerplate
Minimal & Modern boilerplate for building apps with React & styled-components
Stars: ✭ 198 (-11.61%)
Mutual labels:  webpack, webpack4, babel, boilerplate
Express React Boilerplate
🚀🚀🚀 This is a tool that helps programmers create Express & React projects easily base on react-cool-starter.
Stars: ✭ 32 (-85.71%)
Mutual labels:  webpack, babel, boilerplate, template
Js Library Boilerplate
Javascript Starter Boilerplate - Webpack 4, Babel 7, UMD, Hot Reloading, and more
Stars: ✭ 202 (-9.82%)
Mutual labels:  webpack, webpack4, babel, boilerplate
Frontie Webpack
Front-end Boilerplate | Gulp 4 + Webpack 4 + Babel + ITCSS Architecture + BEM Methodology + Twig.js
Stars: ✭ 102 (-54.46%)
Mutual labels:  webpack, webpack4, babel, boilerplate
Webpack Starter
✨ A lightweight foundation for your next webpack based frontend project.
Stars: ✭ 1,745 (+679.02%)
Mutual labels:  webpack, babel, boilerplate, frontend
React Expressjs
Simple and compact boilerplate for ReactJS project with expressJS
Stars: ✭ 208 (-7.14%)
Mutual labels:  webpack, babel, boilerplate
Awesome Chrome Extension Boilerplate
Use react + typescript + webpack to enhance your chrome extension development experience
Stars: ✭ 146 (-34.82%)
Mutual labels:  webpack, boilerplate, template
Webpack Babel Multi Target Plugin
A Webpack plugin that works with Babel to allow differential loading - production deployment of ES2015 builds targeted to modern browsers, with an ES5 fallback for legacy browsers.
Stars: ✭ 150 (-33.04%)
Mutual labels:  webpack, webpack4, babel
React Core Boilerplate
Powerful ASP.NET Core 3 templates with React, true server-side rendering and Docker support
Stars: ✭ 169 (-24.55%)
Mutual labels:  webpack, boilerplate, template
Js Stack Boilerplate
Final boilerplate code of the JavaScript Stack from Scratch tutorial –
Stars: ✭ 145 (-35.27%)
Mutual labels:  webpack, babel, boilerplate
React Redux Universal Boilerplate
An Universal ReactJS/Redux Boilerplate
Stars: ✭ 165 (-26.34%)
Mutual labels:  webpack, babel, boilerplate
View All Similar Projects ➔

frontend-boilerplate

travis dependencies repo size version twitter styled with prettier license

An ES20XX 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 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.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

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

Licence

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].