tl;dr
yarn global add kolderkolder my-projectcd my-projectyarn 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 include only the polyfills and transforms needed for the browsers specified in kolder.config.js
and following Plugins:
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 processenvNODE_ENV !== 'production' console;
The above statement is minified away in production build.
Custom Settings
kolder.config.js
Configure Options in 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