WEBPACK FRONTEND BOILERPLATE

This boilerplate uses Webpack boundler and its dev server helps you build web apps and sites much faster. this project also uses Bootstrap , and a modern development workflow.

Features

• Live reloading Time-saving synchronised browser update after changes by using BrowserSync.
• Automatically optimization entry files
  concatenate, minify and inject output files to HTML
• Sass for stylesheets
  with the 7-1 Pattern
• Webpack 5 a good configuration - module bundler
• Bootstrap 5 - the most popular HTML, CSS and JS framework
• jQuery 3.6.0 - JavaScript library
• Font Awesome 4.7 - the web's most popular vector icons and social logos

Theme development

Node.js and npm is required dependency to work with this starter.

You can optionally use Yarn package manager as well.

Installation

1. Install Node.js (installation depends on operation system). (npm is distributed with Node.js).
2. It is recommended to install the latest version of yarn. How to install yarn?
3. Clone the repo using git clone https://github.com/smarteist/Frontent-Starter-Boilerplate.git.
4. Open project folder and run npm install command or if you installed yarn yarn.

Its Done.

Build commands

• yarn start or npm run start ─ webpack can watch files and recompile whenever they change, and start BrowserSync server session.
• yarn build or npm run build ─ compile assets without any compression or optimization.
• yarn build:production or npm run build:production ─ compile and optimize (the files in your assets directory) for production.
• yarn clean or npm run clean ─ cleanup previous build files in /dist folder.
• yarn lint:js or npm run lint:js ─ this command will lint all js files based on .eslintrc.js.
• yarn lint:style or npm run lint:style ─ This command will lint all style files based on .stylelintrc.js

Structure

Shorten directories and files structure which you'll see after build:

▼ project/
│
├──▼ src/
│  ├──▼ assets/            # template asset files
│  │  ├──► fonts/          # place template fonts files here
│  │  ├──► images/         # template images files
│  │  └──▼ styles/         # template style files
│  │     ├── [...]         # 7-1 Sass architecture folders
│  │     └── main.scss     # main Sass file that references scss source files
│  ├──▼ html/              # template HTML files
│  │  ├──▼ partials/       # partials of HTML code
│  │  │  └── [...]
│  │  ├── 404.html         # example 404 error page
│  │  └── index.html       # default index page
│  │  └── [...]
│  ├──▼ scripts/           # template javascript files
│  │  ├──► modules/        # dedicated project modules
│  │  ├──▼ vendor/         # necessary parts of frameworks and libs
│  │  │  └── [...]         # Bootstrap, jQuery, etc...
│  │  └── main.js          # main javascript file that references JS source files
│  ├── index.js            # entry point of template
│  └── [...]
├──▼ dist/                 # distribution folder with production build (don't edit*)
│  ├──► css/               # output styles
│  ├──► images/            # output images
│  ├──► js/                # output javascripts
│  ├── index.html          # homepage
│  └── [...]               # miscellaneous
├──▼ node_modules/         # Node.js packages (don't edit*)
│  └── [...]
├── .babelrc               # Babel configuration file
├── .eslintrc.js           # ESLint configuration file
├── .stylelintrc.js        # StyleLint configuration file
├── package.json           # Node.js dependencies and scripts
├── webpack.config.js      # Webpack configuration file
├── package-lock.json      # Node.js dependencies lock file (don't edit)
└── [...]                  # other files

License

Code released under the MIT license.