frontend-boilerplate

Frontend boilerplate with batteries included for fast development.

Features

• Updated frequently
• Auto reloads after changes
• Optimizes JS, CSS & Imgs
• Transpiles modern JS
• Auto prefixes CSS
• Linters with recommended defaults
• Validates commit messages

Tools

• Webpack
• Babel
• SASS
• PostCSS
• Autoprefixer
• Cssnano
• Prettier
• ESLint
• StyleLint
• BrowserSync
• Normalize.css
• Browserlist

Requirements

• Docker
• Docker-Compose

Setup

$ git clone [email protected]:verzola/frontend-boilerplate.git
$ cd frontend-boilerplate
$ docker-compose up -d

URLs

• BrowserSync: http://localhost:8080
• BrowserSync UI: http://localhost:3001
• Webpack Dev Server: http://localhost:3000

SASS

The SASS structure is based on Sass Boilerplate with some tweaks.

Commands

Start webpack development server

$ npm run dev

Build project for production

$ npm run build

Format files with prettier

$ npm run format

Run JS & CSS linter

$ npm run lint

Run JS linter only

$ npm run lint:js

Run CSS linter only

$ npm run lint:css

Same as dev

$ npm start

Profile application, this will generate stats.json file that can be uploaded to some tools like Webpack Visualizer

$ npm run profile

Enter in container shell to run commands inside container

$ npm run shell

Stops and removes containers

$ npm run prune

Prunes and recreates containers

$ npm run reset

Configuration

You can rename the .env.example file to .env and configure some things without messing with webpack configuration.