parys-github/material-webpack-boilerplate

Webpack & Material Design Boilerplate. The project is initially configured and in the structure you will find the template with basic examples of the Material Design components and detailed list of all implemented modules.

📦 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.