Webpack ES6 Starter Project w/ MVU architecture

A modular front-end boilerplate using the power and simplicity of MVU architecture, Webpack 4 + HMR, and ES6+ via Babel. Includes Webpack's Tree Shaking configuration. Utilizing functional javascript paradigm, BEM and mobile-first responsive approach. It's suitable for scalable applications.

The provided boilerplate is powered by the following technology stack:

Bundlers & task runners

• npm — package manager and task runner.
• Webpack 4 — module bundler.
• Gulp 4 — task runner.

Linters

• ESLint — modern linter that helps you avoid errors and enforce conventions in your styles.
• StyleLint — reporter for syntax and style issues.

Transpilers

• Babel 7 — transpiler from ES6 to ES5.

CSS ecosystem

• PostCSS — ecosystem of custom plugins and tools aimed at transforming extended syntaxes and features into modern, browser-friendly CSS.

  PostCSS plugins: build-utils/postcss/postcss.config.js

  • postcss-import
  • postcss-map
  • postcss-bem-fix-fdruide'
  • postcss-mixins
  • postcss-simple-vars
  • postcss-nested
  • postcss-utilities
  • postcss-jsmath
  • postcss-calc
  • postcss-atroot
  • postcss-selector-not
  • postcss-extend
  • lost
  • postcss-preset-env
  • postcss-color-function
  • postcss-media-fn
  • postcss-flexbugs-fixes
  • postcss-nano
  • postcss-reporter

• Tachyons — functional CSS library.

JavaScript ecosystem

• jQuery — javascript library.
• Waypoints — javascript library that makes it easy to execute a function whenever you scroll to an element.
• Ramda — javascript functional library.
• Hyperscript Helpers — terse syntax for hyperscript.
• Virtual DOM — a javascript DOM model supporting element creation, diff computation and patch operations for efficient re-rendering.

Templates

• Ejs — embedded JavaScript templates.

 

Quick start

Clone the project using the following command:

git clone https://github.com/wwwsolutions/wwwsolutions-mvu-starter app-name
cd app-name
npm install

Run development:

npm run dev

Run production:

npm run prod

Run production server:

npm run prod:serve

Prerequisites

Support for Node.js > 8

White Label It

• Update name, description, author, repository in package.json
• Update app title in build-utils/options/htmlWebpackPluginOptions.js

 

Expose App on Your Local Dev Machine

Assign yourself a unique publicly accessible url that will proxy all requests to your locally running webserver.

npm install -g ngrok
npm run tunnel # run in a new tab

You will receive a url, for example https://439bf560.ngrok.io, that you can share with anyone. Any requests will be routed to your local service at the specified port.

What's happening under the hood when I run npm run dev?

Webpack serves your app in memory when you run npm run dev. No physical files are written. However, the web root is /src, so you can reference files under /src in index.html.

What's happening under the hood when I run npm run prod?

When the app is built using npm run prod, physical files are written to /dist folder and the app is served from /dist with command npm run prod:serve.

How do I deploy this?

npm run prod. This will prepare and build the project for production use. It does the following:

• Minifies all JS and CSS
• Inline base64 URLs for images and fonts if their size is less than specified limit
• Places the resulting built project files into /dist directory. (This is the folder you'll expose to the world).

 

Gulp Tasks

This task takes multiple svg files from src/assets/icons and generates single sprite file in src/assets/sprites/. Also generates a CSS file src/styles/postcss/generated/_sprite.css from template gulp/templates/sprite. To use it, add class="icon .icon--*" into your html.

npm run gulp:icons

A custom build of Modernizr for feature detection. Generates src/vendors/modernizr.js file from options in .browserslistrc. Used in webpack build.

npm run gulp:modernizr

   

License

MIT License, 2019.

Brought to you by Domagoj-Mario Mendas