kolder v0.2.5

tl;dr

yarn global add kolder
kolder my-project
cd my-project
yarn start

Go to http://localhost:3000 and start coding!

Make a minified production build with yarn build.

Get Started Immediately

Tools like Webpack, Babel and ESLint are already pre-configured. Just create a project and start to code.

Features

• Plain. Start a project/prototype quickly.
• Build Web Project.
• Build React App.
• Basic Styles. Optionally add basic styles.
• CSS Hot Reloading.
• Code Formatting. With Prettier

Requirements

Make sure to have NodeJS and npm installed from NodeJS Website

You can use npm if you like, but yarn would save a lot time here. So make sure to have it installed.

npm install --global yarn

Further reading on installing yarn at Yarn Installation Guide

Install

yarn global add kolder

Usage

kolder my-project

Initialize a new project in current directory

kolder

Start a quick Prototype without answering any questions

kolder my-project --type=plain

Preconfigured Settings

Babel

Babel Transpiler with following Presets:

• babel-preset-env

babel-preset-env include only the polyfills and transforms needed for the browsers specified in kolder.config.js

and following Plugins:

• transform-object-rest-spread
• transform-class-properties

PostCSS

PostCSS adds some useful stuff:

• postcss-flexbugs-fixes tries to fix all of flexbug's issues.

Prettier

Prettier Code Formatter is setup to get along nicely with ESLint. Prettier can be run in your editor on-save, in a pre-commit hook, or in CI environments. Make sure to check out the docs.

Editor Config

Editor should use indentation of 2 spaces. If you want to change it, make sure to adjust ESLint settings too.

ESLint

Projects using eslint-config-standard.

Webpack Dev Server

Webpack Dev Server with Hot Reloading is already set up and can be started with yarn start.

ENV Variable

Use environment variable to execute development only code.

if (process.env.NODE_ENV !== 'production') console.log('');

The above statement is minified away in production build.

Custom Settings

Configure Options in kolder.config.js

entry

Type: string Path to your entry JS file

path

Type: string Your output directory

filename

Type: string Names of the output files

devServerPort

Type: number Choose dev server port, default port is http://localhost:3000

devServerOpenAuto

Type: boolean Automatically opens Browser window when starting dev server

devServerOpenPage

Type: string Dev Server will open on this path

devServerOverlay

Type boolean Shows compiling errors as overlay

browserlist

Type: array List of Browser used by CSS Autoprefixer. Look at Browserlist Docs for more info:

eslint

Type: object Set Custom ESLint Rules. Find more infos in the ESLint Docs

stylelint

Type: object Set Custom Stylelint Rules. Find more infos in the Stylelint Docs