{"id":24791271,"url":"https://github.com/abramstyle/kaonjs","last_synced_at":"2025-10-12T15:31:19.391Z","repository":{"id":57288271,"uuid":"124845273","full_name":"abramstyle/kaonjs","owner":"abramstyle","description":"Kaon.js is a react isomorphic app solution. It contains webpack build, hot reloading, code splitting and server side rendering.","archived":false,"fork":false,"pushed_at":"2019-03-06T06:24:41.000Z","size":1542,"stargazers_count":21,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-27T21:03:50.901Z","etag":null,"topics":["code-splitting","isomorphic","koa","react","server-side-rendering","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/abramstyle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-12T06:43:28.000Z","updated_at":"2023-07-27T12:03:35.000Z","dependencies_parsed_at":"2022-09-15T14:52:01.039Z","dependency_job_id":null,"html_url":"https://github.com/abramstyle/kaonjs","commit_stats":null,"previous_names":["abramstyle/keon"],"tags_count":125,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abramstyle%2Fkaonjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abramstyle%2Fkaonjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abramstyle%2Fkaonjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abramstyle%2Fkaonjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abramstyle","download_url":"https://codeload.github.com/abramstyle/kaonjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236239259,"owners_count":19117165,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-splitting","isomorphic","koa","react","server-side-rendering","webpack"],"created_at":"2025-01-29T19:16:13.124Z","updated_at":"2025-10-12T15:31:14.068Z","avatar_url":"https://github.com/abramstyle.png","language":"JavaScript","readme":"# kaon.js\nKaon.js is an react isomorphic app solution. it contains webpack build, hot reloading, code splitting and server side rendering.\n\n# From\nKaon is a Decepticon-controlled city-state in the southern hemisphere of Cybertron. Under Decepticon rule, its capitol is the fortress of Kolkular.\n\n# The pronounce\n['keɑn]\n\n# The main stack\n- koa\n- react\n- redux\n- react-router\n- react-helmet\n- webpack\n- postcss\n- react-hot-loader\n- loadable-components\n- babel\n\n# Usage\n## install\n```\nnpm install kaonjs\n```\nor with yarn\n```\nyarn add kaonjs\n```\n## add your config\nConfig is a js file that default exported a Javascript object, it specified a lot ot configurations. The default path is `\u003cproject_root\u003e/config/kaon.config.js`. But you can put it into anywhere of your project.\n\nThe config file is not required, Kaon will use the default config as below:\n\n```js\nconst kaonConfig = {\n    ssr: true,\n    onlyServer: false,\n    renderer: {\n      template: path.resolve(__dirname, '../isomorphic/template'),\n    },\n    app: {\n      name: 'Kaon Config Template (production)',\n      shortName: 'rib',\n      port: 1827,\n      routes: `${baseDir}/app/routes`,\n      middlewares: `${baseDir}/app/middlewares`,\n    },\n    resources: {\n      root: `${baseDir}/public`,\n    },\n    isomorphic: {\n      routes: `${baseDir}/src/routes`,\n      store: `${baseDir}/src/store/configureStore.js`,\n      main: `${baseDir}/src/client`,\n    },\n    postcss: {\n      path: `${baseDir}/config/postcss.config.js`,\n    },\n    webpack: {\n      client: `${baseDir}/config/webpack.client.config.js`,\n      server: `${baseDir}/config/webpack.server.config.js`,\n    },\n    build: {\n      host: 'localhost',\n      port: 1592,\n      path: 'build/',\n      target: `${baseDir}/public/build`,\n    },\n  };\n```\n\n\n\nAn configuration specified these optons:\n### ssr\nEnable or disable server side side rendering. Disable ssr will improve start up speed.\n\n### i18n\n\n\n###  app\n- app.name - The app name\n- app.shortName - The short app name.\n- app.port - App listening port.\n- app.routes - Customize koa routes.\n- app.middlewares - the js file that will apply your middlewares.\n\n### resources\n- resources.root - If resources.root is exist, kaon will serve all files inside the path as static server.\n\n### isomorphic\n- isomorphic.routes - The client routes path, should be an string, the default value is `\u003cproject_root\u003e/src/routes`.\n- isomorphic.store - The client store path, should be an string, the default value is `\u003cproject_root\u003e/src/store/configureStore`\n- isomorphic.main - The client entry\n\n### postcss\n- postcss.path - If use postcss, shoud specify postcss path.\n\n### webpack\n- webpack.client - your client webpack configuration, object or function. It will merge into default webpack configuration.\n- webpack.server - your server webpack configuration, object or function. It will merge into default webpack configuration.\n\n### build\n- build.host - The dev server will server at this host.\n- build.port - the dev server port.\n- build.path - the dev server url path.\n- build.target - the build result path.\n\n## command line\ncommand: `kaon \u003ccmd\u003e [options]`\n\n### commands\n#### `kaon start [options]`\n\navailable options:\n\n- config - specify config path\n\n#### `kaon build [options]`\n\navailable options:\n\n- config - specify config path\n\n## nodejs APIs\nYou can use kaon as an node modules instead of cli.\n\n```javascript\nconst Kaon = require('kaon');\nconst kaon = new Kaon(config);\n\nkaon.start();\n```\n\n### build\n```javascript\nconst Kaon = require('kaon');\nconst kaon = new Kaon(config);\n\nkaon.build();\n```\n\n## environment variables\n### ENABLE_SSR\n`yes` or `no`. If select `yes`, server side rendering will be enabled, `no` will disable server side rendering temporary.\n\n## apply your middleware.\nFirst, configure your middleware path, it should be a javascript file like below:\n\n```javascript\nconst logger = require('koa-logger');\nconst favicon = require('koa-favicon');\nconst path = require('path');\n\nfunction applyMiddlewares(app) {\n  app.use(logger());\n  app.use(favicon(path.join(__dirname, '../../public/favicon.ico')));\n}\n\nmodule.exports = applyMiddlewares;\n```\n\nThe app instance will be passed to your function, then just call `app.use` to apply the middlewares.\n\n## apply your routes.\nJust like apply middlewares. just don't forget configure your routes path in your config file.\n\n```javascript\nconst Router = require('koa-router');\n\nfunction applyRoutes(app) {\n  const router = new Router();\n\n  router.get('/', async (ctx) =\u003e {\n    ctx.body = 'hello world.';\n  });\n\n  app.use(router.routes());\n  app.use(router.allowedMethods());\n}\n\nmodule.exports = applyRoutes;\n```\n\n## add your customize script, styles, head tags, ect.\nYou can use [react-helmet](https://github.com/nfl/react-helmet).\n\n## apply your own webpack configuration.\n\n\n*ATTENTION!* You cannot override default entry with yours.\n\n## pm2 graceful reload\nadd the below configuration to your pm2\n```js\nmodule.exports = {\n  apps : [{\n    name: \"api\",\n    script: \"./api.js\",\n    wait_ready: true,\n    listen_timeout: 3000,\n  }],\n}\n```\n\n# License\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabramstyle%2Fkaonjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabramstyle%2Fkaonjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabramstyle%2Fkaonjs/lists"}