kaonjs

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #go #machine-learning #rust #nodejs #awesome #cli #mcp #open-source

(★ 21)

Kaon.js is a react isomorphic app solution. It contains webpack build, hot reloading, code splitting and server side rendering.

kaonjs 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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 kaonjs
```
## 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,
    onlyServer: false,
    renderer: {
      template: path.resolve(__dirname, '../isomorphic/template'),
    },
    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.js`,
      server: `${baseDir}/config/webpack.server.config.js`,
    },
    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. It will merge into default webpack configuration.
- webpack.server - your server webpack configuration, object or function. It will merge into default webpack configuration.

### 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 node modules instead of cli.

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

kaon.start();
```

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

kaon.build();
```

## 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

kaonjs

kaonjs 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

kaonjs

kaonjs 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README