https://github.com/abramstyle/kaonjs
Kaon.js is a react isomorphic app solution. It contains webpack build, hot reloading, code splitting and server side rendering.
https://github.com/abramstyle/kaonjs
code-splitting isomorphic koa react server-side-rendering webpack
Last synced: 4 months ago
JSON representation
Kaon.js is a react isomorphic app solution. It contains webpack build, hot reloading, code splitting and server side rendering.
- Host: GitHub
- URL: https://github.com/abramstyle/kaonjs
- Owner: abramstyle
- Created: 2018-03-12T06:43:28.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-06T06:24:41.000Z (about 6 years ago)
- Last Synced: 2025-01-27T21:03:50.901Z (4 months ago)
- Topics: code-splitting, isomorphic, koa, react, server-side-rendering, webpack
- Language: JavaScript
- Homepage:
- Size: 1.47 MB
- Stars: 21
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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 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 `/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 `/src/routes`.
- isomorphic.store - The client store path, should be an string, the default value is `/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 [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