squeezelite-esp32/components/wifi-manager/webapp

Boilerplate - Bootstrap v4 - SASS - JQuery - WebPack

SASS · Babel · Bootstrap · JQuery · PopperJS · Font Awesome

This Webpack4-Sass Boilerplate contains the following features:

• Webpack4 & Dev-Server
• TypeScript 3.7.5
• Babel ES6 Compiler
• Bootstrap v4 - with Theme Support
• Font Awesome v5.7
• Animate.css Library v3.7.2
• JQuery v3.3.1
• PopperJS v2
• _lodash
• concentrate and minify JavaScript.
• Compile, minify, Autoprefix SASS.
• Optimize and Cache Images
• Preconfigured BootsWatch Template (YETI & Slate)
• Linting for your TS, JS and SASS

Features

Webpack Loaders & Plugins

This project contains the following loaders & plugins:

• node-sass for compiling sass (SCSS)
• babel-loader for compiling ES6 code
• babel-eslint && eslint-loader for Linting your .js
• tslint for Linting your .ts
• lodash-webpack-plugin create smaller Lodash builds by replacing feature sets of modules with noop, identity, or simpler alternatives.
• webpack-dev-server for serving & Hot-Reloading
• css-loader for compressing css
• sass-loader for compressing and loading scss & sass
• url- & file-loader for loading and optimizing images
• xml and csv loader for loading data files
• html-loader for loading & optimizing html files
• clean-webpack-plugin for keeping your dist folder clean
• favicons-webpack-plugin generate favicons form your "logo.png"

Getting Started

Dependencies

Make sure these are installed first.

• Node.js

• Webpack

  npm install --g webpack

---

Quick Start

1. Clone the repo : git clone https://github.com/AndyKorek/webpack-boilerplate-sass-ts-bootstrap4-fontawesome.git
2. In bash/terminal/command line, cd into project directory.

3. Run npm i to install required dependencies.

4. Run the Dev Server with (with Hot Reloading) npm run dev

---

Build the Production Folder

npm run build

This will:

• Bundle and Minify SASS(scss) to css & Hash and Cash it
• generate GZip and Brodli Compressed Assets
• Bundle and Minify JS
• Optimize Images
• Optimize HTML
• generate Favicons

---

Documentation

Workflow structure

src - > source directory

dist -> build directory

├── src
│   ├── assets
│   │   └── images
│   ├── fonts
│   ├── sass
│   │   ├── layout
|   |   |     └── _features.scss
│   │   ├── setup
|   |   |     └── _normalize.scss
│   │   ├── themes
|   |   |     ├── _slate.scss
|   |   |     └── _yeti.scss
│   │   ├── utils
|   |   |     ├── _mixins.scss
|   |   |     └── _variables.scss
│   │   ├── _globals.scss
│   │   ├── _headings.scss
│   │   ├── _typography.scss
│   │   ├── _vendor.scss
│   │   └── main.scss
│   ├── ts
│   │   ├── custom.ts
│   │   ├── line-awesome.ts
│   │   ├── vendor.ts
│   |── .htaccess
│   |── 404.html
│   |── index.html
│   └── index.ts



├── dist
│   ├── assets
│   │   ├── images
│   │   └── 
│   ├── css
│   │   ├── vendors.[contenthash].css
│   │   └── main.contenthash].css
│   ├── js
│   │   ├── main.[contenthash].js
│   │   ├── runtime.[contenthash].js
│   │   └── vendors.[contenthash].js
│   │   
│   └── index.html

Loading the Features you need

in src/js/vendor/_boostrap.js uncomment all Features you need

put your custom js to src/js/_custom.js

---

Instructions

• Add sass(.scss) files to src/_scss folder.

  • Make sure you import the scss file in main.scss

    @import "filename";
    

• Add your assets to src/assets/

• Add images to src/assets/images

TODO list

• Bootstrap 4
• Webpack 4
• Jquery
• PopperJS v2
• Include ES-Lint
• Font-Awesome
• Assets Loader
• Separated location for Bundled Files
• Adding EsLint
• Code Optimising
• Uglify and Minify JS with Terser

Licence

Code released under the MIT License.

</> with :heart: from Germany