# kaonjs

> Kaon.js is a react isomorphic framework, render your code from server side, with automatic code splitting

Latest version **1.4.6** (published 2019-01-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install kaonjs
pnpm add kaonjs
yarn add kaonjs
bun add kaonjs
```

Provides the command `kaon`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.6 |
| Published | 2019-01-15 |
| First published | 2018-03-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 65 |
| Unpacked size | 435.1 KB |
| Known vulnerabilities | 0 (+16 in 3 direct dependencies) |
| Install scripts | no |
| GitHub stars | 21 |
| Author | Abramstyle |
| Maintainers | abramstyle |

## Links

- npm: https://www.npmjs.com/package/kaonjs
- Repository: https://github.com/abramstyle/kaonjs
- Homepage: https://github.com/abramstyle/kaonjs#readme
- Issues: https://github.com/abramstyle/kaonjs/issues
- npm.io page: https://npm.io/package/kaonjs

## Dependencies (65)

- [koa](https://npm.io/package/koa.md) ^2.5.0
- [clui](https://npm.io/package/clui.md) ^0.3.6
- [jest](https://npm.io/package/jest.md) ^22.4.3
- [babel](https://npm.io/package/babel.md) ^6.23.0
- [debug](https://npm.io/package/debug.md) ^3.1.0
- [react](https://npm.io/package/react.md) ^16.2.0
- [redux](https://npm.io/package/redux.md) ^3.7.2
- [yargs](https://npm.io/package/yargs.md) ^11.0.0
- [dotenv](https://npm.io/package/dotenv.md) ^4.0.0
- [eslint](https://npm.io/package/eslint.md) ^4.9.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.5
- [precss](https://npm.io/package/precss.md) ^2.0.0
- [postcss](https://npm.io/package/postcss.md) ^6.0.19
- [webpack](https://npm.io/package/webpack.md) 3.11.0
- [bluebird](https://npm.io/package/bluebird.md) ^3.5.1
- [fs-extra](https://npm.io/package/fs-extra.md) ^5.0.0
- [cli-color](https://npm.io/package/cli-color.md) ^1.2.0
- [koa-views](https://npm.io/package/koa-views.md) ^6.1.4
- [react-dom](https://npm.io/package/react-dom.md) ^16.2.0
- [babel-core](https://npm.io/package/babel-core.md) ^6.26.0
- [css-loader](https://npm.io/package/css-loader.md) ^0.28.11
- [koa-static](https://npm.io/package/koa-static.md) ^4.0.2
- [url-loader](https://npm.io/package/url-loader.md) ^1.0.1
- [file-loader](https://npm.io/package/file-loader.md) ^1.1.11
- [koa-favicon](https://npm.io/package/koa-favicon.md) ^2.0.0
- [react-redux](https://npm.io/package/react-redux.md) ^5.0.7
- [webpack-log](https://npm.io/package/webpack-log.md) ^1.1.2
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^7.2.3
- [babel-eslint](https://npm.io/package/babel-eslint.md) ^8.1.2
- [babel-loader](https://npm.io/package/babel-loader.md) ^7.1.4
- [react-helmet](https://npm.io/package/react-helmet.md) ^5.2.0
- [react-router](https://npm.io/package/react-router.md) ^4.2.0
- [style-loader](https://npm.io/package/style-loader.md) ^0.20.3
- [webpack-merge](https://npm.io/package/webpack-merge.md) ^4.1.2
- [babel-polyfill](https://npm.io/package/babel-polyfill.md) ^6.26.0
- [koa-bodyparser](https://npm.io/package/koa-bodyparser.md) ^4.2.0
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^2.1.3
- [babel-preset-env](https://npm.io/package/babel-preset-env.md) ^1.6.1
- [react-hot-loader](https://npm.io/package/react-hot-loader.md) ^4.0.0
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^4.2.2
- [@abramstyle/utils](https://npm.io/package/@abramstyle/utils.md) ^0.8.15
- [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.24.1
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) 2
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) ^7.4.0
- [loadable-components](https://npm.io/package/loadable-components.md) ^2.2.2
- [react-router-config](https://npm.io/package/react-router-config.md) ^1.0.0-beta.4
- [babel-preset-stage-0](https://npm.io/package/babel-preset-stage-0.md) ^6.24.1
- [babel-preset-stage-2](https://npm.io/package/babel-preset-stage-2.md) ^6.24.1
- [eslint-config-airbnb](https://npm.io/package/eslint-config-airbnb.md) ^16.1.0
- [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) ^2.7.0
- [serialize-javascript](https://npm.io/package/serialize-javascript.md) ^1.5.0
- [eslint-plugin-jsx-a11y](https://npm.io/package/eslint-plugin-jsx-a11y.md) ^6.0.2
- [eslint-plugin-security](https://npm.io/package/eslint-plugin-security.md) ^1.4.0
- [eslint-plugin-immutable](https://npm.io/package/eslint-plugin-immutable.md) ^1.0.0
- [uglifyjs-webpack-plugin](https://npm.io/package/uglifyjs-webpack-plugin.md) ^1.2.3
- [webpack-manifest-plugin](https://npm.io/package/webpack-manifest-plugin.md) ^2.0.0-rc.2
- [css-modules-require-hook](https://npm.io/package/css-modules-require-hook.md) ^4.2.3
- [eslint-config-airbnb-base](https://npm.io/package/eslint-config-airbnb-base.md) ^12.1.0
- [write-file-webpack-plugin](https://npm.io/package/write-file-webpack-plugin.md) ^4.2.0
- [extract-text-webpack-plugin](https://npm.io/package/extract-text-webpack-plugin.md) ^3.0.2
- [babel-plugin-react-css-modules](https://npm.io/package/babel-plugin-react-css-modules.md) ^3.3.3
- [babel-plugin-transform-runtime](https://npm.io/package/babel-plugin-transform-runtime.md) ^6.23.0
- [eslint-import-resolver-webpack](https://npm.io/package/eslint-import-resolver-webpack.md) ^0.8.4
- [optimize-css-assets-webpack-plugin](https://npm.io/package/optimize-css-assets-webpack-plugin.md) ^4.0.0
- [babel-plugin-transform-es2015-modules-commonjs](https://npm.io/package/babel-plugin-transform-es2015-modules-commonjs.md) ^6.26.0

## Recent versions

- 1.4.6 (latest) — 2019-01-15
- 2.0.0-aplha-4 (next) — 2018-11-26
- 2.1.7 — 2019-01-08
- 2.1.6 — 2019-01-08
- 2.1.5 — 2019-01-08
- 2.1.4 — 2018-12-12
- 2.1.3 — 2018-12-12
- 2.1.2 — 2018-12-07
- 2.1.1 — 2018-12-06
- 2.1.0 — 2018-12-06
- 2.0.0 — 2018-11-26
- 2.0.0-alpha-3 — 2018-11-26
- 1.4.5 — 2018-10-29
- 1.4.4 — 2018-10-25
- 1.4.3 — 2018-10-25
- … 108 more at https://npm.io/package/kaonjs/versions

## README

# kaon.js
Kaon.js is an react isomorphic app solution. it contains webpack build, hot reloading, code splitting and server side rendering.

# From
Kaon is a Decepticon-controlled city-state in the southern hemisphere of Cybertron. Under Decepticon rule, its capitol is the fortress of Kolkular.

# The pronounce
['keɑn]

# The main stack
- koa
- react
- redux
- react-router
- react-helmet
- webpack
- postcss
- react-hot-loader
- loadable-components
- babel

# Usage
## install
```
npm install kaonjs
```
or with yarn
```
yarn add kaon
```
## add your config
Config is a js file that default exported a Javascript object, it specified a lot ot configurations. The default path is `<project_root>/config/kaon.config.js`. But you can put it into anywhere of your project.

The config file is not required, Kaon will use the default config as below:

```js
const kaonConfig = {
  ssr: true,
  app: {
    name: 'Kaon Config Template (production)',
    shortName: 'rib',
    port: 1827,
    routes: `${baseDir}/app/routes`,
    middlewares: `${baseDir}/app/middlewares`,
  },
  resources: {
    root: `${baseDir}/public`,
  },
  isomorphic: {
    routes: `${baseDir}/src/routes`,
    store: `${baseDir}/src/store/configureStore.js`,
    main: `${baseDir}/src/client`,
  },
  postcss: {
    path: `${baseDir}/config/postcss.config.js`,
  },
  webpack: {
    client: `${baseDir}/config/webpack.client.config`,
    server: `${baseDir}/config/webpack.server.config`,
  },
  build: {
    host: 'localhost',
    port: 1592,
    path: 'build/',
    target: `${baseDir}/public/build`,
  },
};
```



An configuration specified these optons:
### ssr
Enable or disable server side side rendering. Disable ssr will improve start up speed.

### i18n


###  app
- app.name - The app name
- app.shortName - The short app name.
- app.port - App listening port.
- app.routes - Customize koa routes.
- app.middlewares - the js file that will apply your middlewares.

### resources
- resources.root - If resources.root is exist, kaon will serve all files inside the path as static server.

### isomorphic
- isomorphic.routes - The client routes path, should be an string, the default value is `<project_root>/src/routes`.
- isomorphic.store - The client store path, should be an string, the default value is `<project_root>/src/store/configureStore`
- isomorphic.main - The client entry

### postcss
- postcss.path - If use postcss, shoud specify postcss path.

### webpack
- webpack.client - your client webpack configuration, object or function.
- webpack.server - your server webpack configuration, object or function.

### build
- build.host - The dev server will server at this host.
- build.port - the dev server port.
- build.path - the dev server url path.
- build.target - the build result path.

## command line
command: `kaon <cmd> [options]`

### commands
#### `kaon start [options]`

available options:

- config - specify config path

#### `kaon build [options]`

available options:

- config - specify config path

## nodejs APIs
You can use kaon as an npm modules instead of cli.

```javascript
const Kaon = require('kaon');
const kaon = new Kaon(config);

kaon.start();
```

## environment variables
### ENABLE_SSR
`yes` or `no`. If select `yes`, server side rendering will be enabled, `no` will disable server side rendering temporary.

## apply your middleware.
First, configure your middleware path, it should be a javascript file like below:

```javascript
const logger = require('koa-logger');
const favicon = require('koa-favicon');
const path = require('path');

function applyMiddlewares(app) {
  app.use(logger());
  app.use(favicon(path.join(__dirname, '../../public/favicon.ico')));
}

module.exports = applyMiddlewares;
```

The app instance will be passed to your function, then just call `app.use` to apply the middlewares.

## apply your routes.
Just like apply middlewares. just don't forget configure your routes path in your config file.

```javascript
const Router = require('koa-router');

function applyRoutes(app) {
  const router = new Router();

  router.get('/', async (ctx) => {
    ctx.body = 'hello world.';
  });

  app.use(router.routes());
  app.use(router.allowedMethods());
}

module.exports = applyRoutes;
```

## add your customize script, styles, head tags, ect.
You can use [react-helmet](https://github.com/nfl/react-helmet).

## apply your own webpack configuration.
*ATTENTION!* You cannot override default entry with yours.

## pm2 graceful reload
add the below configuration to your pm2
```js
module.exports = {
  apps : [{
    name: "api",
    script: "./api.js",
    wait_ready: true,
    listen_timeout: 3000,
  }],
}
```

# License
MIT

---
_Source: https://npm.io/package/kaonjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._