Skip to content

Webpack + Nunjucks boilerplate for static websites that has all the necessary modern tools and optimizations built-in.

License

Notifications You must be signed in to change notification settings

Drifterdnl/bootstrap5-webpack-nunjucks-boilerplate

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

📦 Bootstrap 5 + Webpack + Nunjucks Boilerplate

License: MIT

Bootstrap 5 + Webpack + Nunjucks boilerplate for static websites that has all the necessary modern tools and optimizations built-in.


⚗️ Features


🚀 Usage

# Clone repository
git clone https://github.com/alsolovyev/webpack-boilerplate.git project-name

# Navigate to the project directory
cd project-name

# Install dependencies
yarn          # npm install

# Run webpack-dev-server with page reload
yarn start    # npm start

# Run webpack-dev-server without page reload
yarn watch    # npm start

# Build the project from sources
yarn build    # npm run-script build

# Deploy the dist folder to GitHub pages
yarn deploy

💻 Available Scripts

  • serve - run the webpack-dev-server with page reload
  • watch - run the webpack-dev-server without page reload
  • build - build the project for production
  • deploy - deploy the dist folder to GitHub Pages

📘 Documentation

TypeScript Support

By default, TypeScript support is disabled. To enable it, set the TS_SUPPORT environment variable to true in package.json.

... TS_SUPPORT=true ...

Multiple pages

Just create nunjucks files in src folder

┣━ js
┣━ njk
┣━ sass
┣━ home.njk
┣━ page1.njk
┣━ page2.njk

SVG sprite

  1. Import SVG icon
// src/js/dev/icons.js
import '@/icons/github.svg'
  1. Use this icon in your template
// *.njk
{{ icon('github') | safe }}

Environment variables

NODE_ENV

Type: 'development' | 'production' | none
Default: 'development'

Indicates the current mode.

OUTPUT_DIR

Type: string
Default: 'dist'

Indicates the directory where the production build files will be generated.

PUBLIC_PATH

Type: string
Default: '/'

Indicates the base URL your project bundle will be deployed at.

SOURCE_DIR

Type: string
Default: 'src'

Indicates the directory where the source files are located.

TS_SUPPORT

Type: 'true' | 'false' | none
Default: none

Indicates whether TypeScript support should be enabled.
none is equal to false


🔨 Task List

  • Have a cup of tea
  • Clear the terminal screen (c73fd0)
  • Enable ESLint for TypeScript files (c27e7b)
  • Run loaders in a worker pools (daee75)
  • Run TypeScript type checker on a separate process (534c0b)
  • Disable TypeScript support by default (e7c659)
  • Replace simple-nunjucks-loader with custom loader (b05607)
  • Add nunjucks functions and filters (90e877)
  • Optimize njk-loader code
  • Enable caching
  • Add native OS notifications

📓 Dependencies

Webpack:

Loaders:

Plugins:


💩 Authors


📖 License

This project is licensed under the MIT License

About

Webpack + Nunjucks boilerplate for static websites that has all the necessary modern tools and optimizations built-in.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 77.3%
  • Sass 20.1%
  • Nunjucks 2.6%