📦 Material Design with Webpack Boilerplate

Webpack 5 with Material UI Components Boilerplate. Compilation contains basic Material template. Package is using Babel, PostCSS and Sass with a hot dev server. The project is fully configured and ready to generate the final production process.

Beside of that boilerplate basic template has implemented bunch of useful features like:

• custom font,
• custom icons,
• scroll to top,
• partials templates contains independent contents

  Global partial modules like:

• analytics (soon)
• hero section (soon),
• footers,
• header contains desktop and mobile navigation supported with Headroom.js feature.

Sample template contains Accordion Module & Swiper Module - features fully compatible witch other Material components.

Working DEMO available at mdpack.vajracode.net

Installation

Clone this repo and npm install.

git clone https://github.com/parys-github/material-webpack-boilerplate.git

Instal required NPM modules

npm i

Usage

Development server

npm start

You can view the development server at localhost:8080.

Production build

npm run build

Note: Install http-server globally to deploy a simple server.

npm i -g http-server

You can view the deploy by creating a server in dist.

cd dist && http-server

Basic Knowledge Base

• How to setup Webpack 5 - from Scratch
• Webpack Official Homepage
• Material Web Components
• NPM WEB COMPONENTS
• Material Layout Grid
• Material Responsive Grid
• Web Components Catalog
• Web Components Usage
• Material Icons Library

Dependencies

Webpack

• webpack - Modules bundler.
• webpack-cli - Command line interface for Webpack
• webpack-dev-server - Development server for Webpack
• webpack-merge - Simplify development/production configuration
• cross-env - Cross platform configuration

Babel

• @babel/core - Transpile ES6+ to backwards compatible JavaScript
• @babel/plugin-proposal-class-properties - Use properties directly on a class (an example Babel config)
• @babel/preset-env - Smart defaults for Babel

Loaders

• babel-loader - Transpiling files with Babel and Webpack
• sass-loader - Load SCSS and compile to CSS
• node-sass - Node Sass
• postcss-loader - Process CSS with PostCSS
• postcss-preset-env - Sensible defaults for PostCSS
• css-loader - Resolve CSS imports
• style-loader - Inject CSS into the DOM

Plugins

• clean-webpack-plugin - Remove/clean build folders
• copy-webpack-plugin - Copy files to build directory
• html-webpack-plugin - Generate HTML files from template
• mini-css-extract-plugin - Extract CSS into separate files
• css-minimizer-webpack-plugin - Optimize and minimize CSS assets

Additional modules

• Accordion - Silky-smooth accordion widget
• Audio.js - Modern Audio Player widget
• Headroom.js - Lightweight, high-performance JS widget
• Swiperjs - Most modern mobile touch slider

Linters

• eslint - Enforce style guide across application
• eslint-config-airbnb-base - Base styleguide to enforce rules
• eslint-config-prettier - Implement prettier rules
• eslint-plugin-import - Implement import rules
• eslint-plugin-prettier - Dependency for prettier usage with ESLint
• eslint-import-resolver-webpack - Throw exceptions for import/export in webpack
• eslint-webpack-plugin - ESLint configuration for webpack
• prettier - Dependency for prettier-webpack-plugin plugin
• prettier-webpack-plugin - Prettier configuration for webpack

Images - free placeholders comes from:

• https://picsum.photos/
• https://unsplash.com/

Project directory structure

├── .git/                   # git repo
│   └── ...
├── config/                 # Webpack configuration directory
│   ├── paths.js            # Global paths setup
│   ├── webpack.common.js   # Default Webpack configuration file
│   ├── webpack.dev.js      # Development build configuration file
│   └── webpack.prod.js     # Production build configuration file
├── dist/                   # Build directory
│   └── ...
├── node_modules/           # Node library
│   └── ...
├── public/                 # Static assets directory
│   └── ...
├── src/                    # Project source files
│   ├── fonts/              # Custom fonts
│   │   └── ...
│   ├── img/                # Image assets
│   │   ├── icons/          # Custom icons
│   │   └── ...
│   ├── js/                 # JavaScript files
│   │   └── ...
│   ├── scss/               # Sylesheet files
│   │   └── ...
│   └── views/              #
│       ├── content/        # Content (html)
│       │   └── ...
│       ├── partials/       # Partials (html) modules
│       │   ├── components  # Partials (html components)
│       │   └── ...
│       ├── templates/      # Pages templates
│       │   └── ...         #
│       └── ...
├── .babelrc.json           # Presets and plugins conf
├── .eslintrc.json          # Conf linting rules file
├── .gitignore              # Defaulr ignore
├── .prettierrc.json        # Prettier formatting rules
├── LICENSE                 # MIT License (MIT)
├── package.json            # Required modules packages
├── postcss.config.js       # Styles transforming conf
└── README.md               # Project instruction

License

This project is open source and available under the MIT License.