Skip to content
Experimentation with three.js and camera input
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

GreenZeta Logo gz-webpack-boilerplate

Webpack 4 Boilerplate

Dependency Status devDependency Status

Lightweight Webpack 4 boilerplate with Babel, SASS and no production dependencies. Includes:

  • PWA support
    • Web manifest
    • Service worker
    • Front-loading app shell css file
  • OpenGraph meta tags for social media sharing

Table of contents


All you need is node.js pre-installed and you’re good to go.

Project Files

├── app-shell.css                       # Vanilla css to display before JS bundle loads
├── assets                              # Project media files
│   ├── icons                           # Icons used for PWA installation
│   │   ├── icon-#x#.png
│   └── images                          # Project images directory
│       └── logo.svg            
├── index.ejs                           # Project index.html file template
├── manifest.json                       # Web manifest file used for PWA installation
├── package.json                        # Packaging information and node scripts (see below)
├── service-worker.js                   # A boilerplate service worker
├── src
│   ├── main.js                         # Add your JavaScript here
│   └── serviceWorkerRegistration.js    # Optional service worker registration script
├── styles
│   ├── _normalize.scss                 # CSS normalizer
│   └── main.scss                       # Add your SASS here
├──             # Production webpack configuration
├── webpack.config.common.js            # Base webpack configuration
└──               # Development webpack configuration


From within your project directory:

$ curl -L -o && unzip && rm && mv -n ./gz-webpack-boilerplate-master/{.,}* ./ && rm -r ./gz-webpack-boilerplate-master

Install dev dependencies

$ npm install


Run the local webpack-dev-server with livereload and autocompile on http://localhost:8699/

$ npm start


Build the current application

$ npm run build

Configuring OpenGraph Metadata

Control social network sharing presentation with custom metadata added to your index.html file. Metadata is configured in the webpack.config.common.js file. Locate the htmlMetadata object and update with your project information:

const htmlMetadata = {
    domain: '',
    title: 'GreenZeta Webpack Boilerplate',
    author: 'Matthew Wilber',
    description: 'Webpack boilerplate using babel & sass.',
    themecolor: '#7bb951',
    twittername: 'greenzeta',
    facebookid: '631337813',

Progressive Web App (PWA) Support

Progressive Web Apps allow visitors to install your website and use it as a native application. This project satisfies the first two of the three minimum requirements for PWA installation:

  1. Web Manifest
  2. Service Worker
  3. SSL Hosting

For more information on PWAs and their development, check out the 10 Minute PWA demo from GreenZeta


If you're not familiar with webpack, the webpack-dev-server will serve the static files in your build folder and watch your source files for changes. When changes are made the bundle will be recompiled. This modified bundle is served from memory at the relative path specified in publicPath.

You can’t perform that action at this time.