oytunistrator / bootstrap5-webpack-boilerplate

A Bootstrap 5 boilerplate, using Webpack 5, Babel, SCSS, etc.

Bootstrap 5 + WebPack 5 = Boilerplate

This is a professional front-end template for building web apps and sites faster, without having to create the basic setup on your own, every time you start a new project.

The template is based on the Bootstrap Framework in version 5 and uses Webpack in version 5 as a flexible and modern module bundler. All common features for front-end projects (like SCSS compilation, minifying of Assets, etc.) are included out of the box.

In addition to the basic front-end project setup, I added some cool features like a configurable image resizing command to make generating responsive images a breeze.

Table of Contents

1. Requirements
2. Quick Start

1. Requirements

The boilerplate needs Node.js to be installed on your system. It was tested with version 12 and newer.

2. Quick Start

1. Clone the repository into a new folder for your new project.

   git clone [e-mail]:oytunistrator/bootstrap5-webpack-boilerplate.git my-project

2. Remove the .git directory to add your own CVS later.

   rm -rf .git

3. Update the package.json.

      {
        "name": "my-project",
        "description": "A description of my new project",
        "author": "Your Name",
        "license": "MIT"
      }

4. Install needed dependencies

   npm install

5. Run webpack

   npm run dev

   The dev command will start Webpack and tell it to watch for changes in JS and SCSS files, to recompile the needed assets.

   If you want to compile all assets for production usage, run the following command.

   npm run build

   This command tells webpack to run in production mode and compiles all of the assets in a minified version, to deliver smaller files for your users.