Skip to content
This repository has been archived by the owner on Feb 16, 2024. It is now read-only.

πŸ† 1st IntechFest Competition Politeknik Negeri Bali 2020

License

Notifications You must be signed in to change notification settings

cakadi190/lombaweb-2021-intechfest

Repository files navigation

Bootstrap 4 + WebPack 4 = 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 Bootstrap Framework version 4 and uses Webpack 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.

1. Features

2. Quick Start

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

    git clone git@github.com:noreading/bootstrap4-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 the dev command

    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.

3. Build for production

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.

4. Remove Bootstrap's JavaScript and jQuery

If you do not want to use any of the Bootstrap features that are relying on JavaScript and jQuery, you can remove some lines in your code to get rid of them completely.

Remove the following lines of code and re-run the dev command to update the generate assets.

/src/index.js

import Popper from "popper.js";
window.jQuery = $;
window.$ = $;

require("bootstrap");

/webpack.config.js

new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery"
});

5. Environment Configurations

If you use sensitive information in your code, like API keys or encryption tokens, you should never store those in your code repository. This can could lead to a security issue, especially if the repository is public.

Therefore I included the dotenv-webpack plugin in this boilerplate, that enables you to store all your sensitive information in a .env file, that is ignored by git.

The .env.default file should contain all the variables that your application needs, but without the real data and should contain either empty variables or default values that can be used by everyone. The variables will get replaced during asset compilation so that only those variables are added, that are referenced in your code.

It is a common scheme to use an uppercase syntax for environment variables, as you can see in the example below. Comments inside of .env files start with a hash.

# GOOGLE APIs

GOOGLE_MAPS_API_KEY=vEVmihkWZ2fqedyHQT***************
YOUTUBE_API_KEY=TnJ8YOfVuL9bbFH83T13N****************

# CACHING
CACHE_ENABLED=false
CACHE_TIMEOUT=3600

You can test the usage of environment variables by editing the .envt file and changing the value of HELLO. After re-compiling the assets you should see a message in the developer console, as soon as you visit the demo page.

Important:

After each change of the .env file you need to reload Webpack, as the environment is only loaded once per runtime. If you've got an active npm run dev command, you need to stop and re-run it, for the changes to take effect.

6. Responsive Image Generation

6.1 What is it?

This boilerplate includes a command to resize images based on a configuration file, to get rid of the hassle to care about the responsive image sizes manually. One of the benefits of this process is that it works on all major operating systems, without the need to do any manual installations.

If you want to use the resizing feature, please edit the file images.config.js in the root directory and change all settings to your needs. You can add multiple collections with different configurations for greatest flexibility.

In order for this command to work properly you need to have "clean" filenames for your images, that don't match the patterns used to create the resized filenames automatically. The filenames get a postfix, based on the resizing settings for the images width and height.

Filenames, that will be recognized as original images, are as follows.

Allowed Filename Description
my-image.jpg Simple filenames
my-image-1982-to-2018.jpg Filenames including numbers, also at the end.
my-image-400x200-tablet.jpg Filenames including dimensions, but not at the end.
my-image_400x200.jpg Filenames including dimensions, but using an underscore.

Filenames, that will not be recognized as original images, are as follows.

Prohibited Filename Description Pattern
your-image-w200.jpg Resized using a fixed width only {filename}-w{width}.{extension}
your-image-h400.jpg Resized using a fixed height only {filename}-h{height}.{extension}
your-image-200x400.jpg Resized using a fixed width and height {filename}-{width}x{height}.{extension}

You can use a test tool to check if your filenames will work correctly, by adding one filename per line into the "Test Strings" field. This helps to ensure that none of your images will be deleted.

You can use the regular expression to test files on your local machine, too. On Linux and Mac operating systems you can check if any image in a folder would conflict with the resizing tool by using the following command:

find ./ | grep -E ".*\-([0-9]+x[0-9]+|w[0-9]+|h[0-9]+)\.[a-z]+$"

All files that are listed should get renamed, following the rules you can see in the tables above.


6.2 The Configuration

The responsive image configuration is saved in the images.config.js file, located in the root directory of the project.

6.2.1 Global Settings

The configuration has some global settings, that you should set to your personal preferences.

Option Description Default
useTrash Moves files to the trash instead of deleting them directly, when using the "recreate" or "remove" argument. false

6.2.2 Collections

The configuration uses collections which include a set of configuration options to resize images. This allows you to define different resizing rules for multiple directories.

Each collection has the following options.

Option Description Required Default
name The name of the collection, to identify it in error messages, etc. yes -
source The source directory of the image files that should get resized. yes -
recursive Resize images in subdirectories, too? no true
sizes The configurations for image sizes that get created. yes -

6.2.3 Sizes

Each collection has the option "sizes" which includes a set of configurations for different image sizes that will be generated. Width and height are optional, if at least one of them is set.

Each size has the following options.

Option Type Description Required Default
name {string} The name of the collection, to identify it in error messages, etc. yes -
width {number} The width of the resized image. no -
height {number} The height of the resized image. no -
fit {string} The method by which the image should fit.

cover
Crop to cover both provided dimensions.

contain
Embed within both provided dimensions.

file
Ignore the aspect ratio of the input and stretch to both provided dimensions.

inside
Preserving aspect ratio, resize the image to be as large as possible while ensuring its dimensions are less than or equal to both those specified.

outside
Preserving aspect ratio, resize the image to be as small as possible while ensuring its dimensions are greater than or equal to both those specified.
no cover
position {string} The position When using a fit of "cover" or "contain"

left, right, top, bottom, center, left top, right top, left bottom, right bottom
no center

6.3 The Command Line Arguments

The resizing command supports different arguments to remove resized images, recreate all images, etc.

Command Description
npm run images Creates all resized versions of a file that are missing.
npm run images recreate Removes the resized versions of all files and recreates them.
npm run remove Removes the resized versions of all files.

Important:

The recreation and removal arguments will force the command to remove all images it detects as being resized versions (by their filename). If you use other tools for your images that add postfixes to the filenames, this might lead to false positives, so please backup your files before you run this.

npm run images remove

7. Placeholder Images

All placeholder images used in the index.html file are downloaded from pexels.com, and pixabay.com. Those are two fantastic collections of free stock photos from photographers around the globe.

If you're one of the photographers and would like to change the linked website or get an image removed from the boilerplate, please shoot me an email to code@dominik-hanke.de and I'll update it as soon as possible.

Carousel Image Photographer Website Image Source
1 kailash kumar facebook page pexels.com
2 Cleverpix cleverpix.com.au pixabay.com
3 GregMontani - pixabay.com

Album Photo Photographer Website Image Source
1 skeeze - pixabay.com
2 shottrotter shottrotter.be pexels.com
3 sasint pixartasia.com pixabay.com
4 Walkerssk walkers.sk pixabay.com
5 Marcocarli - pixabay.com
6 Jaymantri jaymantri.com pexels.com
7 veeterzy instagram profile pexels.com
8 Pok Rie - pexels.com

About

πŸ† 1st IntechFest Competition Politeknik Negeri Bali 2020

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published