This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 400,000 packages pre-installed, including
kolder with all
npm packages installed. Try it out:
kolder lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
yarn global add kolder kolder my-project cd my-project yarn start
http://localhost:3000 and start coding!
Make a minified production build with
Tools like Webpack, Babel and ESLint are already pre-configured.
Just create a project and start to code.
Make sure to have
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
Initialize a new project in current directory
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:
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
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.
Path to your entry JS file
Your output directory
Names of the output files
Choose dev server port, default port is
Automatically opens Browser window when starting dev server
Dev Server will open on this path
Shows compiling errors as overlay
List of Browser used by CSS Autoprefixer. Look at Browserlist Docs for more info:
Set Custom ESLint Rules. Find more infos in the ESLint Docs
Set Custom Stylelint Rules. Find more infos in the Stylelint Docs