Skip to content
Lightweight Webpack 4 boilerplate with Babel, SASS and no production dependencies! Includes PWA features and OpenGraph metadata.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
src
styles
.gitignore
LICENSE
README.md
app-shell.css
index.ejs
manifest.json
package-lock.json
package.json
service-worker.js
webpack.config.build.js
webpack.config.common.js
webpack.config.dev.js

README.md

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

Requirements

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
├── webpack.config.build.js             # Production webpack configuration
├── webpack.config.common.js            # Base webpack configuration
└── webpack.config.dev.js               # Development webpack configuration

Setup

From within your project directory:

$ curl -L -o master.zip https://github.com/mwilber/gz-webpack-boilerplate/archive/master.zip && unzip master.zip && rm master.zip && mv -n ./gz-webpack-boilerplate-master/{.,}* ./ && rm -r ./gz-webpack-boilerplate-master

Install dev dependencies

$ npm install

Development

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

$ npm start

Deployment

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: 'greenzeta.com',
    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

Webpack

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.