Sign Up for Free

RunKit +

Try any Node.js package right in your browser

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:

// require("kolder/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

kolder v0.2.5

Create projects with no build configuration.

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 include only the polyfills and transforms needed for the browsers specified in kolder.config.js

and following Plugins:

PostCSS

PostCSS adds some useful stuff:

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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free