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
.
Tools like Webpack, Babel and ESLint are already pre-configured.
Just create a project and start to code.
- 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
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
yarn global add kolder
kolder my-project
Initialize a new project in current directory
kolder
Start a quick Prototype without answering any questions
kolder my-project --type=plain
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 adds some useful stuff:
- postcss-flexbugs-fixes tries to fix all of flexbug's issues.
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 should use indentation of 2 spaces.
If you want to change it, make sure to adjust ESLint settings too.
Projects using eslint-config-standard.
Webpack Dev Server with Hot Reloading is already set up and can be started with yarn start
.
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.
Type: string
Path to your entry JS file
Type: string
Your output directory
Type: string
Names of the output files
Type: number
Choose dev server port, default port is http://localhost:3000
Type: boolean
Automatically opens Browser window when starting dev server
Type: string
Dev Server will open on this path
Type boolean
Shows compiling errors as overlay
Type: array
List of Browser used by CSS Autoprefixer. Look at Browserlist Docs for more info:
Type: object
Set Custom ESLint Rules. Find more infos in the ESLint Docs
Type: object
Set Custom Stylelint Rules. Find more infos in the Stylelint Docs