ZigZag Boilerplate

The no-framework boilerplate

What’s Included?

• ES6, SASS and EJS syntax support.
• Autoprefixed CSS, so you don’t need -webkit- or other prefixes.
• A live development server that warns about common mistakes.
• Out-of-the-box Progressive web app support
• Easily deploy your app to Github Pages.
• A build script to bundle JS, CSS, and images for production, with hashes.
• Non obtrusive linter with prettier.
• Aliases (@) to easily include files.
• Javascript and sass files are prettyfied on save and on commits

Installation

This boilerplate requires: Node.js v6+ and Webpack. Yarn is also great.

$ mkdir my-app
$ cd my-app
$ curl -L -o master.zip https://github.com/adrienZ/zigzag-boilerplate/archive/master.zip && unzip master.zip && rm master.zip && mv ./zigzag-boilerplate-master/{.,}* ./ && rm -r ./zigzag-boilerplate-master
$ npm run hello

At this point, you'll need to rename .env.example into .env and add your configuration

Commands

$ npm run hello #setup

$ npm run start #dev on webpack dev server

$ npm run build #production

$ npm run watch #watch and ouput files

Code quality

$ npm run prettier format-js #make my js pretty

$ npm run prettier format-scss #make my scss pretty

Deploy

Using Github pages

coming soon...

Features

When you follow the folder structure, it give you access to some handy aliases. You can found them in webpack/urls.js.

Adding media has never been so easy !

In javascript:

import myImgPath from '@img/test.jpg'

In sass:

.myDiv {
  background: url("~@img/test.jpg")
}

In html (.ejs)

<img src="<%= require("@img/test.jpg") %>">

Font face

@font-face {
  font-family: 'MyFont';
  src: url(~@fonts/font.ttf);
  font-weight: normal;
  font-style: normal;
}

Caveats

the htmlWebpackPlugin does not allow HMR. you can either :

• forget about it
• activate live reload, but lose HMR. you have to include your file in your js like this:

import 'ejs-loader!@base/index.ejs'

Linters

• ESLint :
  • Atom : apm install linter-eslint
  • VS Code : ext install vscode-eslint
• Prettier :
  • Atom: apm install prettier-atom
  • VS Code: ext install prettier-vscode

Warning

Do not forget to edit your package.json before publishing your repo !