github-actions aa8b5ec2d4 Update prebuilt objects [skip actions] 2 rokov pred
..
.vscode 3c94f63876 Fix offline icons 2 rokov pred
config 7c13c130b8 Wifi UI update 4 rokov pred
dist aa8b5ec2d4 Update prebuilt objects [skip actions] 2 rokov pred
mock 977935015e Update webpack and web ui to recent versions, bug fixes 2 rokov pred
src 3c94f63876 Fix offline icons 2 rokov pred
test 7c13c130b8 Wifi UI update 4 rokov pred
webpack 3c94f63876 Fix offline icons 2 rokov pred
.babelrc 15c0e47ae3 Network WIP 2 rokov pred
.eslintcache 15c0e47ae3 Network WIP 2 rokov pred
.eslintrc 7c13c130b8 Wifi UI update 4 rokov pred
.eslintrc.json.back 7c13c130b8 Wifi UI update 4 rokov pred
.gitignore 014030513a Merge remote-tracking branch 'origin/master-cmake' into master-cmake 4 rokov pred
LICENSE 7c13c130b8 Wifi UI update 4 rokov pred
README.md 7c13c130b8 Wifi UI update 4 rokov pred
debug.log 7c13c130b8 Wifi UI update 4 rokov pred
package.json 7fd87eeba5 Fixing bugs 2 rokov pred
package_old.json 15c0e47ae3 Network WIP 2 rokov pred
postcss.config.js 7c13c130b8 Wifi UI update 4 rokov pred
test.js 7c13c130b8 Wifi UI update 4 rokov pred
test.txt 7c13c130b8 Wifi UI update 4 rokov pred
tsconfig.json 7fd87eeba5 Fixing bugs 2 rokov pred
tslint.json 7c13c130b8 Wifi UI update 4 rokov pred
webapp.cmake aa8b5ec2d4 Update prebuilt objects [skip actions] 2 rokov pred
webapp.code-workspace 28dba930c7 .3: Auto stash before merge of "master-v4.3" and "origin/master-v4.3" 2 rokov pred
webpack.c aa8b5ec2d4 Update prebuilt objects [skip actions] 2 rokov pred
webpack.config.js 7fd87eeba5 Fixing bugs 2 rokov pred
webpack.h aa8b5ec2d4 Update prebuilt objects [skip actions] 2 rokov pred

README.md

Boilerplate - Bootstrap v4 - SASS - JQuery - WebPack

Webpack Webpack node-sass jquery jquery popper.js eslint Font Awesome Line Awesome

webpack logo bootstrap logo babel logo sass logo

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.


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